AngularJs的是什么
AngularJS 是一个 JavaScript 框架。
AngularJs的历史
AngularJs是在2009年起先由Miško Hevery和Adam Abrons开发的,在09年的时候发布版本1.0，目前最新版本是1.3。
为什么要学习AngularJs
对于前端的框架大家肯定都知道有很多种，但是我们为什么要选择AngularJs，他有什么特性值得我们放弃那么多的框架， 而选择他呢？
- 1.MVC
-
1 <!DOCTYPE html> 2 <html ng-app="" > 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 </head> 7 <body ng-controller="myCtrl"> //ng-controller就是控制器 8 <p>{{person.name}}</p> //p标签就是视图 {{person.name}}就是数据 9 <script src="js/angular-1.2.16.js"></script> 10 <script> 11 function myCtrl($scope) 12 { 13 $scope.person = { "name": "hello" }; 14 } 15 </script> 16 </body> 17 </html>
- ng-controller从字面上就可以看出这是控制器的意思，在这我们把控制器定义为一个方法，<p>标签当然是所谓的视图，{{person.name}}就是所谓的数据了
- 2.模板
-
1 <!DOCTYPE html> 2 <html ng-app="myApp" > 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 </head> 7 <body ng-controller="myCtrl"> 8 <p>{{person.name}}</p> 9 <script src="js/angular-1.2.16.js"></script> 10 <script> 11 var app = angular.module( "myApp", [] ); //anular用自身带的一个函数定义了模块。 12 app.controller( "myCtrl", function ( $scope ) 13 { 14 $scope.person = { "name": "hello" }; 15 } ) 16 </script> 17 </body> 18 </html>
大家学到后面就会发现angularJs要学习的内容很多，但是他一切都是围绕着模块开始的，这一点大家要记住。
- 3.双向数据绑定
- 4.指令
AngularsJs语法
AngularJs指令
1.自带的指令
应用程序ng-app：定义一个AngularJs应用程序
<!DOCTYPE html> <html ng-app="" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> {{4*5}} <script src="js/angular.js"></script> </body> </html>
大家有没有注意到我在html标签中添加了一个属性ng-app,这个是定义一个AngularJs应用程序，一个页面有且只有一个ng-app，当你写了第二个应用程序ng-app时候，angularjs无法去编译，他只会去读取第一个应用程序，大家有注意到我这个ng-app的属性等于一个空的字符串，如果你命名了一个名称，及时你没有做任何操作，也要去定义，要不然会报错。
1 <!DOCTYPE html> 2 <html ng-app="myApp"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <div ng-app=""> 9 <div><input ng-model="search" /></div> 10 <ul> 11 <li ng-repeat="i in [0,1,2,3,4,5,6,7,8,9]|filter:search"> 12 {{i}} 13 </li> 14 </ul> 15 </div> 16 <script src="js/angular-1.2.16.js"></script> 17 <script> 18 var app = angular.module( "myApp", [] ); //如果你不定义的话，angularjs就会报错 19 </script> 20 </body> 21 </html>
初始化数据ng-init
<!DOCTYPE html> <html ng-app="" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body ng-init="first=5;secend=6"> {{first*secend}} <script src="js/angular.js"></script> </body> </html>
ng-init是angularJs初始化数据，在AngularJs中，还有一个初始化数据的指令为控制器ng-controller,这个会指令会在后面详细讲到。
绑定数据ng-model
ng-model主要是用在表单上
ng-bind主要是用来展示
1 <!DOCTYPE html> 2 <html ng-app=""> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <div ng-app=""> 9 <div><input ng-model="search" /></div> 10 <p ng-bind="search"></p> 11 </div> 12 <script src="js/angular-1.2.16.js"></script> 13 </body> 14 </html>
这两个指定都是用来做绑定数据，唯一的区别就是ng-model可以用在输入的形式下，也是我们通常讲的表单。
重复HTML元素ng-repeat会去重复一个html元素
1 <!DOCTYPE html> 2 <html ng-app=""> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <!-- ng-repeat对数组循环 --> 9 <ul ng-init="names=[1,2,3,4,5,6,7]"> 10 <li ng-repeat="i in names">{{i}}</li> 11 </ul> 12 <!-- ng-repeat对对象循环 --> 13 <ul ng-init="person={'name':'hello','age':22}"> 14 <li ng-repeat="s in person">{{s}}</li> 15 </ul> 16 <!-- ng-repeat对对象数组循环 --> 17 <ul ng-init="person=[{'name':'s','age':22},{'name':'s2','age':22},{'name':'s3','age':22}]"> 18 <li ng-repeat="s in person">{{s.name+", "+s.age}}</li> 19 </ul> 20 <script src="js/angular-1.2.16.js"></script> 21 </body> 22 </html>
ng-repeat指令可以通过$index返回当前引用的元素序号，$first,$middle,$last,告诉你是否是集合中的第一个元素、中间的某个元素，或者最后一个元素。
表达式
表达式写在双答括号内，这个和handlebars一样：{{expression}},和AngularJs指令ng-bind，有异曲同工的作用，AngularJs表达式很像Javascript表达式：可以包含文字、运算符和变量 实例{{5+5}}或{{firstName+" "+lastName}}
<!DOCTYPE html> <html ng-app=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> {{5+5}} <script src="js/angular.js"></script> </body> </html>
ng-bind和{{expression}}表达式的区别
用表达式，在第一个加载页面，其未被渲染好的模板会被用户看到，而使用ng-bind就不会出现这种情况。造成这种原因是，浏览器需要首先加载html页面，渲染它，然后Angular才有机会把他解释成我们期望的内容。