AngularJS 框架

時間  2019-11-08
標籤 angularjs 框架 欄目 AngularJS 简体版
原文   原文鏈接

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

【Angular JS表達式】
  一、Angular JS使用雙{{}}綁定方式。用於將表達式的內容輸出到頁面中。
       表達式能夠是文字、運算符、變量等，也能夠在表達式中進行運算輸出結果
            eg.  <p>{{ 5+5+"Angular" }}</p>
       若是Angular.js文件放在文件下方，在頁面刷新的瞬間看到{{}}表達式，可使用<div ng-bind="name"></div>方式綁定
            eg.上式能夠改成：<p ng-bind="5+5+'Angular' "></p>css

<!--舉例 兩條語句做用相同-->
    <p>{{ 5+5+"Angular" }}</p> 
    <p ng-bind="5+5+'Angular' "></p>>

 示意圖 java

【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='jredu' ">
                應用程序初始化時，name變量就賦有初值。數據庫

<!--AngularJS 綁定input與div(雙向數據綁定)-->
<body ng-app="" ng-init="name='Genista'">  <!--輸入框前綴-->
    <input type="text" ng-model = "name" />
    <input type="text" ng-model = "name" />
    <div>{{name+"123"}}</div>    <!--表達式（會有bug，能夠改變angularJS導入順序來解決）-->
    <div ng-bind="name"></div>
</body>

 示意圖 數組

【MVC 三層架構】
   一、Model（模型層）:應用程序中用於處理數據的部分（包括將數據保存或者修改到數據庫、變量文件中）。
                                        在AngularJS中，Model 特指的是 應用程序中的各類數據。
        View（視圖層）：用戶能夠看到的用於顯示數據的頁面。（只有view是用戶可見的）
        Controller（控制器）：是連接Model和View的橋樑，負責從view讀取數據、接收用戶的操做輸入；並將數據發送給model層。
      　　　　　　　　　　　  model對數據處理完畢後，將結果返回給 Controller，Controller再將結果返回給View層顯示。服務器

 如何 建立一個angular的模塊，即ng-app="" 須要綁定的部分？
       須要接收兩個參數： eg. var app = angular.module("myApp",[]);
          ① 模塊名稱：即 angular.module 雙引號中綁定的名字。
          ② 數組：表示須要注入的模塊名稱，不須要注入其餘模塊，可用空數組代替。
            >>> Angular（2.0）將經常使用放入功能封裝在angular.js，建立主模塊時能夠直接使用，無需注入。
            >>>而一些應用較少的功能，須要導入相應的JS文件，而且在[]中注入進這個模塊，纔可使用。
            這就是AngularJS（1.0）中的【模塊開發】和【依賴注入】。架構

 如何 在AngularJS模塊上，建立一個控制器？app

　　須要傳入兩個參數：    
         ① 控制器名字：即ng-controller須要綁定的名字
                 <div ng-controller="myCtrol">
         ② 控制器的構造函數，構造函數能夠傳入多個參數
               >>>若是又在函數中使用系統的內置對象，則必須經過函數的參數傳入，不然不能使用
               >>>AngularJS 中的內置對象，都用$開頭，例如 $scope,$rootScopeide

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

        【注】 AngularJS中的父子做用域
        一、AngularJS中，子做用域只能訪問父做用域中的變量，二不能修改父做用域的變量；
        二、爲了解決上述問題，能夠將反作用域中的變量聲明爲引用數據類型，例如對象等。
            這樣能夠在子做用域中，直接修改對象屬性，而不須要修改對象自己保存的地址。
            見"myCtrol1"舉例

<div ng-controller="myCtrol1">
    <input type="text" ng-model="name" placeholder="myCtrol1 name" /> <!--局部變量-->
    <div ng-bind="name+'------------myCtrol1的name'"></div>
    <div ng-bind="age+'------------myCtrol1的age'"></div>
            
    <input type="text" ng-model="test" placeholder="myCtrol1 test" /> <!--局部變量-->
    <input type="text" ng-model="obj.test" placeholder="myCtrol1 obj.test" /> <!--局部變量-->
            
    <!--父子做用域-->
    <mark ng-bind="test+'myCtrl1-test'"></mark>
    <mark ng-bind="obj.test+'myCtrl1-obj.test'"></mark>
            
</div>  
    <mark ng-bind="test+'全局-test'"></mark><br />
    <mark ng-bind="obj.test+'全局-obj.test'"></mark><br /> 
<script type="text/javascript">
        var app = angular.module("myApp",[]);
        app.controller("myCtrol1",function($rootScope){
            $rootScope.test = "aaaaa";
            $rootScope.obj = {
                test :"bbbbb",
            };
        });
</script>

 示意圖 

【AngularJS中的過濾器】
    過濾器可使用一個管道字符（|）添加到表達式和指令中。
      一、系統內置的過濾器
        currency：將數字格式化爲貨幣形式。
        filter：從數組項中選擇一個子集。
        orderBy：根據某個表達式排列數組。
        lowercase：格式化字符串爲小寫。        
        uppercase：格式化字符串爲大寫。

　　二、自定義過濾器（寫在控制器外面） ，同時 須要傳遞過濾參數。
         調用過濾器實例：
             傳入參數4，將被 過濾函數 的 num形參 所接收。

<script type="text/javascript">
angular.module("app",[])
/*實現隱藏手機號碼後四位*/        
.filter("hideTel",function(){
    return function(text,num){
        num = num>0&&num<11?num:3;
        text = text+"";
        var newTest = text.substring(0,11-num) +text.substring(11-num,11).replace(/\d/g,"*");                
        return newTest;
    }           
})
</script>

【AngularJS中的服務Service】
    一、內置服務：
         要是服務，必需要把服務名經過controller的構造函數的參數注入進來！
         服務內置的服務，統一使用$開頭，服務中的屬性和方法統一使用$$開頭！自定義服務時，需注意與系統服務的寫法區分開
         $location：返回當前頁面的URL地址信息，第一個對象。
         $http：向服務器發送請求，應用響應服務器傳送過來的數據。至關於JQuery中的Ajax
         $timeout：至關於setTimeout();

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

<script type="text/javascript">
    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);
                    
/*service 自定義服務的使用*/
          $scope.gn=hexafy.gn;        
          $scope.num1 = hexafy.func(10);           
        })         
            
    .service("hexafy",function(){
        this.gn = "將十進制轉換爲十六進制";     // 使用this.屬性 把變量添加到函數上
        this.func = function(num){                 // this.方法
        return num.toString(16);
            }         
    }    
</script>

 示意圖 

【AngularJS中的DOM和事件】

　　一、DOM

　　ng-disabled="false" 　　傳入true表示禁用，傳入false表示可用       
       ng-show="false"　　傳入true表示顯示，傳入false表示隱藏  
       ng-hide="false"　　 傳入true表示隱藏，傳入false表示顯示

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

<body ng-app="app" ng-controller="ctrl">
        <!--【ng-disabled】-->
        <button ng-disabled="!myCheck">點擊</button>
        <label>
            <input type="checkbox" ng-model="myCheck" /> 是否贊成協議
        </label>
        <p>{{myCheck}}</p>
        <!--【ng-show】-->
        <label>
            <input type="checkbox" ng-model="myCheck1" /> 是否顯示
        </label>
        <p ng-show="myCheck1">哈哈，來咯！</p>
        <!--【ng-hide】-->
        <label>
            <input type="checkbox" ng-model="myCheck2" /> 是否隱藏
        </label>
        <p ng-hide="myCheck2">嗚嗚，拜拜！</p>
</body>

示意圖

【AngularJS的表單驗證】
    一、表單中，經常使用的驗證操做：
            $dirty    表單有填寫記錄
            $valid    字段內容合法的
            $invalid    字段內容是非法的
            $pristine    表單沒有填寫記錄
            $error  表單驗證不經過的錯誤信息
    二、驗證時，必須給form和input，設置name屬性。
          給form和input設置name後，會自動將表單信息綁定到$scope 做用域中。因此，能夠直接使用formName.inputName.$驗證操做   獲得驗證結果
            eg.
            formName.inputName.$dirty = "true"  表示表單被填寫過
            formName.inputName.$invalid = "true"  表示表單輸入內容不合法
            formName.inputName.$error.required= "true"  表示表單設置了必填，可是沒有輸入
        【注】$error 支持的驗證
       　　    required/minlength/maxlength/partten/email/number/data/url等
     三、爲了不AngularJS的驗證與HTML5的驗證表單衝突！例如，type = "email" required等，H5也會進行驗證，能夠給form添加 "novalidate" 屬性，禁用HTML5的驗證功能。

用戶名驗證功能——代碼舉例 ↓↓↓

<div class="panel-body">
     <form class="form-horizontal" novalidate="novalidate" name="form">
         <div class="row">
              <div class="col-xs-3">
                   用戶名：
              </div>
              <div class="col-xs-9">
          <input type="text" class="form-control" name="name" ng-model="user.name" required=" required" ng-minlength="6" ng-maxlength="12"/>        
                      <p style="color: aquamarine; margin: 0px;" ng-show="form.name.$invalid && form.name.$dirty">
                         <span ng-show="form.name.$error.required">用戶名必須填寫</span>
                         <span ng-show="form.name.$error.minlength">用戶名長度最少6位</span>
                         <span ng-show="form.name.$error.maxlength">用戶名長度最多12位</span>
                      </p>
                                
               </div>
           </div>
       </form>
 </div>

示意圖

【AngularJS中使用動畫】
    一、導入angular-animate.js
    二、 若是頁面中沒有自定義app模塊，則能夠直接綁定系統模塊ng-app="ngAnimate"
          若是頁面中有自定義的app模塊，則能夠在自定義模塊的數組中，注入ngAnimate。
         angular.module("app",["ngAnimate"])
      
    三、 當使用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{}

<style type="text/css">
 　　 .div{
           width: 200px;
           height: 200px;
           background-color: red;
           transition: all ease 1s;
          }
      .ng-hide{
            width: 0px;
            height: 0px;
            background-color: green;
           /*margin-left: -200px;*/
          }         
       .ng-enter-active,.ng-leave{
             width: 200px;
             height: 200px;
             background-color: red;
           }
        .ng-enter,.ng-leave-active{
              width: 0px;
              height: 0px;
              background-color: green;      
           }
 </style>

<body ng-app="app" ng-controller="ctrl">
        
    <input type="checkbox" ng-model="myCheck" />隱藏div
    <div class="div" ng-show="myCheck">這是一個div</div>    
        
    <input type="checkbox" ng-model="myIf" />移除div
    <div class="div" ng-if="myIf">這是一個div</div>
        
</body>
　　<script src="js/angular.js" type="text/javascript"></script>
　　<script src="js/angular-animate.js" type="text/javascript"></script>
　　<script type="text/javascript">
    
    angular.module("app",["ngAnimate"])
    .controller("ctrl",function(){
            
    })
</script>

 動畫效果    漸變消失

今天就到這裏吧，後續還會更新...

若是有疑問能夠提出來你們共同解決，若是有不完善的地方還請多多指正！

有須要請加關注呦~~~蟹蟹~~~

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