Angular筆記1

時間 2019-12-05

原文原文鏈接

引入一個 anjular.js 文件javascript

1.經過 ng-app 指令啓動AnjularJS ,指定HTML中，哪一部分歸AnjularJS控制。這條語句置於<html>標籤表明AnjularJS可以控制整個HTML應用。也能夠放在<body>或其餘元素上，該元素的全部子節點都處於AnjularJS的控制下，其他部分則不會。html

2.<input> 調用ng-model="name". ng-model 指令能夠用於輸入控件中，獲取<input>輸入框的值，並存儲傳入給一個叫name的變量。java

3.另外一個指令叫ng-bind。該指令與花括號表達式是能夠互換，｛｛name｝｝來替換 <span ng-bind="name"></span>。這兩種寫法將name變量的值放於標籤內，當name值發生變化，其綁定的組件<span>的值也會更新。jquery

<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/angular.min.js"></script>
    </head>
    <body>
        <input type="text" ng-model="name" placeholder="enter your name" />
        <h1>hello <span ng-bind="name"></span></h1>
        <!--<h1>hello <span>{{ name}}</span></h1>-->
        <h2>hellow{{1+2}}</h2>
    </body>
</html>

二. AnjularJS模塊數組

AnjularJS將相關代碼封裝起來，經過某種命名方式進行調用，可理解爲java中的package服務器

一個AnjularJS模塊包含兩部分：app

1.模塊能夠本身定義控制器，指令......這些代碼和函數在整個模塊中均可以訪問到。函數

2.模塊能夠依賴其餘模塊this

3.經過將模塊名稱傳給ng-app指令來告訴AnjularJS應用入口在哪裏spa

定義一個不依賴其餘模塊的方式,該模塊名稱爲notesApp:

anjular.module('notesApp',[]); 第一個參數表明模塊名稱，第二個參數是數組，表明該模塊所依賴的名稱列表，（空數組表明所建立的模塊不依賴任何其餘模塊）

<!DOCTYPE html>
<html ng-app="notesApp">
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="js/angular.min.js"></script>
       <script>
           angular.module('notesApp',[]);
       </script>
   </head>
   <body>
       hello {{1+1}}nd time Angularjs
   </body>
</html>

hello 2nd time Angularjs

注： angular.module('notesApp',[]);可放在下面，但放在document.ready（functions（））中很差用

三.如何定義控制器

3.1以上模塊爲空的，沒有功能

控制器包攬了Anjularjs中得雜活，經過javascript函數來執行或觸發與UI相關的任務。

AnjularJS控制器的主要職責有

1.從服務器獲取所需數據，以生成頁面UI.

2.決定哪些數據會被呈現給用戶

3.一些與頁面相關的邏輯

4.用戶交互，好比響應用戶單擊事件以及驗證文本輸入框中的值

AnjularJs控制器一般和某個HTML視圖直接關聯。

3.2 controller函數定義了一個控制器，他對於AnjularJS中的某個模塊是可見的，

controller的第一個參數爲控制器的名稱（MainCtrl）.

第二個參數是一個數組，數組以字符串格式包含了控制器所依賴的模塊名稱

數組的最後那個參數爲真正的控制函數。下面的例子中無依賴關係

3.3 ng-controller=」MainCtrl「, 讓AnjularJS經過名稱建立出控制器實例，而後將它關聯到DOM元素中。

本例中指令會加載MainCtrl控制器，任務爲打印console.log()中內容。

<!DOCTYPE html>
<html ng-app="notesApp">
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="js/angular.min.js"></script>
       <script src="js/jquery-3.1.1.min.js"></script>
   </head>

   <body ng-controller="MainCtrl">
       hello {{1+1}} nd time AnjularJs

   <script>
       angular.module('notesApp',[]).controller('MainCtrl', [function(){
           //此處爲與控制器相關的代碼
           console.log("MainCtrl has been created")
       }]);

   </script>
   </body>
</html>

四.將顯示的信息從HTML移到控制器中，而後經過控制器來顯示它

<!DOCTYPE html>
<html ng-app="notesApp">
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="js/angular.min.js"></script>
       <script src="js/jquery-3.1.1.min.js"></script>
   </head>
   <body ng-controller="MainCtrl as ctrl">
       {{ctrl.helloMsg}} AngularJS<br />
       {{ctrl.goodbyMes}} AngularJS
       <script>
           angular.module('notesApp',[]).controller('MainCtrl',[function(){
               this.helloMsg='hello';
               var goodbyMes='Goodby';
           }])
       </script>
   </body>
</html>

五，爲控制器添加函數

<!DOCTYPE html>
<html ng-app="notesApp">
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="js/angular.min.js"></script>
       <script src="js/jquery-3.1.1.min.js"></script>
   </head>
   <body ng-controller="MainCtrl as ctrl">
       {{ctrl.message}}
       <button ng-click="ctrl.changeMessage()">change Message</button>
       <script>
1. angular.module('notesApp',[]).controller("MainCtrl",[function(){
          var self=this;
          self.message='hello';
          self.changeMessage=function(){
              self.message='Goodbye';
          }
       }])
       </script>
   </body>
</html>