一篇博客搞定Angularjs
2015-04-13 00:01
148 查看
简介
AngularJS 通过 ng-directives 扩展了 HTML。ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。
<!DOCTYPE html> <html> <body> <div ng-app=""> <p>在输入框中尝试输入:</p> <p>姓名:<input type="text" ng-model="name"></p> <p ng-bind="name"></p> </div> <script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script> </body> </html>
ng-app 指令告诉 AngularJS,
元素是 AngularJS 应用程序 的”所有者”。
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
<div ng-app="" ng-init="firstName='John'"> <p>姓名为 <span ng-bind="firstName"></span></p> </div>
ng-init 指令初始化 AngularJS 应用程序变量。
HTML5 允许扩展的(自制的)属性,以 data- 开头。
AngularJS 属性以 ng- 开头,但是您可以使用 data-ng- 来让网页对 HTML5 有效。
<div data-ng-app="" data-ng-init="firstName='John'"> <p>姓名为 <span data-ng-bind="firstName"></span></p> </div>
AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置”输出”数据。
AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + ” ” + lastName }}
<!DOCTYPE html> <html> <body> <div ng-app=""> <p>我的第一个表达式: {{ 5 + 5 }}</p> </div> <script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script> </body> </html>
表达式
数字<div ng-app="" ng-init="quantity=1;cost=5"> <p>总价: {{ quantity * cost }}</p> </div>
字符串
<div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>姓名: {{ firstName + " " + lastName }}</p> </div>
对象
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>姓为 {{ person.lastName }}</p> </div>
数组
<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>第三个值为 {{ points[2] }}</p> </div>
AngularJS 指令
AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把应用程序数据绑定到 HTML 元素。
数据绑定
上面实例中的 {{ 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>
重复 HTML 元素
ng-repeat 指令会重复一个 HTML 元素:<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>
AngularJS 控制器
AngularJS 应用程序被控制器控制。ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。
控制器的 $scope 是控制器所指向的应用程序 HTML 元素。
<div ng-app="" ng-controller="personController"> 名: <input type="text" ng-model="person.firstName"><br> 姓: <input type="text" ng-model="person.lastName"><br> <br> 姓名: {{person.firstName + " " + person.lastName}} </div> <script> function personController($scope) { $scope.person = { firstName: "John", lastName: "Doe" }; } </script>
AngularJS 应用程序由 ng-app 定义。应用程序在
内运行。
ng-controller 指令把控制器命名为 object。
函数 personController 是一个标准的 JavaScript 对象的构造函数。
控制器对象有一个属性:$scope.person。
person 对象有两个属性:firstName 和 lastName。
ng-model 指令绑定输入域到控制器的属性(firstName 和 lastName)。
控制器属性
上面的实例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象。控制器也可以把函数作为对象属性:
<div ng-app="" ng-controller="personController"> 名: <input type="text" ng-model="person.firstName"><br> 姓: <input type="text" ng-model="person.lastName"><br> <br> 姓名: {{person.fullName()}} </div> <script> function personController($scope) { $scope.person = { firstName: "John", lastName: "Doe", fullName: function() { var x; x = $scope.person; return x.firstName + " " + x.lastName; } }; } </script>
控制器方法
<div ng-app="" ng-controller="personController"> 名: <input type="text" ng-model="person.firstName"><br> 姓: <input type="text" ng-model="person.lastName"><br> <br> 姓名: {{fullName()}} </div> <script> function personController($scope) { $scope.person = { firstName: "John", lastName: "Doe", }; $scope.fullName = function() { var x; x = $scope.person; return x.firstName + " " + x.lastName; }; } </script>
to be continued
相关文章推荐
- 第一博--周鸿祎的一篇博客(自勉加共勉)
- 怎么样写好一篇技术博客
- 本博客一篇文章上百度首页“热门推荐”第一位啦,小高兴~
- 转发今天看到的一篇关于负载均衡的博客
- shiro与SSH整合的写的挺好的一篇博客 转载出来给 分享
- 一篇博客理解Recyclerview的使用
- 2016年的最后一篇博客--超超
- 如何写一篇好的技术博客
- 惊现一篇韩语论文引用了我的博客
- 搞笑--一篇有趣的文章编译自一篇西班牙博客。有一位美丽的公主,被关押在一个城堡中最高的塔上,一条凶恶的巨龙看守着她,需要有一位勇士营救她…
- 数据库的原理,一篇文章搞定
- 如何写一篇好的技术博客
- 数据库Sqlite+线程(其余部分请参照另一篇博客“数据库Sqlite+AsyncTask”)
- 用angularjs在循环遍历中绑定ng-model(转载---CSDN博客 )
- 博客开张头一篇(介绍一下自己)
- 贴一篇感人肺腑激动人心的博客(转自51cto)
- 一篇技术文章合格的标准 --- 一个对博客的理解
- 怎么样写好一篇技术博客
- 这是一篇博客
- 记录话语的一篇博客