代码改变世界

AngularJs 入门

2014-08-31 23:56  Z梦  阅读(578)  评论(0)  编辑  收藏  举报

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才有机会把他解释成我们期望的内容。