介绍
AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入，等等。AngularJS百度百科
入门
可以使用下面这个应用开始AngularJS的第一步.
1 2 3 4 5 6 7 8 9 10 11 | <!doctype html> <html ng-app> <head> <script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"></script> </head> <body> Your name: <input type="text" ng-model="yourname" placeholder="World"> <hr> Hello {{yourname || 'World'}}! </body> </html> |
一些常用的命令
ng-app 指令定义一个AngularJS应用程序[一个页面可包含多个]。
ng-model 指定把元素值（比如输入框的值）绑定到应用程序。
ng-bind 指令把应用程序数据绑定到HTML视图。
ng-init 指令初始化AngularJS应用程序变量[不推荐使用]。
{{}} 表达式.
把数据绑定到HTML与ng-bind指令相同.
ng-repeat 指令会重复一个HTML元素。
ng-controller 指令定义了应用程序控制器。控制器的 $scope 是控制器所指向的应用程序 HTML 元素。
过滤器:
| 过滤器 | 描述 |
| currency | 格式化数字为货币格式。[<p>总价 = {{ (quantity * price) | currency }}</p> ] |
| filter | 从数组项中选择一个子集。 |
| lowercase | 格式化字符串为小写。/td> |
| orderBy | 根据某个表达式排列数组。 |
| uppercase | 格式化字符串为大写。 |
$http AngularJS 中的一个核心服务，用于读取远程服务器的数据。
ng-repeat 显示表格[下面有示例]
ng-disabled 指令直接绑定应用程序数据到HTML的disabled属性[true,false].
ng-show 指令隐藏或显示一个HTML元素.
ng-click 指令定义了一个单击事件
ng-hide =”true”元素不可见,=”false”元素可见.控制元素隐藏或显示.
一个Demo页面
页面中包含了几个示例,都是可以运行的.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | <!-- index.html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title> <script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"></script> <style> p { border:2px solid #00ff00; padding:5px 0; } table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(odd) { background-color: #f1f1f1; } table tr:nth-child(even) { background-color: #ffffff; } </style> </head> <body ng-app="myTodoApp" > <div ng-controller="myTodoCtrl"> <h1>AngularJs</h1> <p> <span style="font-size:22px;color:red;">示例1</span> 输入你的名字: <input type="text" ng-model="name"/> <br /> <span >你输入的是:{{name}}</span> </p> <form name="myForm" > <p> <span style="font-size:22px;color:red;">示例2</span> 这里只能输入数字[0-99]: <input type="number" name="input" ng-model="value" min="0" max="99" required> <span class="error" ng-show="myForm.input.$error.required">Required!</span> <span class="error" ng-show="myForm.input.$error.number">Not valid number!</span> <tt>你输入的数字是:{{value}}</tt> <br/> </p> </form> <p> <span style="font-size:22px;color:red;">示例3</span> <input type="button" value="红色" ng-click="showtext={'color':'red'}" /> <input type="button" value="蓝色" ng-click="showtext={'color':'blue'}" /> <input type="button" value="黑色" ng-click="showtext={'color':'blank'}" /> <input type="button" value="小字体" ng-click="showtext={'font-size':'12px'}" /> <input type="button" value="中等字体" ng-click="showtext={'font-size':'18px'}" /> <input type="button" value="大字体" ng-click="showtext={'font-size':'36px'}" /> <br /> <span ng-style="showtext">这是示例数据!!!</span> </p> <p> <span style="font-size:22px;color:red;">示例4</span> 输出表格,在下面的字段填上值,点击添加即可输出. <br /> Name: <input type="text" ng-model="namesvalues"/> City: <input type="text" ng-model="cityvalues"/> Country: <input type="text" ng-model="countryvalues"/> <input type="button" value="添加" ng-click="addlist()"/> <input type="button" value="恢复" ng-click="resetlist()"/> <table> <tr style="background-color:red;"> <td>Name</td> <td>City</td> <td>Country</td> </tr> <tr ng-repeat="x in showlist | orderBy : 'Name'"> <td>{{x.Name}}</td> <td>{{x.City}}</td> <td>{{x.Country}}</td> </tr> </table> </p> <p> <span style="font-size:22px;color:red;">示例5</span> <input type="button" value="点一下加一次" ng-click="count=count+1" /> <input type="button" value="鼠标移入就加一次" ng-mouseover="count=count+1" /> <input type="button" value="鼠标移出就加一次" ng-mouseout="count=count+1" /> <span>和是:{{ count }}</span> </p> </div> <div ng-controller="times"> <p> <span style="font-size:22px;color:red;">示例6</span> 现在时间是:{{nowdate.now}} </p> </div> <div ng-controller="LogController"> <p> <span style="font-size:22px;color:red;">示例7</span> 输入消息,点击相应按钮,打开控制台(Console)[Chrome:F12其他类似]即可查看. Message: <input type="text" ng-model="message"/> <button ng-click="$log.log(message)">log</button> <button ng-click="$log.warn(message)">warn</button> <button ng-click="$log.info(message)">info</button> <button ng-click="$log.error(message)">error</button> </p> </div> </body> <script src="myTodoApp.js"></script> <script src="myTodoCtrl.js"></script> </html> |
第二个源文件,必须与index.html放在同一个目录下面.
1 2 | //myTodoApp.js var app = angular.module("myTodoApp",[]); |
第三个源文件,必须与index.html放在同一个目录下面.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | //myTodoCtrl.js app.controller("myTodoCtrl",function($scope){ $scope.count=0; $scope.showlist=[{"Name" : "Alfreds Futterkiste","City" : "Berlin","Country" : "Germany"},{"Name" : "Berglunds snabbköp","City" : "Luleå","Country" : "Sweden"},{"Name" : "Centro comercial Moctezuma","City" : "México D.F.","Country" : "Mexico"},{"Name" : "Ernst Handel","City" : "Graz","Country" : "Austria"},{"Name" : "FISSA Fabrica Inter. Salchichas S.A.","City" : "Madrid","Country" : "Spain"}]; $scope.addlist=function(){ $scope.showlist.push({"Name" : $scope.namesvalues,"City" : $scope.cityvalues,"Country" : $scope.countryvalues}); }; $scope.resetlist=function(){ $scope.showlist=[{"Name" : "Alfreds Futterkiste","City" : "Berlin","Country" : "Germany"},{"Name" : "Berglunds snabbköp","City" : "Luleå","Country" : "Sweden"},{"Name" : "Centro comercial Moctezuma","City" : "México D.F.","Country" : "Mexico"},{"Name" : "Ernst Handel","City" : "Graz","Country" : "Austria"},{"Name" : "FISSA Fabrica Inter. Salchichas S.A.","City" : "Madrid","Country" : "Spain"}]; } }).controller("times",function($scope){ $scope.nowdate ={ now: new Date() }; var updateClock = function(){ $scope.nowdate.now = new Date(); }; setInterval(function(){ $scope.$apply(updateClock); },1000); updateClock(); }).controller('LogController', ['$scope', '$log', function($scope, $log) { $scope.$log = $log; $scope.message = 'Hello World!'; }]); |
快速入门教程
推荐W3cscholl.cc的AngularJS在线教程,以及angularjs.cn[AngularJS中文网]这两个网址,都有很不错的教程.
AngularJS有一些让人眼前一亮的特性,正因为这个,才能坚持学习!加油!!