angular中的全域性方法和指令介紹1

### 複習並總結Angular開發流程 0.下載angular，暴力angular，找到js拖拽過來，npm下載 1.引入 2.在要控制的標籤上寫上ng-app 3.寫controller,告訴angular哪部分dom結構有哪個controller去接管 4.在controller裡面處理資料和具體業務邏輯 5.繫結值或文字，ng-model {{}}表示式 ### 複習MVC - MVC是一種設計思想,它是約定了程式的結構應該是怎麼。 - 每一個組成原件都會有一個明確的職責。 - 提高程式碼的結構和可維護性; ### 前端的mvc ## mvvm mv* ### scope ### ViewModel - scope實際上就是MVVM中所謂的VM（視圖模型）−正是因為scope在Angular中大量使用甚至蓋過了C（控制器）的概念，所以很多人把Angular稱之為MVVM框架 ## Angular全域性Api使用 - 資料比較API + angular.isArray() 判斷給定的物件是否為陣列。 + angular.isDate() 判斷給定的物件是否為日期型別。 + angular.isDefined() 判斷給定的物件是否定義過。 + angular.isElement() 判斷給定的物件是否為一個DOM元素。 + angular.isFunction() 判斷給定的物件是否為一個函式。 + angular.isNumber() 判斷給定的物件是否為數字。 + angular.isObject() 判斷給定的物件是否為object型別。 + angular.isString() 判斷給定的物件是否為字串。 + angular.isUndefined() 判斷給定的物件是否沒有定義過（與angular.isDefined()相反）。 + angular.equals() 判斷給定的兩個物件是否相等。 - 其他API使用 + angular.lowercase() 將字串轉換為小寫形式。 + angular.uppercase() 將字串轉換為大寫形式。 + angular.copy() 深拷貝一個物件或陣列。 + angular.forEach() 遍歷物件或陣列中的每一個元素並執行一個函式。

    var values = {name: 'feifei', gender: 'zhuzhu'};
    angular.forEach(values, function(value, key) {
    });

    var objs =[1,2];
    angular.forEach(objs, function(data,index,array){
        console.log(data);
        console.log(index);
        console.log(array);
    });

## 模組 ### 控制器的作用 - 初始化屬性 - 暴露屬性或者行為 - 監視資料變化 scope.name=”;scop′,function(scope){}]) ### 控制器的多種寫法 - 1.簡單寫法 app.controller(‘myCtrl’,function(){}) - 2.早期使用 （angular-1.2.29版本） function myController(scope)$scope.name=”angular早期使用”;−3.fuction寫在外面（寫在外面不能被壓縮）functionotherCtrl(scope) { scope.name=’123’;
    }
    app.controller(‘myCtrl’,otherCtrl)
 - 4. fuction寫在外面（寫在外面不能被壓縮）
   function otherCtrl(otherscope) {
        otherscope.name=’123’;
    }
    //依賴注入
    otherCtrl.inject=['scope′];//這裡對方法添加inject app.controller(‘myCtrl’,otherCtrl) - 5. 物件導向方法使用

- 1.控制器的function不寫改為引用function app.controller('myCtrl',demoCtrl);
- 2.建立一個物件導向的function ` function demoCtrl() {
        this.name='123';
    } `
- 3.使用的時候新增 ` as scope ` ng-controller="myCtrl as scope"

#依賴注入 - 沒事你不要來找我，有事我會去找你。 - 原理 框架在呼叫方法的過程中通過獲取到傳遞的引數，然後框架內部將方法toString處理以後， 再通過正規表示式將其獲取到然後依次例項化。 ###控制器繼承 var app=angular.module('mainApp',[]); app.controller('SelfCtrl', function(scope)$scope.foo(););app.controller(′ParentCtrl′,function(

指令

• 在 AngularJS 中將字首為 ng- 這種屬性稱之為指令，其作用就是為 DOM 元素呼叫方法、定義行為繫結資料等

• 簡單說：當一個 Angular 應用啟動，Angular 就會遍歷 DOM 樹來解析 HTML，根據指令不同，完成不同操作

• ng-bind

  • 用來解決表示式閃爍問題

  • <p ng-bind="資料模型"></p>替代了{{資料模型}}

    {{name}}

  注意：只能夠在雙標籤中使用ng-bind指令

• ng-cloak

  • 用來解決表示式閃爍問題
  • 寫一個樣式使頁面的元素隱藏
    
    .ng-cloak{
    display: none;
    }
    
  • <p class="ng-cloak">{{name}}</p>
  • 利用angular在載入會移除頁面上所以名為ng-cloak的樣式名的特性。
• 頁面安全的問題
  直接編寫一些
  
  document.write('

    <div ng-switch="name">
            <div ng-switch-when="小明">我是小明</div>
            <div ng-switch-when="小紅">我是小紅</div>
            <div ng-switch-when="小月">我是小月</div>
    </div>

其他常用指令

• ng-checked：
  
  • 單選/複選是否選中,是單向資料繫結
• ng-selected：
  
  • 是否選中
• ng-disabled：
  
  • 是否禁用
• ng-readonly：
  
  • 是否只讀

常用事件指令

不同於以上的功能性指令，Angular還定義了一些用於和事件繫結的指令：

• ng-blur：失去焦點
• ng-focus：獲得焦點
• ng-change：改變事件
• ng-click： ng-click=”add()”
• ng-dblclick：雙擊事件
• ng-submit： 表單提交事件