一週入門angularJS(一)

weixin_34007886發表於2016-12-20
AngularJS

AngularJS

day1�

  • <html ng-app>:使用angular來引導整個html頁面
  • ng-model="yourname":雙向繫結一個變數

day2

scope

  • ng-controller='' 表示了控制器

  • scope的apply機制:將資料模型的變化在整個應用範圍內進行通知

  • $rootScope與np-app元素繫結,$rootScope是所有$scope的物件的父類

  • scope的使用:

     angular.module("myApp",[])  
 .controller('Mycontroller',($scope)=>{  
 scope.name = "Ari"
 })

  • scope的生命週期:

    • 建立
    • 連結:$watch函式
    • 更新:監控函式出現變化的時候,會觸發指定的回撥函式
    • 銷燬:呼叫$scope上的destroy()方法

controller

  • 在module中建立controller

     var app = angular.module("app",[]);
 app.controller('FirstController',($scope)=>{
     $scope.message = "hello";       
 });

  • ng-click:觸發的是瀏覽器的mouseup指令

expression

  • $parse手動解析表示式
  • 插值字串$interpolate
    • text(字串,必需的):一個包含字元插值標記的字串
    • mustHaveExpression(bool):如果為true,當傳入的字串中不含有表示式時會返回null
    • trustedContext(string):29.4節
  • $watch監聽一個屬性的改變來進行操作
  • $interpolate監聽的是{{}},如果要監聽別的起始字元和結束字元,使用$interpolateProvider,並使用startSymbol(value)和endSymblo(value)

filter

  • 過濾器的呼叫方式: {{expr | filter}}

  • 常見的過濾器

    • currency:轉化貨幣格式
    • date:轉化日期格式
    • filter:自定義格式進行過濾
    • json:可以將JSON或JS物件轉化成字串
    • limitTi:按次序進行過濾
    • lowercase:轉換為小寫
    • number:1:將數字轉換成字串
    • orderBy:進行排序
    • uppercase:轉換為大寫字元

  • 自定義過濾器

     angular.module('myApp.filters',[])
 .filter('name',()=>{function}){}

  • 表單驗證

    • 必填項:required
    • 最小長度:ng-minlength="5"
    • 最大長度:ng-maxlength="20"
    • 模式匹配:ng-pattern="[]"指定正規表示式
    • 電子郵件:<input type="email" name="email" ng-model="user.email">型別
    • 數字:<input type="number" >
    • URL:<input type="url">
    • 自定義驗證:chap10
    • 在表單中控制變數:formName.inputFieldName.property
      • formName.inputFieldName.$pristine:未修改表單返回true
      • formName.inputFieldName.$dirty:修改過返回true
      • formName.inputFieldName.$valid:合法返回true
      • formName.i�nputFieldName.$invalid:不合法返回true
      • formName.inputFieldName.$error:驗證失敗返回true

相關文章