AngularJS学习笔记1

1.简介

angular.js 版本下载链接： https://github.com/angular/angular.js/releases

AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

2.指令

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。

（HTML5 允许用户自定义属性，以 data- 开头。

AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。）

ng-app 指令在网页加载完毕时会自动自动初始化应用程序。

（一个html文档一般只出现一次，如果出现多次也是默认加载第一个）。

ng-init 指令初始化应用程序数据。（通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。）

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

<div ng-app="" ng-init="firstName='corol'"><p>在输入框中尝试输入：</p><p>姓名：<input type="text" ng-model="firstName"></p><p>你输入的为： {{ firstName }}</p>
</div>

上面实例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。

AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。

{{ firstName }} 是通过 ng-model="firstName" 进行同步。

在下一个实例中，两个文本域是通过两个 ng-model 指令同步的：

<div ng-app="" ng-init="quantity=1;price=5">
<h2>价格计算器</h2>
数量： <input type="number" ng-model="quantity">
价格： <input type="number" ng-model="price">
<p><b>总价：</b> {{ quantity * price }}</p>
</div>

ng-repeat 指令循环输出（数组）。

<div ng-app="" ng-init="names=['Jani','Hege','Kai']"><p>使用 ng-repeat 来循环数组</p><ul><li ng-repeat="x in names">{{ x }}</li></ul>
</div>

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]"><p>循环对象：</p>
<ul><li ng-repeat="x in names">{{ x.name + ', ' + x.country }}</li>
</ul></div>

转载于:https://www.cnblogs.com/corolcorona/p/6704181.html

AngularJS学习笔记1相关推荐

【AngularJs学习笔记五】AngularJS从构建项目开始
为什么80%的码农都做不了架构师?>>> #0 系列目录# AngularJs学习笔记 [AngularJs学习笔记一]Bower解决js的依赖管理 [AngularJs学习笔 ...
【AngularJs学习笔记三】Grunt任务管理器
为什么80%的码农都做不了架构师?>>> #0 系列目录# AngularJs学习笔记 [AngularJs学习笔记一]Bower解决js的依赖管理 [AngularJs学习笔 ...
AngularJs学习笔记--unit-testing
原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...
[AngularJS学习笔记] 基础学习01
2016-06-06开始学习AngularJS AngularJS是会extend HTML的 ng-directives 先学习了四个 ng-app:定义AngularJS Application的 ...
AngularJS学习笔记(一)
前言几个月之前了解过一点Angular,主要是通过phonecat应用程序了解一些入门东西,但是当被问及什么是Angular或者你对Angular的理解时,只记得一个MVVM双向数据绑定,显然这是不 ...
AngularJs学习笔记0——前言
距离上次写博客有很长时间了,这段时间中也一直想坚持写博客,但是迟迟未动,一方面是因为刚换工作并适应新的环境导致工作比较忙碌,一直没有抽出时间来,其实说白了就是给自己的懒惰找借口,但是本人在园子里也有一 ...
angularjs学习笔记一——了解angularjs、开发环境搭建、第一个angularjs程序
一.什么是angularJS angularJS是基于javascript的框架,所谓框架,自然就是封装了很多功能,举个例子,使用原生javascript,如果你要写一个网页幻灯片,你可能需要几十行代 ...
AngularJS 学习笔记---AngularJS 简介
AngularJS 简介 http://www.runoob.com/angularjs/angularjs-intro.html https://docs.angularjs.org/api/ng ...
AngularJS 学习笔记---AngularJS 表达式
AngularJS 表达式 AngularJS 使用表达式把数据绑定到 HTML. AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. Ang ...
【笔记】AngularJs学习笔记[02]【实践回顾与知识点归纳】
⭐️ 本文首发自前端修罗场(点击即可加入),一个专注 Web 技术.答疑解惑.面试辅导.职业发展的社区.现在加入,即可参与打卡挑战,和一群人一起努力.挑战成功即可获取一次免费的模拟面试机会,进而评估 ...

AngularJS学习笔记1

AngularJS学习笔记1相关推荐

最新文章

热门文章