認識AngularJS

時間  2019-11-20
標籤 認識 angularjs 欄目 AngularJS 简体版
原文   原文鏈接

AngularJS------認識AngularJS

 

     以前在C#中也常用MVC開發模式，對其的使用有必定的瞭解，可是如今須要學習AngularJS，這是純前臺的JS代碼，那麼爲何須要學習這個呢，就是想將驗證這裏所有在前臺執行，不須要在後臺代碼裏面出現驗證。項目須要，本身仍是得下功夫看下，不要求所有會，簡單的使用就OK.html

    AngularJS最適於開發客戶端的單頁面應用，不是功能庫，是用來開發動態網頁的框架，專一於擴張HTML的功能，提供動態數據綁定。依賴注入，沒想到這裏也有這個，以前是在IOC中聽到過，本身也研究了下，可是對其理解不是很好，這裏的依賴注入是讓咱們實現關注點分離的方法，意味着你能夠很是自由的申明組件，而後你能夠經過任意其它組件，呼叫一個它的實例，而後受權，你不須要知道載入順序，文件位置等。只須要提供它所須要的東西就OK。前端

AngularJS的四大功能

  • MVC

    將後臺的MVC模式寫入了前端語言中。我總以爲前端語言未來會很叼，從node.js開始我就又一種這樣的感受。可能在好久以後取代後端語言不是沒有可能的。node

  • 模塊化

  就是一系列函數的集合，當應用被啓動時，這些函數就會被執行。主要利用angular.module來定義模塊。也是Angular.js的亮點。angularjs

  • 指令屬性

      我本身的理解就是比html標籤更加具備能力的指令標籤；sql

  • 雙向數據綁定

       傳統的數據綁定是單向綁定，數據只能從model和controller生成須要的html，可是不能返過來使用。只是單方向的。雙向數據綁定:也就是說我在前面填寫，後面直接生成代碼，將填寫的顯示出來。雙向的意思就是若是view修改了屬性值，那麼model機會看到這個改變。相反也是同樣的。編程

View---->Modeljson

1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<html ng-app>
     <head>
         <meta charset= "utf-8" >
         <script src= "http://code.angularjs.org/angular-1.0.1.min.js" ></script>
         <script src= "main.js" ></script>
     </head>
     <body>
     Your name :<input type= "text"  ng-model= "yourname" >
     <hr>
         Hello {{yourname|| "zhanghui" }}!
     </body>
</html>

Model----->Viewc#

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!doctype html>
<html ng-app= "AppModule" >
     <head>
         <meta charset= "utf-8" >
         <script src= "http://code.angularjs.org/angular-1.0.1.min.js" ></script>
         <script src= "main.js" ></script>
     </head>
     <body>
     Your name :<input type= "text"  ng-model= "yourname" >
     <hr/>
         Hello {{yourname|| "zhanghui" }}!
     <hr/>
     <div ng-controller= "MyController" >
         {{person. name }}
         <hr/>
         <h5>{{clock}}</h5>
     </div>
     </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
var myApp=angular.module( "AppModule" ,[]);
myApp.controller( 'MyController' , function ($scope){
     $scope.person={ name : "Ahui" };
     //申明瞭一個函數
     var updateClock= function (){
         $scope.clock=new Date ();       
     };
     //申明一個計時器
     var timer=setInterval( function (){
         $scope.$.apply(updateClock);
     },1000);
     updateClock();
});

AngularJS語法--指令屬性

      什麼是指令屬性呢，‘指令屬性’就是綁定在DOM元素上的函數，它能夠調用方法，定義行爲，綁定controller及$scope對象，操做DOM等。當瀏覽器啓動開始解析HTML時，DOM元素上的指令屬性就會和其它屬性同樣被解析。後端

當一個Angular.JS應用啓動時，Angular.JS編譯器就會遍歷DOM樹(從有ng-app指令屬性開始)，解析HTML尋找這些指令屬性的函數，找到以後就會將其收集，排序，按照優先級順序被執行。(每一個指令屬性都有優先級)，這些就是Angular.js應用動態性和響應能力的基礎。api

在Angular.JS應用中，咱們用指令屬性來將行爲綁定到DOM上，指令屬性的使用，是一個應用可否擁有動態性，響應能力的關鍵。

ng-model:

1
2
3
4
<input ng-model= "name"  name = "Name"  placeholder= "輸入你的名字" />
<div>
     {{ name }}
</div>

image

咱們能夠看到它是動態顯示的。經過F12能夠發如今下面有個class=」ng-binding」,我猜想應該就是將其綁定起來。

image

這樣實現了動態的綁定，ng-model指令屬性被用來將DOM文本輸入框的值，跟controller裏的綁定起來。其實裏面就是在這個值上面綁定了一個scopemodel綁定起來。其實裏面就是在這個值上面綁定了一個watch函數(相似與JS中的監聽事件),$watch()函數在運行在Angular.js的事件循環裏，讓其Angular.js可以對DOM進行相應的更新。還有咱們的表達式 {{表達式}}，也會死使用那個函數給括號內的表達式註冊了一個監聽器。

ng-init：是一個在啓動時運行的函數(在程序進入運行階段以前)，它讓咱們可以在程序運行前設定初始變量的值:

ng-click：給DOM元素註冊一個點擊事件的監聽器此時DOM元素上有點擊事件發生，Angular.js就會執行表達式的內容，並相應地更新View;也能夠利用ng-click來調用controller裏寫好綁定到$scope上的函數。

1
2
3
<h5 ng-controller= "MyController" >
     <button ng-click= "sayHello()" >Say hello</button>
</h5>
1
2
3
4
5
app.controller( "MyController" , function ($scope){
     $scope.sayHello= function (){
         alert( "Hello Word!" );
     }
});

ng-show/ng-hide：根據賦值表達式的值的真假性，來顯示和隱藏它們所屬的那一部分DOM；以編程的方式顯示或隱藏一個元素。

ng-repeat：此指令遍歷一個數據集合的每一個數據元素，加載HTML模版把數據渲染出來，被重複使用的模版元素，就是咱們綁定這個屬性的DOM元素，每個使用模版渲染的DOM元素都有本身的scope。

  • 看下面的例子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
app.controller( "MyController" , function ($scope){
     $scope.sayHello= function (){
         alert( "Hello Word!" );
     }
     //定義了集合，就是一些json格式
     $scope.roommates=[
         { name : 'Ari' },
         { name : 'Q' },
         { name : 'Sean' },
         { name : 'Anand' }       
     ]
     //定義了鍵值對集合
     $scope.people={
         'Ari' : 'orange' ,
         'Q' : 'purple' ,
         'Sean' : 'green'
     }
});
1
2
3
4
5
6
7
<ul>
     <li ng-repeat= "person in roommates" >{{person. name }}</li>              
  </ul>  
  <hr/>
  <ul>
     <li ng-repeat= "(name,color) in people" >{{ name }}喜歡的是{{color}}</li>   
  </ul>

這裏咱們能夠發現其實就是將集合裏面的值遍歷出來，給人的第一感受就是像foreach()，其實裏面應該是同樣的。「person in roommates」roommates就是後端給的集合，這裏在用person一個一個的輸出來。

image

{{}}：雙括號表明數據的顯示，叫作模版表達式，就和咱們c#中前臺的@{}同樣，中間能夠寫C#代碼，這個效果是同樣的。

angular.module:定義其angular模塊，

1
var myModule=angular.module( "MyModule" ,[]);

建立了一個叫myModule模塊，那麼如何去使用它了，咱們看下面的代碼，使用其指令系統就能夠對此模塊進行調用。這裏是後面一切的前提，咱們只有在頁面上標記了ng-app以後，才能寫以後的控制器等一系列操做。

1
<html ng-app= "MyModule" >

ngClass：能夠動態的更新類；

ngBind：能夠實現雙向的數據綁定；

Scopes：這個關鍵字就和咱們後端MVC中的model模型同樣，在Controller和VIew直接傳遞數據，是一個把View(一個dom元素)鏈接到controller上的對象，實際上就是一個js對象。c，v均可以訪問它，它在兩者直接傳遞數據信息。每個Angular應用都會有一個$rootScope，是最頂級的scope，對應於含有ng-app指令屬性的那個dom元素。

ng-controller：Angular中的控制器。在js文件中定義，就能夠直接在html頁面中寫。以下所示：

1
2
3
<div ng-controller= "MyController" >
     {{person. name }}
</div>

ng-controller指令給所在的dom元素建立了一個新的對象，並將這個scope對象，並將這個scope對象包含進外層dom元素的$scope對象裏，

image[3]

1
2
3
4
5
MyModule.controller( 'MyController' , function ($scope){
     $scope.person={
         name : "ahui"
     };
});

只要在有ng-controller=’MyController’屬性的DOM元素的任何子元素裏訪問這個person對象，由於它在 $scope上。

這裏全部的scope都遵循原型繼承，意味着它們都能訪問父scope們，對於任何的屬性和方法，若當前scope上找不到那就回溯，到父類找，一直往上回溯。一直到$rootScope上。

注意：上面的是MyModule是咱們以前在js文件中聲明的，在HTML頁面中也標記了，只有這樣頁面纔會使用指令系統。

image

ng-click：將DOM元素的鼠標點擊事件（mousedown瀏覽器事件）綁定到一個方法上，當瀏覽器在該DOM元素上鼠標觸發點擊事件時，此時綁定的方法就被調用。

1
2
3
4
5
<div ng-controller= "ClickController" >
     <button ng-click= "add(1)"  class= "button" > Add </button>
     <button ng-click= "subtract(1)"  class= "button" >Subtract</button>
     <h4>值爲：{{counter}}</h4>       
</div>
1
2
3
4
5
6
7
8
9
10
//測試onclick事件
myApp.controller( "ClickController" , function ($scope){
     $scope.counter=0;
     $scope. add = function (amount){
         $scope.counter+=amount;
     };
     $scope.subtract= function (amount){
         $scope.counter-=amount;
     };
});

不管是按鈕仍是連接都會被綁定到包含它們DOM元素的controller全部的$scope對象上。

原型繼承：

  這裏的原型繼承實際上就和咱們以前在js中裏面的原型繼承是同樣的道理。

1
2
3
4
5
6
7
8
9
10
//父類
myModule.controller( "ParentController" , function ($scope){
     $scope.person={greeted: false };
});
//子類，聲明瞭一個方法sayHello()。
myModule.controller( "ChildController" , function ($scope){
     $scope.sayHello= function (){
         $scope.person.greeted= true ;    //原型繼承，直接調用了父類的方法
     }
});

前臺的寫法：

1
2
3
4
5
6
7
<div ng-controller= "ParentController" >
     <div ng-controller= "ChildController" >
         <input type= "text"  ng-model= "person.name"  placeholder= "Name" ></input>
         <a ng-click= "sayHello()" >Say Hello</a>
     </div>
     {{person}}
</div>

效果就像下面的同樣：imageimage

咱們能夠發現子類修改了父類中的屬性，這就是原型繼承。

image

原生支持AJAX

   Angular.js原生支持AJAX，這樣就具備了與一個或多個服務器來回發送請求的能力，這種應用須要跟服務器瀏覽，獲取數據和更新數據。經過服務$http來支持AJAX；

全部的Angular.js的核心服務都用$前綴

$http：它接受一個設置對象，其中指定了如何建立HTTP請求，它將返回一個承諾，其中提供倆個方法：success方法和error方法。它經過XMLHttpRequest對象或JSONP與遠程HTTP服務進行交流。

1
2
3
4
5
6
7
8
$http({
     method: 'JSONP' ,
     url: 'http://api.openbeerdatabase.com/v1/beers.json?callback=JSON_CALLBACK'
}).success( function (data,status,headers,config){
    //輸出正確值
}).error( function (data,status,headers,config){
   //輸出錯誤值
});

AngularJS中的表達式

image

表達式都運行在調用它們的scope裏，因此一個表達式可訪問並操做其scope上的一切，由此你可使用表達式遍歷其scope的屬性，調用scope裏的函數，或者對scope中的變量進行數學運算。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程