1. **双向数据绑定**
* View（视图）： 页面（标签、指令，表达式）
* Model(模型) ：作用域对象（属性、方法）
* 数据绑定： 数据从一个位置自动流向另一个位置
* View-->Model
* Model-->View
* 单向数据绑定： 只支持一个方向
* View-->Model ： ng-init
* Model-->View : {{name}}
* 双向数据绑定
* Model<-->View : ng-model
* angular是支持双向数据绑定的
2. **依赖注入**
* 依赖的对象被别人(调用者)自动注入进入
* 注入的方式;
* 内部自建：不动态
* 全局变量：污染全局环境
* 形参：这种最好
* angualr就是通过声明式依赖注入， 来得到作用域对象
* 形参名不能随便定义（只是针对当前这种写法）
3. ** MVC模式**
* **M: Model, 即模型**, 在angular中:
* 为scope
* 储存数据的容器
* 提供操作数据的方法
* **V: View, 即视图**, 在angular中:
* 为页面
* 包括: html/css/directive/expression
* 显示Model的数据
* 将数据同步到Model
* 与用户交互
* **C: Controller, 即控制器**, 在angular中:
* 为angular的Controller
* 初始化Model数据
* 为Model添加行为方法
4. **MVVM模式**
* M: Model, 即数据模型, 在angular中:
* 为scope中的各个数据对象
* V: View, 即视图, 在angular中:
* 为页面
* VM: ViewModel, 即视图模型, 在angular中:
* 为scope对象
* 在angular中controller不再是架构的核心，在MVVM中只是起辅助作用，用来辅助$scope对象，即VM层
1. **作用域**
* 是一个js实例对象
* 这个对象的属性、方法， 页面都可以直接引用、操作
* ng-app指令： 内部创建一个根作用域（$rootScope）, 是所有其它作用域的父对象
2. **控制器**
* 也是一个对象，是我们View与Model之间的桥梁
* 当我们使用了ng-controller指令， 内部就会创建控制器对象
* 但我们同时得提供控制器的构造函数（必须定义一个$scope的形参）
* 每定义一个ng-controller指令， 内部就会创建一个新的作用域对象（$scope）, 并自动注入构造函数中,在函数内部可以直接使用$scope对象。
3. **模块**
* 也是一个对象
* 创建模块对象： angular.module('模块名', [依赖的模块])
* 通过模块添加控制器：
* module.controller('MyController', function($scope){//操作$scope的语句})
* angular的整体设计也是多模块的
* 核心模块： angular.js
* 扩展模块： angular-router.js, angular-message.js, angular-animate.js
1. **表达式**
* {{js表达式}}
* 从作用域对象中读取对应的属性数据来显示数据
* 不支持if/for/while
* 支持三目表达式
2. **指令**
* 什么指令 ： 自定义标签属性/标签
* 常用的指令：
* ng-app: 指定模块名，angular管理的区域
* ng-model： 双向绑定，输入相关标签
* ng-model-options="{updateOn: 'blur'}" 控制光标移开就展示
* ng-init： 初始化数据
* ng-click： 调用作用域对象的方法（点击时）
可以传$event
* ng-controller: 指定控制器构造函数名，内部会自动创建一个新的子作用域（外部的）
* ng-bind： 解决使用{{}}显示数据闪屏（在很短时间内显示{{}}）
* ng-bind-template: 可以实现多个{{}} 如 <div ng-bind-template="{{text}}, {{text}}"></div>
* ng-cloak: 也是解决数据闪屏 他使用的是 css中的 display:none 解析之后就是block
* ng-non-bindable: 不去解析
* ng-repeat： 遍历数组显示数据， 数组有几个元素就会产生几个新的作用域
* $index, $first, $last, $middle, $odd, $even
* 可以通过ng-repeat-start 和 ng-repeat-end实现兄弟之间的循环
* ng-show: 布尔类型， 如果为true才显示
* ng-hide: 布尔类型， 如果为true就隐藏
* ng-class: 动态引用定义的样式 {aClass:true, bClass:false}
* ng-style: 动态引用通过js指定的样式对象 {color:'red', background:'blue'}
* ng-mouseenter: 鼠标移入监听, 值为函数调用, 可以传$event
* ng-mouseleave: 鼠标移出监听, 值为函数调用, 可以传$event
* ng-fours/blur: 获取和失去焦点
* ng-submit: 提交
* ng-selected: 默认是false 被选择就是true
* ng-change: 输入框发生改变就会触发 要配合ng-model
* ng-copy: 输入框出现复制就会触发
* ng-cut: 输入框出现剪切就会触发
* ng-paste: 输入框出现粘贴就会触发
* ng-disabled: 禁用标签
* ng-readonly: 输入框不能输入 但不是灰色的禁用
* ng-checked: 是true就是选中状态 不是就不是选中状态
* ng-value: 相比于value 用户体验会比较好
* ng-attr-title: 可以让鼠标移出显示提示文字
* ng-switch 之后的是 ng-switch-default是默认显示的 ng-switch-when是false就是显示切换的
* ng-open: 打开和关闭 h5上有个details标签
* ng-include: 可以引入其他的页面 ng-include="index.html"
* ng-controller: ng-controller="Fnarr as a1" {{a1.text}}
* novalidate: 阻止表单默认的样式
* ng-attr-id: ng-attr-id="div{{id}}" {{id}}
3. **过滤器**
* 作用: 在显示数据时可以对数据进行格式化或过滤
* 单个--->格式化（将别的类型的数据转换为特定格式的字符串）
* 多个----》格式化/过滤
* 不会真正改变被操作数据
* {{express | 过滤器名：补充说明}}
* 常用过滤器：
* currency 货币格式化(文本)
* number数值格式化(文本)
* date 将日期对象格式化(文本)
* json: 将js对象格式化为json(文本)
* lowercase : 将字符串格式化为全小写(文本)
* uppercase : 将字符串格式化全大写(文本)
* limitTo 从一个数组或字符串中过滤出一个新的数组或字符串
* limitTo : 3 limitTo : -3
* orderBy : 根据指定作用域属性对数组进行排序
* {{[2,1,4,3] | orderBy}} 升序
* {{[2,1,4,3] | orderBy：‘-’}} 降序
* {{[{id:2,price:3}, {id:1, price:4}] | orderBy:'id'} id升序
* {{[{id:2,price:3}, {id:1, price:4}] | orderBy:'-price'} price降序
* filter : 从数组中过滤返回一个新数组
* {{[{id:22,price:35}, {id:23, price:45}] | filter:{id:'3'}} //根据id过滤
* {{[{id:22,price:35}, {id:23, price:45}] | filter:{$:'3'}} //根据所有字段过滤
4. **location**
* $location的一些方法
* absUrl(): 获取到绝对地址，加参数也会显示出来
* path(): 可以设置也可以获取，是一个路径，$location.path('aa'); 之后获取就是 http://xxxxx#/aaa
* replace(): 设置了可以location历史管理的操作。没有前进后退 $location.path('aa').replace()
* hash(): 设置获取哈希值 $location.hash('hello')
* search(): $location.search({'age': 20})
* url(): 得到路径 不是全部的 path是全部的
* host(): 得到location
* port(): 得到端口
* protocol(): 得到协议
* $anchorScroll 锚点调整
* 需要配合$location.hash()配合就可以使用 $anchorScroll
* 原本hash是div4 之后你上下滚动再点击div4想跳转到div4的位置 就需要重新调用一次 $anchorScroll()
* $cacheFactory 缓存
* put() 添加缓存
* get() 获取缓存
* info() 获取缓存的信息 size
* capacity() 设置缓存的长度 在$cacheFactory('myCache', {capacity: 2})
* $log 调试
* $log.log()
* $log.info()
* $log.warn()
* $log.erro()
* 供应商服务 必须是config然后在 $anchorScroll后面加 Provider 可以对自定义服务进行修改
* angular.module('myapp', [])
.config(['$anchorScrollProvider', function($anchorScrollProvider){
$anchorScrollProvider.disableAutoScrolling()
}])
-----------------------------------------------------------------------------------
m1.provider('myService', function(){
return{
name: 'hello',
$get: function(){
return{
name: this.name,
show: function(){
return this.name + ':angular'
}
}
}
}
})
m1.config(['myServiceProvider', function(myServiceProvider){
console.log(myServiceProvider);
myServiceProvider.name = 'hi'
}])
m1.controller('a1', ['$scope','myService', function($scope, myService){
console.log(myService.show());
}])
-----------------------------------------------------------------------------------
// 在m1模块引入自定义服务 myService服务 在后面添加
// 也可以把这个自定义服务进行模块化的引入在多个文件中引入，和插件的方法差不多
var m1 = angular.module('myApp', ['module1'])
m1.controller('a1', ['$scope','myService', function($scope, myService){
console.log(myService.show());
}])
var m2 = angular.module('module1', [])
m2.factory('myService', function(){
return{
name: 'tom',
show: function(){
return this.name + ':angular'
}
}
})
-----------------------------------------------------------------------------------
* factory
浙公网安备 33010602011771号