angularjs

  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>