AngularJS的基本使用

時間 2019-11-09

原文原文鏈接

理解下面的圖，可讓咱們更好的理解ngjavascript

1.基本使用html

 1 /*
 2     ng-app: ng邊界，告訴ng要去管理下面的東西
 3     ng-init: 給我模型賦初始值
 4     ng-model: 雙向數據綁定指令，將當前元素的value屬性和name創建綁定
 5     {{user.name}}: innerHTML屬性和模型屬性綁定
 6     ng-controller: 指定一個控制器
 7     $scope: 上下文模型，view和controller的橋樑，用於它們之間傳遞數據，利用$scope暴露數據模型
 8 */
 9 <body ng-app「myApp」 ng-controller="myAppController">
10     <p>
11         <input type="text" placeholder="請輸入你的姓名：" ng-model="user.name">
12     </p>
13     <p>你的名字是：{{user.name}}</p>
14 
15 
16 <script src="../bower_components/angular/angular.js"></script>
17 <script type="text/javascript">
18 
19     /**
20     * 註冊Angular模塊
21     * 第一個參數：模塊名稱
22     * 第二個參數：模塊對象，沒有就傳空
23     */
24     var app = angular.module('myApp', []);
25     //建立控制器,這個控制器屬於myApp
26     //控制器函數，$scope： 模型對象
27     app.controller('myAppController', function($scope){
28         $scope.user = {};
29         $scope.user.name = "張三";
30         $scope.show = function(){
31 
32 
33         }
34     });
35 
36     //因爲壓縮代碼會改變參數名稱，因此標準方式是傳遞數組
37     app.controller('myAppController', ['$scope', function($scope){
38         $scope.user = {};
39         $scope.user.name = "張三";
40         $scope.show = function(){
41 
42 
43         }
44     }]);
45 </script>
46 </body>

2.控制器的職責java

 1 <html lang="en" ng-app="myApp">
 2 <head>
 3     <meta charset="UTF-8">
 4     <title>Title</title>
 5 
 6 </head>
 7 <body>
 8   <table border="1" ng-controller="demoController">
 9       <tr>
10           <td>用戶名：</td>
11           <td><input type="text" ng-model="user.name"></td>
12       </tr>
13       <tr>
14           <td>密碼：</td>
15           <td><input type="password" ng-model="user.password"></td>
16       </tr>
17       <tr>
18             <td></td>
19           <td><input type="button" value="登&nbsp錄" ng-click="login()"></td>
20       </tr>
21   </table>
22 <script src="../bower_components/angular/angular.js"></script>
23 <script>
24     //建立一個模塊
25     var app = angular.module('myApp', []);
26     app.controller('demoController', ['$scope', function($scope){
27         //初始化對象
28         $scope.user = {
29             username: '',
30             password: ''
31         };
32         //定義方法
33         $scope.login = function(){
34             console.log($scope.user);
35         };
36     }])
37 
38 </script>

3.$watch監視對象屬性變化數組

4.ng-cloak 處理頁面出現{{}}的狀況app

1 /*ng-cloak: 在ng執行完畢後自動刪除*/
2   [ng-cloak] {
3         display: none;
4    }
5 <div class="box" ng-app ng-cloak>
6        {{'內容'}}
7    </div>
8 或者
9 <div class="box" ng-app ng-bind=「username"></div>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。