一周入门angularJS(一)

AngularJS

day1�

• :使用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="[]"指定正则表达式
  • 电子邮件:类型
  • 数字:
  • 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