AngularJS理論基礎

時間 2019-12-01

原文原文鏈接

AngularJS理論基礎javascript

AngularJs是一個用於設計動態web應用的結構框架。html

它是一個框架，不是類庫，是像EXT同樣提供一整套方案用於設計web應用。它不只僅是一個javascript框架，由於它的核心實際上是對HTML標籤的加強。使你可以用標籤完成一部分頁面邏輯，具體方式就是經過自定義標籤、自定義屬性等，這些HTML原生沒有的標籤/屬性在ng中有一個名字：指令（directive）。web應用能爲用戶提供豐富的操做，可以隨用戶操做不斷更新視圖而不進行url跳轉。ng官方也聲明它更適用於開發CRUD應用，即數據操做比較多的應用，而非是遊戲或圖像處理類應用。爲了實現這些，它引入了一些很是棒的特性，包括模板機制、數據綁定、模塊、指令、依賴注入、路由。經過數據與模板的綁定，可以讓咱們擺脫繁瑣的DOM操做，而將注意力集中在業務邏輯上。前端

AngularJS的四大核心特性：java

1.MVC：Model（數據模型層）-Controller（業務邏輯和控制邏輯）-View（視圖層負責展現）程序員

爲何須要MVC：職責清晰，代碼模塊化，有利於代碼的複用，有利於後期維護（修改一塊功能不影響其餘模塊）。web

前端MVC的困難：操做DOM的代碼必須等待整個頁面所有加載完成才能夠執行；多個JS文件之間若是出現互相依賴，程序員必須本身解決；JS的原型繼承也給前端編程帶來不少困難。編程

AngularJS中的controller：json

controller使用過程當中的注意點：前端框架

1：不要試圖去複用controller，一個控制器通常只負責一小塊的視圖；app

2：不要在controller中操做DOM，這不是控制器的職責所在；

3：不要在controller裏面作數據格式化，ng有很好用的表單控件；

4:不要在controller裏面作數據過濾操做，ng有$filter服務；

5：通常來講，controller是不會互相調用，控制器之間的交互經過事件進行。

AngularJS中的Module：

2.模塊化

<!doctype html>
<html ng-app>
<head>
<mate charset="utf-8">
</head>
<body>
<div ng-controller="HelloAngularJs">//控制器controller
<p>{{greeting.text}},Angular</p>//P標籤：視圖view ；{{}}：數據模型module   
</div>  
</body>
<script src="js/angular-1.3.0.js"></script>  
<script>
//非模塊化
    function HelloAngular($scope){
        $scope.grerting={
            text:'hello'
        };    
    }
//模塊化
var myMoudel=angular.module("HelloAngular",[]);
myMoudel.controller("hellorAngular",['$scope',//依賴注入
  function HelloAngular($scope){
        $scope.grerting={
            text:'hello'
        };    
    }    
])
</script>      
</html>

AngularJS依賴注入：和主動獲取相反，是對數據的被動接收

　　關於$scope

　　1.$scope是POJO（Plain Old Javascript Object）；
　　2.$scope是有層次關係的；

　　3.$scope是表達式的執行環境（做用域）；

　　4.$scope是樹形結構，與DOM標籤平行；

　　5.$scope對象會繼承父$scope的屬性和方法；

　　6.每個Angular應用只有一個根$scope對象（通常位於ng-app上）；

　　7.$scope能夠傳播事件，相似於DOM事件，能夠向上也能夠向下；

　　8.$scope不只是MVC的基礎，也是後面是想雙向數據綁定的基礎；

　　9.在主模塊加載時就有一個默認的$scope，稱爲$rootscope（根scope），是全部scope的父做用空間，

　　　　在沒有其餘指定的scope時都是默認的rootscope，有指定的scope時，運行它自己；

　　10.$scope提供了一些工具方法$watch()、$apply()；

　　11.其餘指定的scope時，各自也是在指定的做用空間內起做用。

3.指令系統（特有）

<!doctype html>
<html ng-app="MyModule">//ng-app在一個單頁應用中只能出現一個
<head>
<mate charset="utf-8">
</head>
<body>
<hello></hello>  
</body>
<script src="js/angular-1.3.0.js"></script>  
<script>
var myMoudel=angular.module("myModule",[]);
myMoudel.directive("hello",function(){//hello是directive的名稱
       return{
　　　　　　restrict:'E',
　　　　　　template:'<div>Hi everyone!</div>'
　　　　　　replace:true
　　　　　　
        };    
    });  
  
</script>      
</html>   //利用Directive實現View的複用

指令(directive)
模板中可使用的東西包括如下四種：

1.指令(directive)：ng提供的或者自定義的標籤和屬性，用來加強HTML表現力；

2.標記(markup)：即雙大括號{{}}，可將數據單向綁定到HTML中；

3.過濾器(filter)：用來格式化輸出數據；

4.表單控制：用來加強表單的驗證功能。

5.樣式相關的指令：

ng-class

<div ng-class=」{redtext:{{red}}, boldtext:{{bold}}, striketext:{{strike}}}」 ></div>

ng-style

<div ng-style="{color:'red'}">ng-style測試</div>

6.對於經常使用的表單控件功能，ng也作了封裝，方便靈活控制。

　　<1>.ng-checked控制radio和checkbox的選中狀態

　　<2>.ng-selected控制下拉框的選中狀態

　　<3>.ng-disabled控制失效狀態

　　<4>.ng-multiple控制多選

　　<5>.ng-readonly控制只讀狀態

7.事件綁定相關指令

　<1>.ng-click

　<2>.ng-change

　<3>.-dblclick

　<4>.-mousedown

　<5>.-mouseenter

　<6>.-mouseleave

　<7>.-mousemove

　<8>.-mouseover

　<9>.-mouseup

　<10>.ng-submit

4.雙向數據綁定（特有）

<!doctype html>
<html ng-app>
<head>
<mate charset="utf-8">
</head>
<body>
<input ng-module="greeting.text"/>
<p>{{greeting.text}},AngularJS</p>
</body>
<script src="js/angular-1.3.0.js"></script>      
</html>   //複用module

表達式
1.能夠作比較；

2.同時邏輯運算均可以使用；

3.加減乘除等等。

過濾器
currency(貨幣)、date(日期)、filter(子串匹配)、json(格式化json對象)、limitTo(限制個數)、lowercase(小寫)、uppercase(大寫)、number(數字)、orderBy(排序)

Angularjs與jQuery之間的區別:
Ng:它是一種基於MVVM理念的前端框架，模型與視圖相互綁定的方法，利用$scope把模型內的東西顯示在視圖上，完成相應的雙向綁定，不須要對DOM進行任何操做。依賴注入是Ng中的重要理念：想要的東西不須要本身去建立，只須要申明後接收注入。
jQ:它是對js的一種封裝，本質上仍是js的方法，仍是對DOM進行了大量的操做。

$watch:
$scope的監聽列表，是一個隊列。只有和視圖綁定的纔會添加到監聽列表，監聽列表不斷檢測數據的改變，但他會不斷的立刻響應檢測和改變，因此引出$digest。

$digest:
專門循環監聽列表$watch。若是$watch的某一個元素的數據不同，就對該元素數據的改變進行暫時保存，再用回調函數循環檢測下一個改變，直到隊列中全部的改變中止後再發送。可是在$digest中不能過多的引發改變。

$digest循環的啓動條件：$scope的數據的改變必須在Anglurjs的上下文範圍。如何保持在Anglurjs的上下文範圍，就有了$apply。

$apply:Anglurjs的上下文中的一個對象，能夠把不在Anglurjs上下文範圍的元素放在$apply中，給他造成一個Anglurjs上下文。