Angularjs的四大特性

四大特性

  • 使用MVC設(shè)計(jì)模式
  • 雙向數(shù)據(jù)綁定
  • 依賴注入
  • 采用模塊化設(shè)計(jì)
一、控制器的作用域
  • 每次調(diào)用ng-controller都會(huì)創(chuàng)建一個(gè)新的Controller對(duì)象
  • 每個(gè)Controller對(duì)象都有唯一的$scope對(duì)象，表示當(dāng)前控制器對(duì)象的有效范圍/作用域
  • 聲明在某個(gè)$scope中的模型數(shù)據(jù)，一般情況下不能被其他的控制器所使用
  • 若想在多個(gè)控制器間共享數(shù)據(jù)、傳遞數(shù)據(jù)，可以聲明在根作用域--$rootScope--每個(gè)Angular應(yīng)用只有一個(gè)唯一的$rootScape對(duì)象
  • 控制器的本質(zhì)用途：用于劃分一個(gè)大型頁(yè)面中的不同的DIV塊- 每個(gè)塊中都有自己專用的數(shù)據(jù)，以及可以跟其他塊共享的數(shù)據(jù)
二、雙向數(shù)據(jù)綁定
  • 方向1 Model綁定到view，此后不論何時(shí)只要Model發(fā)生改變，數(shù)據(jù)會(huì)立即自動(dòng)同步更新
    實(shí)現(xiàn)方法：{{}} ng-bind ng-if ng-Repeat 幾乎所有的顯示數(shù)據(jù)的指令都實(shí)現(xiàn)了方向1的綁定
    實(shí)例：
    1.創(chuàng)建一個(gè)點(diǎn)擊計(jì)數(shù)器，有一個(gè)按鈕，只要點(diǎn)擊一次，立即顯示出點(diǎn)擊次數(shù)
    2.輪播圖的前進(jìn)后退按鈕
<--html代碼--!>
<body ng-app="myModule">
        <div class="container"  ng-controller="myControl">
            <button class="btn btn-danger" ng-click="add()">有種點(diǎn)我啊</button>
            <br />
            點(diǎn)擊次數(shù)：<span>{{count}}</span>
            <h1>輪播圖</h1>
            ![]({{'images/color'+index+'.png'}})
            <button class="btn btn-success" ng-click="pre()">上一張</button>
            <button class="btn btn-warnning" ng-click="next()">下一張</button>
        </div>
    </body>

//js代碼部分
<script type="text/javascript">
        angular.module("myModule",["ng"]).controller("myControl",function  ($scope){
            var count=0;
            $scope.count=count;
            $scope.add=function() {
                $scope.count++;
            }
            var index=1;
            $scope.index=index;
            $scope.pre=function() {
                    $scope.index--;
                    if($scope.index==0){
                        $scope.index=9;
                    }
                }
            $scope.next=function() {
                $scope.index++;
                if($scope.index==10){
                        $scope.index=1;
                    }
            }
        });
    </script>
計(jì)數(shù)器和輪播圖
  • 方向2 view綁定到model，把視圖中可以修改的HTML元素，即表單控件的值綁定到模型變量上。此后，只要用戶修改了表單控件的值后，后臺(tái)模型變量的值會(huì)立即隨之改變
    實(shí)現(xiàn)： 只有ngmodel指令可以，為了監(jiān)視到Model變量真的被改變了可以使用$scope.$watch()函數(shù)對(duì)Model數(shù)據(jù)的值進(jìn)行監(jiān)視,
    實(shí)例：將用戶名和密碼實(shí)時(shí)顯示出來(lái)，復(fù)選框顯示婚否，單選框顯示當(dāng)前選擇的性別，下拉框顯示選擇的城市，簡(jiǎn)易版購(gòu)物車(chē)計(jì)算器計(jì)算實(shí)時(shí)總價(jià)
<body ng-app="myModule" >
            <div class="container" ng-controller="myControl">
                <h1>單行文本輸入框</h1>
                名字：<input type="text" ng-model="name"/>
                <span>{{name}}</span><br />
                密碼：<input type="password" ng-model="password"/>
                <span>{{password}}</span>
                <br />
                <h2>復(fù)選框</h2><br />
                婚否：<input type="checkbox"  ng-model="marry"/><span>{{marry}}</span><br />
                <h2>單選框</h2><br />
                <input type="radio" value="男" ng-model="sex"/>男
                <input type="radio" value="女" ng-model="sex"/>女
                <span>{{sex}}</span><br />
                
                <h2>下拉框</h2>
                <select name="" ng-model="city">
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="深圳">深圳</option>
                    <option value="廣州">廣州</option>
                </select>
                <span>{{city}}</span>
                <br />
                
                <h2>簡(jiǎn)易版購(gòu)物車(chē)計(jì)算器</h2>
                單價(jià)：<input type="text" ng-model="price" />
                數(shù)量：<input type="text" ng-model="number" />
                總價(jià)：{{price*number}}
            </div>
        </body>

angular.module("myModule",["ng"]).controller("myControl",function  ($scope){
            $scope.$watch("name+password",function() {  //兩個(gè)監(jiān)聽(tīng)對(duì)象之間用+連接即可
                console.log($scope.name);
                console.log($scope.password);
            })
        })
三、依賴注入

被動(dòng)注入方式（Injection）方式
angular.module("myModule",["ng]).controller("myControl",function($scope,$interval));
angular中的ngController指令在實(shí)例化控制器對(duì)象時(shí)，會(huì)根據(jù)指令的形參名，創(chuàng)建出控制器所依賴的對(duì)象，并注入進(jìn)來(lái)---依賴注入（Dependency Injection）
注意：

  • angular在創(chuàng)建控制器對(duì)象時(shí)，會(huì)根據(jù)形參列表中的每個(gè)形參依賴的對(duì)象的名稱來(lái)創(chuàng)建，故控制器聲明函數(shù)不能聲明angular無(wú)法識(shí)別的形參名 angular只提供了一種依賴注入方式-根據(jù)形參名來(lái)注入依賴的對(duì)象
  • 若項(xiàng)目js文件使用了類似yuicompressor等壓縮程序，默認(rèn)會(huì)把函數(shù)的形參名精簡(jiǎn)為一個(gè)字母的形式，會(huì)導(dǎo)致Angular的依賴注入失敗
    解決辦法
 module.controller("控制器名"，[
                 
                  "$scope",
                  "$interval",
                  "$http",
                  function(a,b,c){

                  }
              ]);
  • 可以被注入的對(duì)象-所有的service對(duì)象都可以被注入
    • $rootScope 在多個(gè)控制器間共享數(shù)據(jù)的服務(wù)
    • $interval 提供周期性定時(shí)器服務(wù)
    • $timeout 提供一次性定時(shí)器服務(wù)
    • $log 體用五個(gè)基本的日志輸出服務(wù)
    • $http 提供異步HTPP請(qǐng)求（AJAX）的服務(wù) 
      $http{method:"GET",url:""}.then(fun).catch(fun)

   $http.get("url").then(fn);

   $http.post("url",data).then(fn);

  - $location
實(shí)例：使用定時(shí)器interval實(shí)現(xiàn)秒鐘

<body ng-app="myModule">
<div class="container" ng-controller="myControl">
<p>{{num}}</p>
</div>
</body>

<script>
angular.module("myModule",["ng"]).controller("myControl",function($interval){
$scope.num=0;
$interval(function(){
$scope.num++;
},1000);
</script>

#####ng模塊中提供的過(guò)濾器

  1. filter:把model中的數(shù)據(jù)在顯示時(shí)以某種特定的格式來(lái)呈現(xiàn)

    1. lowercase

      語(yǔ)法：{{表達(dá)式 | lowercase}

    2. uppercase

      語(yǔ)法：{{表達(dá)式 | uppercase}

    3. number

      語(yǔ)法：{{表達(dá)式 | number}}
      {{表達(dá)式 | number:小數(shù)位數(shù)}}

    4. currency

      {{表達(dá)式 | currency}}
      {{表達(dá)式 | currency:'貨幣符號(hào)'}}

    5. date

      {{表達(dá)式 | date }}
      {{表達(dá)式 | date | "yyyy-MM-dd"}}

#####四、單頁(yè)應(yīng)用
angularjs提供的模塊---ngroute
1）概念：
route：路由，通過(guò)某條線路找到目標(biāo)內(nèi)容
ngroute：模塊的目標(biāo)，就是根據(jù)瀏覽器url中的一個(gè)特殊的地址標(biāo)記，查到到該標(biāo)記所對(duì)應(yīng)的模板頁(yè)面，并異步加載到ng-view上
2）使用步驟：

 1) 創(chuàng)建唯一完整的HTML頁(yè)面，其中聲明一個(gè)容器，ngview指令。引入angular.js angular-routejs

     <div ng-view></div>

 2）創(chuàng)建多個(gè)模板頁(yè)面(習(xí)慣上放在一個(gè)特別的目錄下，如tpl)

 3) 創(chuàng)建Module,聲明依賴于ng/ng-route兩個(gè)模板

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

 4）在Module中配置路由字典

     app.config(function($routeProvider){

      $routeProvider.when("/start",{


         templateUrl:xxx,
         controller:""     //此處聲明的控制器可供當(dāng)前目標(biāo)頁(yè)面所有元素使用   

       })

    })

 5）使用瀏覽器做測(cè)試

     http:IP地址/index.html#/路由地址

實(shí)例

<body ng-app="myModule">
<ul>
<li><a href="#/page1">page1</a></li>
<li><a href="#/page2">page2</a></li>
</ul>
<div ng-view>
</div>
</body>
<script src="js/angular.js" type="text/javascript" charset="utf-8"></script>
<script src="js/angular-route.js" type="text/javascript" charset="utf-8"></script>
<script src="js/singlePage.js" type="text/javascript" charset="UTF-8"></script>

//singlePage.js文件內(nèi)容
var module = angular.module("myModule",["ng","ngRoute"]);
module.config(function ($routeProvider){
$routeProvider.when("/page1",{
templateUrl:"temp/page1.html"
}).when("/page2",{
templateUrl:"temp/page2.html"
})
})

ngroute中的頁(yè)面跳轉(zhuǎn)有兩種方式：
- 通過(guò)超鏈接訪問(wèn)href="#/main"
- 通過(guò)js跳轉(zhuǎn)$location.path("/main")
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容