准备:
从该地址获取AngularJS所以版本： https://code.angularjs.org/
1.初时AngularJS
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="../angular.min.js"></script> 7 </head> 8 <body> 9 <input type="text" ng-model="text"> 10 <h2>{{text}}</h2> 11 </body> 12 </html>
2.MVC-模块化
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <!-- 添加了ng-app标签以内的所有内容都属于应用的一部分, --> 8 <body> 9 <!-- 一个页面上可以有多个ng-app,但是不能嵌套使用 --> 10 <div class="box" ng-app="App"> 11 <!-- 为视图指定控制器ng-controller --> 12 <ul ng-controller="DemoController"> 13 <li ng-repeat="list in lists">{{list}}</li> 14 </ul> 15 </div> 16 17 <!-- 引入框架: --> 18 <script src="../angular.min.js"></script> 19 <script> 20 // 引入angular后会提供一个全局对象:angular;在这个对象下有一个对应的方法[ module('模块名', 数组) ]可以创建一个模块 21 var App=angular.module('App',[]); 22 // 模块的返回值也是对象,通过此对象方法[ controller('控制器名臣',数组固定格式['$scope',function($scope){}]) ]可以创建控制器 23 App.controller('DemoController',function($scope){ 24 //定义好了控制器 25 // $scope就是 Model(数据模型),view是HTML 26 // $scope是一个空对象 27 28 // 在对象中添加一个lists属性,属性值为一个数组 29 $scope.lists=['html','css','js','php']; 30 }); 31 </script> 32 </body> 33 </html>
3.模块化
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="../angular.min.js"></script> 7 </head> 8 <body ng-app="Demo"> 9 <!-- angulerJS是以模块进行管理的 --> 10 <table> 11 <thead> 12 <tr> 13 <td>姓名</td> 14 <td>性别</td> 15 <td>年龄</td> 16 </tr> 17 </thead> 18 <tbody ng-controller="StarsController"> 19 <tr ng-repeat="star in stars"> 20 <td>{{star.name}}</td> 21 <td>{{star.sex}}</td> 22 <td>{{star.age}}</td> 23 </tr> 24 </tbody> 25 </table> 26 <script> 27 var Demo=angular.module('Demo',[]); 28 Demo.controller('StarsController',function($scope){ 29 $scope.stars=[ 30 {name:'小明',sex:'男',age:'12'}, 31 {name:'小军',sex:'男',age:'12'}, 32 {name:'小李',sex:'男',age:'12'} 33 ]; 34 }); 35 </script> 36 </body> 37 </html>
4.内置指令
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="../angular.min.js"></script> 7 <style> 8 .red{ 9 color:red; 10 } 11 .blue{ 12 color:blue; 13 } 14 </style> 15 </head> 16 <body ng-app="Demo"> 17 <div class="box" ng-controller="DemoController" > 18 <button ng-click="toggle()">请点击</button> 19 <h1 ng-show="show">Welcome</h1> 20 <h2 ng-hide="false">Welcome</h2> 21 <h3 ng-if="true">Welcome</h3> 22 <h4 ng-class="{red:true,blue:true}">Welcome</h4> 23 <h5 class="{{className}}">Welcome</h5> 24 <input type="text" ng-disabled="true" value="禁用"> 25 <input type="text" ng-disabled="false"> 26 <br> 27 <input type="text" ng-readonly="true" value="只读"> 28 <input type="text" ng-readonly="false"> 29 <br> 30 <select name="" id=""> 31 <option value="0">aaa</option> 32 <option value="0" ng-selected="true">bbb</option> 33 <option value="0">ccc</option> 34 </select> 35 <br> 36 爱好: <input type="checkbox" ng-checked="true" name="hobby">运动 <input type="checkbox" ng-checked="false" name="hobby">睡觉 37 <br> 38 <a ng-href="{{link}}">百度一下</a> 39 <br> 40 <img ng-src="{{path}}" alt="未找到图片"> 41 <br> 42 <ul> 43 <li ng-repeat="item in items" ng-switch on="item"><span ng-switch-when="css">{{item}}</span></li> 44 </ul> 45 </div> 46 <script> 47 /* 48 常用指令 49 ng-app 定义应用程序的根元素。 50 ng-controller 定义应用的控制器对象 51 ng-show 显示或隐藏 HTML 元素(频繁的显示和隐藏) 52 ng-hide 隐藏或显示 HTML 元素 53 ng-click 定义元素被点击时的行为 54 ng-if 如果条件为 false 移除 HTML 元素(DOM移除) 55 ng-src 指定 <img> 元素的 src 属性 56 ng-href 为 the <a> 元素指定链接 57 ng-class 指定 HTML 元素使用的 CSS 类 58 ng-include 在应用中包含 HTML 文件 59 ng-disabled 规定一个元素是否被禁用(修复原属性缺陷) 60 ng-readonly 指定元素的 readonly 属性(修复原属性缺陷) 61 ng-checked 规定元素是否被选中(修复原属性缺陷) 62 ng-selected 指定元素的 selected 属性 63 64 ng-dblclick 规定双击事件的行为 65 ng-keydown 规定按下按键事件的行为 66 ng-keypress 规定按下按键事件的行为 67 ng-keyup 规定松开按键事件的行为 68 ng-blur 规定 blur 事件的行为(失去焦点) 69 ng-repeat 定义集合中每项数据的模板(实现循环取数据,对象数据迭代) 70 ng-switch 规定显示或隐藏子元素的条件 与 on ng-switch-when组合使用 71 72 */ 73 var Demo=angular.module('Demo',[]); 74 Demo.controller('DemoController',function($scope){ 75 $scope.path="../img.jpg"; 76 $scope.toggle=function(){ 77 $scope.show=!$scope.show; 78 }; 79 $scope.link="http://www.baidu.com"; 80 $scope.className='red'; 81 $scope.items=['html','css','js']; 82 }); 83 </script> 84 </body> 85 </html>
5.自定义指令
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="../angular.min.js"></script> 7 </head> 8 <body ng-app="Demo"> 9 <tag></tag> 10 <p tag></p> 11 <div class="tag"></div> 12 <!-- directive:tag --> <!-- 需要replace为true --> 13 <script> 14 /* 15 自定义指令:有利于方法的扩展,通过模块实例对象的directive方法可以自定义指令('指令名字',函数) 16 */ 17 var Demo=angular.module('Demo',[]); 18 Demo.directive('tag',function(){ 19 //返回与指令相关的内容 20 return { 21 restrict:'EACM',//规定指令的类型:E(element) / A(attribute) / C(class) / M(mark) 22 // 当有字符串定义模板时,必须确保整个字符串有一个根元素(即存在父子关系),否则会报错 23 template:'<h1>hello world!</h1>', 24 //templateUrl:'header.html'//引入外部文件,需要在服务器上使用,与上面的代码不能同时使用 25 replace:true,//模板替换标签 26 }; 27 }); 28 29 </script> 30 </body> 31 </html>
6.数据绑定
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="../angular.min.js"></script> 7 </head> 8 <!-- ng-init :初始化数据 ,写在访问外层--> 9 <body ng-app="Demo" ng-init="sex='男'; hobby='跑步'" > 10 <div ng-controller="DemoController"> 11 <!-- 单向数据绑定 --> 12 <h1 ng-cloak >{{name}}</h1> 13 <h1 ng-bind="age"></h1> 14 <!-- 数据双向绑定 ng-model只能作用于表单元素--> 15 <input type="text" ng-model="demo"><button ng-click="say()">提示</button> 16 <br> 17 <span>{{demo}}</span> 18 <!-- 多个数据绑定 --> 19 <h1 ng-bind-template="{{name}} {{age}}"></h1> 20 <h2>{{sex}}</h2> 21 <h2>{{hobby}}</h2> 22 </div> 23 <script> 24 // angularJS是以数据作为驱动的MVC框架所有模型里的数据经控制器展示到视图中 25 // ng-bind 绑定 HTML 元素到应用程序数据 26 // {{}} 和 ng-bind实现绑定 ,{{}} 是 ng-bind 的简写 27 //使用{{}}会有闪烁显现(刷新时,网页加载原因),解决方案: 添加 ng-cloak (利用修改CSS属性值display)但是不能完全解决 28 var Demo=angular.module('Demo',[]); 29 30 Demo.controller('DemoController',function($scope){ 31 // 单向数据绑定 32 $scope.name='itcast'; 33 $scope.age='10'; 34 //数据双向绑定 35 $scope.say=function(){ 36 alert($scope.demo); 37 alert(typeof $scope.demo); 38 }; 39 }); 40 </script> 41 </body> 42 </html>
7.作用域
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="../angular.min.js"></script> 7 </head> 8 <!-- 根作用域 --> 9 <body ng-app="Demo" ng-init="name='爷爷'"> 10 <h1>{{name}}</h1> 11 <div ng-controller="DemoController"> 12 <h2>{{name}}</h2> 13 <div ng-controller="ChildController"> 14 <h3>{{name}}</h3> 15 </div> 16 </div> 17 <script> 18 var Demo=angular.module('Demo',[]); 19 20 Demo.controller('DemoController',function($scope){ 21 $scope.name='爸爸'; 22 }); 23 Demo.controller('ChildController',function($scope){ 24 $scope.name='儿子'; 25 }); 26 </script> 27 </body> 28 </html>