angular初體驗
阿新 • • 發佈：2018-01-20
就是 else strong 參數名稱 element 密碼 依賴 length 入口
所有需要ng管理的代碼必須被包裹在一個有ng-app指令的元素中
ng-app是ng的入口，表示當前元素的所有指令都會被angular管理（對每一個指令進行分析和操作）
利用angular實現雙向綁定：
1 <div ng-app ng-init="user.name=‘world‘"> 2 <h1>使用NG實現雙邊數據綁定</h1> 3 <input type="text" 4 placeholder="請輸入你的姓名" 5 ng-model="user.name"> 6 <p>hello <strong>{{user.name}}</strong></p> 7 </div>
模塊：
1 <body> 2 <div ng-app="myApp" ng-controller="DemoController"> 3 <h1>使用NG實現雙邊數據綁定</h1> 4 <input type="text" placeholder="請輸入你的姓名" ng-model="user.name"> 5 <p>hello <strong>{{user.name}}</strong></p> 6 <input type="button" ng-click="show()"> 7 </div> 8 <script src="bower_components/angular/angular.js"></script> 9 <script> 10 // 註冊模塊 通過module函數， 11 // 第一個參數是這個模塊的名字 12 // !!! 第二個參數是這個模塊所依賴的模塊, 如果不依賴任何模塊也必須傳遞第二個參數，如果沒有傳遞第二個參數，angular.module就不是創建一個模塊13 // angular.module 返回 剛剛創建的模塊對象 14 var app= angular.module(‘myApp‘,[]); 15 // app.controller 方法用於創建一個控制器，所創建的控制器屬於myApp模塊 16 // app.controller(‘DemoCtrl‘); 17 // 控制器函數的參數中有一個$scope 18 // angular.module(‘myApp‘).controller(‘DemoController‘, function($scope) { 19 // // 當控制器執行時會自動執行的函數 20 // $scope.user = {}; 21 // $scope.user.name = ‘張三‘; 22 // // $scope不僅僅可以往視圖中暴露數據，還可以暴露行為 23 // $scope.show = function() { 24 // console.log($scope.user); 25 // }; 26 // }); 27 </script> 28 </body>
3，angular控制器：
<body ng-app="myModule" ng-controller="HelloController"> <script src="bower_components/angular/angular.js"></script> <script> // 由於控制器是必須出現在某個模塊下的，想創建一個控制器必須先創建模塊 var module = angular.module(‘myModule‘, []); // 返回的就是模塊對象 // angular在執行控制器函數時， // 會根據參數的名字（$scope）去自動的註入對象 // 根據參數名稱傳遞對應對象，所以必須要寫正確的參數名稱 // module.controller(‘HelloController‘, function($scope) { // console.log($scope); // }); // // 由於壓縮代碼會改變參數名稱，註冊控制的標準方式就是通過第二個參數傳遞數組的方式（數組的成員最後一個就是原本的控制器函數，前面的成員都是需要註入的對象名稱） module.controller(‘HelloController‘, [‘$scope‘,‘$http‘, function(a,b) { console.log(a); }]); </script> </body>
控制器2：
1 <body> 2 <table border="1" ng-controller="WorldController"> 3 <tr> 4 <td>用戶名</td> 5 <td> 6 <input type="text" ng-model="user.username"> 7 </td> 8 </tr> 9 <tr> 10 <td>密碼</td> 11 <td> 12 <input type="password" ng-model="user.password"> 13 </td> 14 </tr> 15 <tr> 16 <td></td> 17 <td> 18 <input type="button" ng-click="login()" value="登陸"> 19 </td> 20 </tr> 21 <tr> 22 <td></td> 23 <td>{{message}}</td> 24 </tr> 25 </table> 26 <script src="bower_components/angular/angular.js"></script> 27 <script> 28 // 創建一個模塊 29 var app = angular.module(‘HelloApp‘, []); 30 // 為這個模塊創建一個控制器 31 app.controller(‘WorldController‘, [‘$scope‘, function($scope) { 32 33 // 數據 34 $scope.user = { 35 username: ‘‘, 36 password: ‘‘ 37 }; 38 $scope.demo = ‘‘; 39 40 // 行為數據 41 $scope.login = function() { 42 // 因為數據的變化時雙向的同步，所以界面上的值變化會同步到$scope.user上 43 console.log($scope.user); 44 }; 45 46 47 // 請輸入用戶名 輸入格式不合法 48 $scope.message = ‘請輸入用戶名‘; 49 // $scope.message取決於$scope.user 50 51 // 官方的API中提供了一個$scope.$watch方法， 52 $scope.$watch(‘user.username‘, function(now, old) { 53 // 當user.username發生變化時觸發這個函數 54 // console.log(‘now is ‘ + now); 55 // console.log(‘old is ‘ + old); 56 if (now) { 57 if (now.length < 7) { 58 $scope.message = ‘輸入格式不合法‘; 59 } else { 60 $scope.message = ‘‘; 61 } 62 } else { 63 $scope.message = ‘請輸入用戶名‘; 64 } 65 }); 66 67 // angular 基本不用操作DOM，如果必要，可以使用angular提供的jqlite 68 // 69 // angular.element(‘body‘) 70 }]); 71 </script> 72 </body>
4.angular表達式：
1 <style> 2 /* ng-cloak指令就是在NG執行完畢過後自動移除 */ 3 4 [ng-cloak], 5 .ng-cloak { 6 display: none; 7 } 8 </style> 9 </head> 10 11 <body ng-app class="ng-cloak"> 12 {{ true ? ‘true‘:‘false‘ }} 13 <script src="bower_components/angular/angular.js"></script> 14 </body>
angular初體驗