一款優秀的前端JS框架—AngularJS

  前  言html

AngularJS 是一個 JavaScript 框架。它可經過 <script> 標籤添加到 HTML 頁面。ajax

AngularJS 經過 指令 擴展了 HTML,且經過 表達式 綁定數據到 HTML。數據庫

AngularJS 是一個 JavaScript 框架。它是一個以 JavaScript 編寫的庫。數組

AngularJS 是以一個 JavaScript 文件形式發佈的,可經過 script 標籤添加到網頁中。安全

 

AngularJS中的指令和表達式

AngularJS 經過 指令 擴展了 HTML,且經過 表達式 綁定數據到 HTML。服務器

【AngularJS表達式】app

一、AngularJS使用{{}}綁定表達式。用於將表達式的內容輸出到頁面中。
二、表達式中能夠是文字、運算符、變量等,也能夠在表達式中進行運算輸出結果。框架

eg: <p>{{5+5+"Angular"}}</p>

若是Angular.js文件放在頁面下方,在頁面刷新的瞬間會看到{{}}表達式的原樣,因此可使用ng-bind指令代替表達式。ide

eg: 上式可改寫爲: <p ng-bind="5+5+'Angular'"></p>

 【AngularJS指令】函數

AngularJS 指令是擴展的 HTML 屬性,帶有前綴 ng-。
一、ng-app:聲明AngularJS所管轄的區域。通常寫在body或者html標籤上,原則上一個頁面只能有一個。

eg: <body ng-app=""></body>

二、ng-model 指令把元素值(好比輸入域的值)綁定到應用程序的變量中。

eg: <input type="text" ng-model="name"/>

三、ng-bind:把應運程序變量中的值,輸出到頁面HTML視圖中,能夠與表達式{{}}互相替換。

eg:<div ng-bind="name"></div>

四、ng-init: 指令初始化AngularJS應用程序中的變量值。

eg: <body ng-app="" ng-init="name='ddd'">

應用程序初始化時,name變量就附有初值。

 

AngularJS中的MVC與做用域

【MVC三層框架】
一、Model(模型層):應用程序中用於處理數據的部分,(包括將數據保存或者修改到數據庫、變量、文件中)
在AngularJS中,Model特指的是:應用程序中的各類數據。

View(視圖層):用戶能夠看到的,用於顯示數據的頁面。

Controller(控制器):控制器是鏈接View和Model的橋樑,負責從View讀取數據,接收用戶的操做輸入;並將數據發送給Model層。Model層對數據處理完畢後,將結果返回給Controller,Controller再將結果返回給View層顯示。

它們三者之間的關係能夠用下列圖片表示:

 

<body ng-app="myApp">
        <input type="text" ng-model="age" placeholder="age" />
        
        <div ng-controller="myCtrl">
            <input type="text" ng-model="name" placeholder="name" />
            <div ng-bind="name+'----myCtrl的name'"></div>
            <div ng-bind="age+'----myCtrl的age'"></div>
        </div>
        
        <div ng-controller="myCtrl1">
            <div ng-bind="name+'----myCtrl1的name'"></div>
            <div ng-bind="age+'----myCtrl1的age'"></div>
            
        </div>
        
        <div ng-bind="name+'----全局的name'"></div>
        <div ng-bind="age+'----全局的age'"></div>
    </body>

 

建立一個angular的模塊。即ng-app="所須要綁定的部分"。
須要接受兩個參數:
1)模塊名稱,即ng-app雙引號中須要綁定的名字。<body ng-app="myApp">
2)數組。表示須要注入模塊名稱,不須要注入其餘模塊可用空數組代替。
>>>angular將經常使用的功能分裝到angular.js,建立主模塊時直接可使用,無需注入。
>>>而一些應用較少的功能,須要導入對用的JS文件,而且在[]中注入進這個模塊,纔可以使用。

var app=angular.module("myApp",[]);

在AngularJS的模塊上,建立一個控制器,須要傳遞兩個參數;
1)控制器名稱,即ng-controller須要綁定的名稱。
<div ng-controller="myCtrl">
2)控制器的構造函數,構造函數能夠傳入多個參數。
>>>若是要在函數中使用系統的內置對象,則必須經過函數的參數使用,不然不能使用。
>>>AngularJS中的內置對象,都用$開頭,例如$scope,$rootScope


【AngularJS的做用域】
1)$scope:局部做用域,聲明在$scope上的屬性和方法。只能在當前controller使用;
2)$rootScope:根做用域。聲明在$rootScope上的屬性和方法,能夠在整個ng-app所包含的範圍使用。
>>>若是沒有使用$scope聲明變量,而是直接使用ng-model在HTML標籤中綁定的數據的做用域爲:
一、若是ng-model寫在某個Controller中,則這個變量會默認綁定到當前Controller的$scope上;
二、若是ng-model沒有寫在任何一個Controller中,則這個變量會默認綁定到當前Controller的$rootScope上:

>>>AngularJS中的父子做用域:
一、AngularJS中,子做用域只能訪問父做用域中的變量,而不能修改父做用域的變量;
二、爲了解決上述問題,能夠將父做用域中的變量聲明爲引用數據類型,例如對象等。這樣能夠在子做用域中,直接修改對象的屬性,而不須要修改對象自己保存的地址。

eg:詳見"myCtrl1"

 

AngularJS中的過濾器

[AngularJS中過濾器]
過濾器可使用一個管道字符(|)添加到表達式和指令中。

>>>系統內置的過濾器
currency          格式化數字爲貨幣格式。
filter                 從數組項中選擇一個子集。
lowercase        格式化字符串爲小寫。
orderBy           根據某個表達式排列數組。
uppercase       格式化字符串爲大寫。

/* 自定義過濾器*/
        .filter("showHello",function(){
            return function(text){
                return "hello AngularJS";
            }
        })

 自定義過濾器,同時須要傳遞過濾參數

 調用過濾器示例: <p>{{12345678912|hideTel:5}}</p>
/*傳入的參數5,將被過濾函數的num形參所接受。*/

自定義過濾器,實現根據姓名篩選數據的功能.
>>>調用示例:

請輸入姓名:<input type="text" ng-model="name" />
<tr ng-repeat="item in classes | filter:filterByname">

 

 

AngularJS中的服務service

一、內置服務:
>>>要使用服務,必需要把服務經過controller的構造函數的參數注入進來!!!
>>>系統內置的服務,統一使用$開頭,服務中的屬性和方法統一使用$$開頭!!!自定義服務時,需注意與系統服務的寫法區分開;
$location:返回當前界面的URL地址信息,第一個對象;
$http:向服務器發送請求,相似於jQuery中的ajax;
$timeout:至關於setTimeout();
$interval:至關於setInterval();

angular.module("app",[])
        .controller("ctrl",function($scope,$location,$timeout,$interval,hexafy){
            $scope.local = $location.$$host;
            $timeout(function(){
                $scope.time = "我在兩秒以後出現!!!";
            },2000);
            
            $scope.num = 0;
            $interval(function(){
                $scope.num ++;
            },1000);
            
            
            $scope.gongneng = hexafy.gongneng;
            $scope.num1 = hexafy.func(10);
        })

自定義服務
第一個參數是服務名
第二個參數是自定義服務的構造函數。咱們自定義的服務,本質是一個對象。
對象的屬性,能夠在構造函數中,使用this.屬性表示;
對象的方法,能夠在構造函數中,使用this.方法表示;

.service("hexafy",function(){
            this.gongneng = "將十進制數轉化爲十六進制";
            this.func = function(num){
                return num.toString(16);    
            }
        })

使用過濾器實現一樣功能

.filter("filter1",function(){
            return function(num){
                return num.toString(16);
            }
        })

在過濾器中調用服務
也必須在聲明過濾器的外層構造函數中,注入服務名稱!!!

.filter("filter2",function(hexafy,$location){
            return function(num){
                return hexafy.func(num);
            }
        })

 

AngularJS中的服務Factory

factory服務在使用上與service服務沒有太大差距。
惟一的不一樣點是,聲明服務時,factory服務是在函數中先聲明好一個對象,而後使用return將對象返回。
而service服務,則是直接在函數中使用this將屬性和方法添加到對象上。

angular.module("app",[])
        .controller("ctrl",function($scope,hexafy){
            $scope.gongneng = hexafy.gongneng;
            $scope.num1 = hexafy.func(10);
        })
        .factory("hexafy",function(){
            var obj={
                gongneng : "將十進制數轉化爲十六進制";
                func = function(num){
                return num.toString(16);    
            }
            }
            return obj;
        })
        .service("hexafy",function(){
            this.shuxing="shuxing";
            this.func=function(){}
        })

 

AngularJS中的服務provider

一、在AngularJS中,service服務、factory服務都是基於provider服務實現的;
二、在定義provider時,可使用this.$get方法,接收一個函數,函數裏面採用與factory
徹底相同的寫法!!!

.provider("hexafy",function(){
            this.$get=function(){
                var obj={
                    gongneng:"333";
                }
                return obj;
            }
        })

三、在三種服務中,provider服務是惟一一個能夠寫進config配置階段的服務。
因此說,若是服務須要在配置階段,也就是在聲明controller以前執行的話,則可使用provider.
不然通常使用service或者factory。

angular.module("app",[])

.config()表示配置階段,在聲明controller以前執行。能夠用於聲明一些在controller中須要
使用的全局變量、方法、服務等

.config(function($provider){
            //在配置階段聲明provider服務,須要在config中注入系統對象$provider
            $provide.provider("hexafy",function(){
                this.$get=function(){
                var obj={
                    gongneng:"444";
                }
                return obj;
            });
        })
        .controller("ctrl",function($scope,hexafy){
            $scope.gongneng=hexafy.gongneng;
            
        })

 

AngularJS中的select和表格

使用數組做爲數據源
一、item表示數組中的每一項!
二、循環出的option中,value的值,默認爲item
三、option顯示出的內容(<option></option>標籤中的文字)是由item.site for決定的!

<select ng-model="site" ng-options="item.site for item in sites"></select>

這種寫法,默認生成的option效果以下:

<option value='{site : "Google", url : "http://www.google.com"}'>Google</option>

以對象做爲數據源
一、 (key,value) 第一項表示對象的鍵,第二項表示對象的值;
二、 option的value,永遠都是對象的值!
三、 option顯示出的內容(<option></option>標籤中的文字)是由...for 決定的!也就是說 for前面是什麼,option標籤中就是什麼。

<select ng-model="site3" ng-options="key for (key,value) in sitess">
<!--
<option value=" value "> key/value(取決於for前面的內容) </option>
-->

【ng-options 和 ng-repeat】

g-options使用時,是將指令添加在select上;
ng-repeat使用時,試講指令添加在option上;

二、 ng-options使用時,必須同步給select標籤綁定ng-model;
ng-repeat使用時,不必定須要綁定ng-model

三、 ng-options使用時,咱們只須要關心for前面的部分,即option標籤中顯示的文字;而option的value會自動分配,不禁咱們決定。 (使用數組做爲數據源是,value就是數組的每一項;使用對象做爲數據源是,value永遠都是對象的值)
ng-repeat使用,除了要指定option標籤中顯示的文字,還須要手動指定value中的內容,若是沒有指定則默認沒有value;

 

AngularJS中的DOM與事件

ng-disabled="true/false";
傳入true表示禁用,傳入false表示可用。

<button ng-disabled="!myCheck">按鈕</button>
        <lable>
            <input type="checkbox" ng-model="myCheck" />是否贊成
        </lable>
<p>{{myCheck}}</p>

ng-show:是否顯示
傳入true表示顯示,傳入false表示隱藏。

<lable>
            <input type="checkbox" ng-model="myShow" />是否顯示
        </lable>
        <p ng-show="myShow">我顯示出來了</p>

ng-hide:是否隱藏

<lable>
            <input type="checkbox" ng-model="myHide" />是否隱藏
        </lable>
        <p ng-hide="myHide">我顯示出來了</p>

ng-if:是否移除元素。
當傳入true顯示。傳入false時移除。
效果與ng-show相同,可是ng-show和ng-hide只是隱藏元素,而ng-if是將元素從DOM中直接移除!!

<label>
            <input type="checkbox" ng-model="myIf" />是否移除?
        </label>
        <p ng-if="!myIf">我顯示出來啦!!!</p>

ng-bind-html : 至關於innerHTML
而ng-bind 至關於 innerText

注意,要使用ng-bind-html,必須導入angular-sanitize.js文件進行安全驗證。同時須要在聲明模塊的時候,在數組中注入安全驗證模塊'ngSanitize'

<div ng-bind-html="html"></div>

ng-checked 設置複選框或單選框的選中狀態。
傳入true設置當前複選框被選中。

<input type="checkbox" ng-model="all"> Check all<br><br>
<input type="checkbox" ng-checked="all">Volvo<br>
<input type="checkbox" ng-checked="all">Ford<br>
<input type="checkbox" ng-checked="all">Mercedes

ng-class: 用於設置給元素添加class類。
可選值有如下幾種狀況:
① 能夠是字符串。表示直接給元素添加對應的class。 多個class之間,用空格分隔
② 能夠是對象。 對象的鍵表示class名字,對象的值爲true或false,當值爲true時表示添加對應的class
③ 能夠是數組。數組中的值能夠是字符串或對象,判斷規則同上。

<div ng-class="'div div2'">這是一個div</div>
        <label>
            <input type="checkbox" ng-model="myClass" />給div添加樣式?
        </label>
        <div ng-class="{'div':myClass,'div1':!myClass}">這是一個div</div>
        <div ng-class="[{'div':myClass,'div1':!myClass},'div3']">這是一個div</div>

ng-switch 根據變量的值,選擇不一樣的ng-switch-when來顯示。當沒有合適的選項時,顯示ng-switch-default.

我喜歡的網站
        <select ng-model="myVar">
          <option value="aaaa">切回默認狀態!
          <option value="runoob">www.runoob.com
          <option value="google">www.google.com
          <option value="taobao">www.taobao.com
        </select>
        <hr>
        <div ng-switch="myVar">
          <div ng-switch-when="runoob">
             <h1>菜鳥教程</h1>
             <p>歡迎訪問菜鳥教程</p>
          </div>
          <div ng-switch-when="google">
             <h1>Google</h1>
             <p>歡迎訪問Google</p>
          </div>
          <div ng-switch-when="taobao">
             <h1>淘寶</h1>
             <p>歡迎訪問淘寶</p>
          </div>
          <div ng-switch-default>
             <h1>切換</h1>
             <p>選擇不一樣選項顯示對應的值。</p>
          </div>
        </div>

AngularJS 中的事件:
AngularJS中的事件只能觸發綁定在AngularJS做用域上面的屬性和方法。

<button ng-click="func()">點我彈個窗</button>
<button ng-mouseover="">點我彈個窗</button>
<button ng-mouseout="">點我彈個窗</button>
<input type="text" ng-keydown="keyDown()">
<input type="text" ng-foucus=""> <!--得到焦點-->
<input type="text" ng-blur=""><!--丟失焦點-->
<input type="text" ng-change=""><!--內容被改變-->

 

AngularJS中的表單和輸入驗證


一、表單中,經常使用的驗證操做:
$dirty 表單有填寫記錄
$valid 字段內容合法的
$invalid 字段內容是非法的
$pristine 表單沒有填寫記錄
$error 表單驗證不經過的錯誤信息

二、 驗證時,必須給form和inpt,設置name屬性。
給form和input設置了name後,會自動將表單信息綁定到$scope做用域中。 因此,能夠直接使用formName.inputName.$驗證操做 獲得驗證結果。
例如:

formName.inputName.$dirty = "true"; //表示表單被填寫過!
formName.inputName.$invalid = "true"; //表示表單輸入內容不合法!
formName.inputName.$error.required = "true"; //表示設置了必填,可是沒有輸入

注意:
$error支持的驗證:
required/minlength/maxlength/partten/eamil/number/date/url等。。。

三、 爲了不AngularJS的驗證與HTML5的表單驗證衝突!! 好比說 type="email" required等,H5也會進行驗證,那麼能夠給form添加「novalidate」屬性,禁用HTML5的驗證功能

AngularJS中的動畫

在AngularJS中使用動畫:
一、導入angular-animate.js
二、若是頁面中沒有自定義的app模塊,則能夠直接綁定系統模塊ng-app="ngAnimate"
若是頁面中有自定義的app模塊,則能夠在自定義模塊的數組中,注入ngAnimate。
angular.module
三、當使用ng-show、ng-hide顯示或者隱藏元素的時候,系統會自動添加或者移除,ng-hide這個class類。
四、當使用ng-if/ng-switch/ng-repeat等其餘指令,須要分別設置顯示後和隱藏後的兩種class樣式;
顯示後的class: .ng-enter-active,.ng-leave{}
顯示後的class: .ng-enter,.ng-leave-active{}

<input type="checkbox" ng-model="myCheck" />隱藏div
<div class="div" ng-hide="myCheck">這是一個div</div>
        
<input type="checkbox" ng-model="myIf" />移除div
<div class="div" ng-if="myIf">這是一個div</div>
相關文章
相關標籤/搜索