1 var app = angular.module("app", []); 2 3 function HelloController($scope) { 4 $scope.data = {message : "World"}; 5 6 } 7 8 function CartController($scope) { 9 $scope.items = [ 10 {title : "饼干", quantity : 8, price : 3.95}, 11 {title : "大饼", quantity : 18, price : 13.95}, 12 {title : "面包", quantity : 3, price : 5.95} 13 ]; 14 15 $scope.remove = function (index) { 16 $scope.items.splice(index, 1); 17 } 18 } 19 20 //监视字段变化(只会在用户手动输入时触发) 21 app.controller("FormController", function($scope) { 22 $scope.funding = {startingEstimate : 0}; 23 24 $scope.computeNeeded = function() { 25 $scope.needed = $scope.funding.startingEstimate * 10; 26 } 27 }); 28 29 //监视字段变化(被其他controller绑定后修改或者从后台获取数据更新都会触发) 30 function WatchController($scope) { 31 $scope.funding = {startingEstimate : 0}; 32 33 var computeNeeded = function(){ 34 $scope.funding.needed = $scope.funding.startingEstimate * 10; 35 } 36 37 $scope.$watch("funding.startingEstimate", computeNeeded); 38 39 //提交表单 40 $scope.requestFunding = function() { 41 window.alert("submit"); 42 } 43 //重置表单 44 $scope.reset = function() { 45 $scope.funding.startingEstimate = 0; 46 } 47 } 48 49 //ng-show指令控制元素显隐(display:block|none) 50 function MenuController($scope) { 51 $scope.menuState = {show : false}; 52 53 $scope.toggleMenu = function() { 54 $scope.menuState.show = !$scope.menuState.show; 55 } 56 } 57 58 //ng-class控制元素样式 59 function StyleController($scope) { 60 $scope.isError = false; 61 $scope.isWarning = false; 62 63 $scope.showError = function() { 64 $scope.isError = true; 65 $scope.isWarning = false; 66 } 67 68 $scope.showWarning = function() { 69 $scope.isWarning = true; 70 $scope.isError = false; 71 } 72 } 73 74 function ParentController($scope) { 75 } 76 // 该controller在页面端被ParentController包裹 77 // 所以该controller的$scope会继承ParentController的$scope 78 function ChildController($scope) { 79 } 80 81 //$watch 82 function Watch2Controller($scope) { 83 $scope.count = 0; 84 85 $scope.total = function() { 86 return $scope.count; 87 } 88 89 function output(newValue, oldValue, scope) { 90 console.info(newValue); 91 $scope.text = "新值:"+newValue + "; 旧值:" + oldValue; 92 } 93 94 $scope.$watch($scope.total, output); 95 } 96 97 app.factory("Data", function() { 98 var data = {}; 99 100 data.query = function() { 101 return [1,2,3]; 102 } 103 104 return data; 105 }); 106 107 //定义服务, 通过参数传递 108 function FactoryController($scope, Data) { 109 $scope.items = Data.query(); 110 111 } 112 113 //过滤器, 截取字符 114 app.filter("cutStr", function() { 115 //第一个参数为表达式的值,后边一次是增加的参数 {{item | cutStr:'=':'-'}} 116 //a:item b:'=' c:'-' 117 // item包括后面的参数都可以是angular表达式 118 var cut = function(a,b,c) { 119 console.info(a + ":" +b + ":" + c); 120 return a.length > 6 ? a.slice(0, 6) + "..." : a; 121 } 122 123 return cut; 124 }) 125 126 //利用过滤器对数据进行处理,便于展示 127 function FilterController($scope) { 128 $scope.items = ["123456789", "abcdefghijkl", "你好"]; 129 }
1 <!DOCTYPE html> 2 <html ng-app="app"> 3 <meta charset="utf-8"/> 4 <style> 5 .error { 6 background-color: red; 7 } 8 .warning { 9 background-color: orange; 10 } 11 </style> 12 <script src="js/angular.js"></script> 13 <script src="js/jquery-1.8.0.js"></script> 14 <body> 15 <div ng-controller="HelloController"> 16 <input type="text" ng-model="data.message"/> 17 <h2>Hello ,{{data.message}} !</h2> 18 </div> 19 <hr/> 20 21 <div ng-controller="CartController"> 22 <h1>Your Cart</h1> 23 <div ng-repeat="item in items"> 24 <span>{{item.title}}</span> 25 <input type="text" ng-model="item.quantity"/> 26 <span>{{item.price | currency}}</span> 27 <span>{{item.price * item.quantity | currency}}</span> 28 <span>last:{{$last}}</span> 29 <span>first:{{$first}}</span> 30 <span>middle:{{$middle}}</span> 31 <button ng-click="remove($index)">Remove</button> 32 </div> 33 </div> 34 <hr/> 35 36 <form ng-controller="FormController"> 37 <p>ng-change监控输入</p> 38 Starting : <input ng-change="computeNeeded()" ng-model="funding.startingEstimate"/> 39 Recommendation : {{needed}} 40 </form> 41 <hr/> 42 43 <form ng-controller="WatchController" ng-submit="requestFunding()"> 44 <p>$scope.$watch监控输入</p> 45 Staring : <input ng-model="funding.startingEstimate"/> 46 Recommendation : {{funding.needed}} 47 <button>submit</button> 48 <button ng-click="reset()">Reset</button> 49 </form> 50 <hr/> 51 52 <div ng-controller="MenuController"> 53 <p><button ng-click="toggleMenu()">Toggle Menu</button><span>ng-show指令</span></p> 54 <ul ng-show="menuState.show"> 55 <li ng-click="stun()">Stun</li> 56 <li ng-click="disintegrate()">Disintegrate</li> 57 <li ng-click="erase()">Erase</li> 58 </ul> 59 </div> 60 <hr/> 61 62 <div ng-controller="StyleController"> 63 <p>ng-style ng-class 接受一个表达式,用以设置样式,类名</p> 64 <p>表达式可以是: 1. 空格分隔的字符串, 2. 类名数组, 3.类名到布尔值的映射({error:isError, warning:isWarning})</p> 65 <p ng-class="{error:isError, warning:isWarning}">ng-class</p> 66 <button ng-click="showError()">Error</button> 67 <button ng-click="showWarning()">Warning</button> 68 </div> 69 <hr/> 70 71 <div ng-controller="ParentController"> 72 父controller中message属性:<input ng-model="message"/> 73 <div ng-controller="ChildController"> 74 <p>子controller中message属性: {{message}}</p> 75 </div> 76 77 <p>通过(ng-click="count=3")设置$scope中count属性:{{count}}<button ng-click="count=3">设置count为3</button></p> 78 </div> 79 <hr/> 80 81 <div ng-controller="Watch2Controller"> 82 <p>$watch方法签名 $watch(watchFn, watchAction, deepWatch);</p> 83 <p><b>watchFn: </b>一个Angular字符串表达式或者是一个返回你所希望监控的模型当前值的函数. 这个表达式会被多次执行,要注意性能</p> 84 <p><b>watchAction: </b>这是watchFn发生变化时会被调用的函数或者表达式. 在函数形式中, 它接受watchFn的新值, 旧值以及作用域的引用. 85 其签名就是function(newValue, oldValue, scope).</p> 86 <p><b>deepWatch: </b>可选的, 布尔型, 用于告诉Angular检查所监控的对象中每一个属性的变化</p> 87 88 <input ng-model="count"/> 89 <p>{{text}}</p> 90 </div> 91 <hr/> 92 93 <div ng-controller="FactoryController"> 94 <h3>这里有三个函数用于创建通用服务</h3> 95 <table> 96 <thead> 97 <tr> 98 <th>Function</th> 99 <th>定义(Defines)</td> 100 </tr> 101 </thead> 102 <tbody> 103 <tr> 104 <td>provider(name, Object/constructor())</td> 105 <td>一个可配置的服务, 带有复杂的创建逻辑. 如果你传递一个对象, 它应该有一个名为`$get`的函数, 用于返回服务的实例. 否则, Angular会假设你传递了一个构造函数, 当调用它时创建实例.</td> 106 </tr> 107 <tr> 108 <td>factory(name, $get Function())</td> 109 <td>一个不可配置的服务也带有复杂的创建逻辑. 你指定一个函数, 当调用时, 返回服务实例. 你可以认为这和<code>provider(name, { $get: $getFunction()})</code>一样</td> 110 </tr> 111 <tr> 112 <td>service(name, constructor())</td> 113 <td>一个不可配置的服务, 其创建逻辑简单. 就像<code>provider</code>的构造函数选项, Angular调用它来创建服务实例.</td> 114 </tr> 115 </tbody> 116 </table> 117 <p><span ng-repeat="item in items">{{item}} </span></p> 118 </div> 119 <hr/> 120 121 <div ng-controller="FilterController"> 122 <p>过滤器: 格式 { { expression | filterName : parameter1 : … parameterN } } </p> 123 <p>filter函数处理时第一个参数为前面expression的值,后边的参数一次为parameter1..., 其中parameter也可以为表达式</p> 124 <p>截取字符filter: <span ng-repeat="item in items">{{item | cutStr:'|':$index}} </span></p> 125 </div> 126 <script src="js/index.js"></script> 127 </body> 128 </html>