Angular js特性

一、Angular四大特性之一---MVC

  1. 聲明一個(gè)ng的應(yīng)用程序 ng-App

     <html ng-app></html>

  2. 創(chuàng)建一個(gè)自定義的模塊：angular.module("模塊名",[依賴列表])

      angular.module.("模塊名",["ng"])

  3. 在應(yīng)用中注冊自定義模塊 ng-app="模塊名"

     <html ng-app="myModule"></html>

  4. 在模塊中聲明Controller

       angular.module.("模塊名",["ng"]).controller("myContro",function(){
   });

  5. 在view中指定Controller對象的作用范圍-調(diào)用控制器創(chuàng)建函數(shù)

     <div ng-controller="myContro">
    {{name}}
 </div>

  6. 在Controller中聲明Modal數(shù)據(jù)

      angular.module.("模塊名",["ng"]).controller("myContro",function($scope){

      #$scope.name = "藍(lán)科教育";

   });

注意：

Angular明明命名空間，&和&&為防止和你的代碼的名稱產(chǎn)生沖突 ng公共對象的前綴名使用$ 私有對象名使用$$ 請不要在你的對象中使用這兩個(gè)符號(hào)
舉例：

  <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
      </head>
      <body ng-app="myModule">
        <!--angular module controller model-->
        <div ng-controller="myControl">
          <ul>
            <li ng-repeat="name in personArray">{{name}}</li>
           </ul>
        </div>
    
</body>

<script src="js/angular.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      angular.module("myModule",["ng"]).controller("myControl",function($scope){
      $scope.personArray = ["張三","李四","王五","趙四"];
    </script>

</html>

二、AngularJS四大特性之二-雙向數(shù)據(jù)綁定

1.方向1

  • Model綁定到View，此后不論何時(shí)只要Model發(fā)生改變，立即會(huì)自動(dòng)同步更新
  • 實(shí)現(xiàn)方法 {{}} ng-bind ngif ngRepeat...幾乎所有的顯示數(shù)據(jù)的指令都實(shí)現(xiàn)了方向1的綁定

舉例：

  <!DOCTYPE html>
  <html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body ng-app="myModule">
    <div ng-controller="myControl" class="container">
        <p>{{name}}{{imgsrc}}</p>
        <button ng-click="add()" class="btn btn-danger">點(diǎn)我</button>
        <br />
        <span class="">點(diǎn)擊次數(shù){{count}}</span>
    </div>
    <div ng-controller="myControl2" class="container">
        <h1>輪播圖</h1>
        ![](img/{{imgsrc+'.jpg'}})
        <button ng-click="prev()" class="btn btn-danger">上一張</button>
        <button ng-click="next()" class="btn btn-success">下一張</button>
    </div>
</body>
<script src="js/angular.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var module = angular.module("myModule",["ng"])
    module.controller("myControl",function($scope){
        $scope.name ="gg";
        var count=0;
        $scope.count = count;
        $scope.add=function(){
            $scope.count++;
        }
    })
    module.controller("myControl2",function($scope){
        var imgsrc = 1;
        $scope.imgsrc=imgsrc;
        $scope.prev = function(){
            $scope.imgsrc--;
            if ($scope.imgsrc<1) {
                $scope.imgsrc=2;
            }
        }
        $scope.next = function(){
            $scope.imgsrc++;
            if ($scope.imgsrc>2) {
                $scope.imgsrc=1;
            }
        }
    })
</script>
</html>

2.方向2

  • view綁定到model,把視圖中可以修改的HTML元素，即表單控件的值綁定到模型變量上。此后，只要用戶修改了表單控件的值后，后臺(tái)模型變量的值會(huì)立即隨之改變

  • 實(shí)現(xiàn)： 只有ngmodel指令可以，為了監(jiān)視到Model變量真的被改變了可以使用$scope.$watch()函數(shù)對Model數(shù)據(jù)的值進(jìn)行監(jiān)視,

    $scope.$watch('name',function(newValue,oldValue, scope){

  console.log(newValue);

  console.log(oldValue);

});

單行文本輸入域，ngModel可以把value屬性值綁定到model
復(fù)選框，ngModely可以把true、false值綁定到Model變量
單選框 ngModel可以把當(dāng)前選中的單選框的value值綁定到Model變量
下拉框 ngModel可以把當(dāng)前選中的option的value值綁定到Model變量
舉例：

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
  </head>
  <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>簡易版購物車計(jì)算器</h2>
          單價(jià)：<input type="text" ng-model="price" />
          數(shù)量：<input type="text" ng-model="number" />
          總價(jià)：{{price*number}}
      </div>
  </body>
  <script src="js/angular.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    angular.module("myModule",["ng"]).controller("myControl",function  ($scope){
      $scope.$watch("name+password",function() {  //兩個(gè)監(jiān)聽對象之間用+連接即可
          console.log($scope.name);
          console.log($scope.password);
      })
  })
  </script>
  </html>

三、ng模塊中提供的Service組件

  1. $rootScope 用于在所有控制前間共享數(shù)據(jù)的服務(wù)

  2. $interval 周期性定時(shí)器服務(wù)

  3. $timeout 一次性定時(shí)器服務(wù)

四、ng模塊提供的directive組件

ngClick: 為元素綁定單機(jī)事件的監(jiān)聽函數(shù)-只能是Model函數(shù)($scope.函數(shù)名=function(){})，不能是全局函數(shù),可以在view中被調(diào)用

ngMouseOver 鼠標(biāo)移動(dòng)到指定的 HTML 元素上時(shí)要執(zhí)行的操作

ngSrc 為img標(biāo)簽指定src屬性，但可以防止404請求錯(cuò)誤

ngShow 若賦值為true，則display：block;否則display:none

ngHide; 跟ngshow相反

五、AngularJS四大特性之三-依賴注入

1.若某個(gè)函數(shù)調(diào)用時(shí)需要其他的對象作為形參，就稱此函數(shù)依賴于形參

  function Driver(car) {
    car.strat();
    car.run();
    car.stop();
  }

2.如何解決依賴關(guān)系

1）主動(dòng)創(chuàng)建

       var c1 = new Car();
       var d1 = new Driver(c1);

  1. 被動(dòng)注入(Injection)方式

    module.controller("控制器"，function($scope,$inerval));

angular中的ngController指令在實(shí)例化控制器對象時(shí)，會(huì)根據(jù)指令的形參名，創(chuàng)建出控制器所依賴的對象，并注入進(jìn)來---依賴注入（Dependency Injection）

注意：
1.angular在創(chuàng)建控制器對象時(shí)，會(huì)根據(jù)形參列表中的每個(gè)形參依賴的對象的名稱來創(chuàng)建，故控制器聲明函數(shù)不能聲明angular無法識(shí)別的形參名 angular只提供了一種依賴注入方式-根據(jù)形參名來注入依賴的對象
2.若項(xiàng)目js文件使用了類似yuicompressor等壓縮程序，默認(rèn)會(huì)把函數(shù)的形參名精簡為一個(gè)字母的形式，會(huì)導(dǎo)致Angular的依賴注入失敗-解決辦法

   module.controller("控制器名"，[
    "$scope",
    "$interval",
    "$http",
    function(a,b,c){
  }
  ]);

3.可以被注入的對象 - 所有的service對象都可以被注入
1）$rootScope 在多個(gè)控制器間共享數(shù)據(jù)的服務(wù)
2）$interval 提供周期性定時(shí)器服務(wù)
3）$timeout 提供一次性定時(shí)器服務(wù)
4）$log 體用五個(gè)基本的日志輸出服務(wù)
5）$http 提供異步HTPP請求（AJAX）的服務(wù)

  $http{method:"GET",url:""}.then(fun).catch(fun)

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

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

  6）$location

六、 ng模塊中提供的過濾器

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

  2. lowercase

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

  3. uppercase

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

  4. number

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

  5. currency

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

  6. date

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

七、總結(jié)ng模塊中我們已經(jīng)用到的內(nèi)容

1.directive - 用在DOM元素上

   ngApp/ngbind/nginit/ngcontroller/ngmodel/

2.service - 用在控制器的聲明里

    $scope/$rootScope/$timerout/$interval/$http/$location

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

八、單頁應(yīng)用

angularjs提供的模塊---ngroute

  1. 概念

  • route: 路由 通過某條線路找到目標(biāo)內(nèi)容

  • ngroute 模塊的目標(biāo)： 就是根據(jù)瀏覽器中url中的一個(gè)特殊的地址標(biāo)記，查找到該標(biāo)記所對應(yīng)的模板頁面，并異步加載到ngview

2.使用步驟

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

    <div ng-view></div>

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

  1. 創(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)頁面所有元素使用   
    })
    })

5）使用瀏覽器做測試
http:IP地址/index.html#/路由地址

3.ngroute中的頁面跳轉(zhuǎn)

通過超鏈接訪問 href="#/main"
通過js跳轉(zhuǎn) $location.path("/2")
舉例：
html:

 <html>
  <head>
    <meta charset="utf-8">
    <title>路由</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
  </head>
  <body ng-app="module">
    <ul>
        <li>
            <a href="#/">page1</a>
            <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>
</html>

//singlePage.js文件內(nèi)容

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

  module.config(function($routeProvider){

    $routeProvider.when("/",{
    
    templateUrl:"temp/page1.html",
    
    controller:"pageControl",
}).when("/page2",{
    
    templateUrl:"temp/page2.html",
})
})
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

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