AngularJS其他知识点 - Mirror198829/AngularJs1 GitHub Wiki

AngularJs1 知识点

form表单

表单验证className

  • .ng-valid{}
  • .ng-invalid{}
  • .ng-pristine{}
  • .ng-dirty{}

$location服务

 //1.absUrl() 获取当前完整的url路径
var absurl = $location.absUrl();    //http://172.16.0.88:8100/#/homePage?id=10&a=100

//2. url() 获取当前url路径(当前url#后面的内容,包括参数和哈希值):
var url = $location.url();    // 结果：/homePage?id=10&a=100
        
//3. path() 获取当前url的子路径(也就是当前url#后面的内容,不包括参数)
var pathUrl = $location.path()  //结果：/homePage
       
//4.获取当前url的协议(比如http,https)
var protocol = $location.protocol();  //结果：http
       
//5.获取主机名
var localhost = $location.host();  //结果：172.16.0.88
       
//6.获取当前url的端口
var port = $location.port();//结果：8100
    
//7.获取当前url的哈希值
var hash = $location.hash()//结果：http://172.16.088
        
//8.获取当前url的参数的序列化json对象
var search = $location.search();//结果：{id: "10", a: "100"}

自定义服务

注意点：

  1. 服务名称不要以$开头，避免ng内部服务命名形式
  2. 建议将自定义服务注入在内置服务之后

脏检查工作过程

参考文档： http://www.angularjs.cn/A0a6

$watch

  • 每1个绑定到了dom上的数据都会向$watch 队列插入1个$watch
  • 监听变化
  • $watch(watchExpression, listener, objectEquality) 第3个参数：true，深度监听，监听对象（数组，对象）中每1个属性

$apply

将调用事件放入angular context执行环境，从而触发$digest,这也是为什么对第三方库需要手动 $apply，ng内置事件指令已经将$apply封装其中

$digest

作用：遍历 $watch 队列，进行dirty-checking,如有变化，DOM发生变化

最佳实践

  • 将控制器命名为[Name]Controller而不是[Name]Ctrl是一个最佳实践
  • 控制器应尽可能短小精悍，在控制器中建议不要操作dom，复杂的逻辑放入指令和服务中
⚠️ **GitHub.com Fallback** ⚠️