http://docs.ngnice.com/guide/filter
https://devdocs.io/angularjs~1.5/api/ng/directive
https://code.angularjs.org/1.5.3/docs/guide
组件、控制器、服务、指令、过滤器
对应项目上的 components、modules、services、xx、filter
控制器 ng-controller => create scope1
2
3
4
5
6
7
8
9// 初始化,涉及 scope root 作用域等待
var App = angular.module('app', []);
// 控制器 C 将 M 和 V 绑定(MVC)
App.controller('ctrl', $scope=> {
$scope.data= {};
// 不建议直接用 $scope.message = ''; 改动的话,内存地址改变容易导致ng不能触发监听
$scope.onClick = ()=> {}; // `ng-click="onClick"`
});
双向绑定: ng-model
条件判断: ng-if
、ng-show
、ng-hide
循环: ng-repeat
ng-repeat="x in xx" $index, x.xxx
//过滤器1
2
3
4App.filter('xxxx', ()=> text=> textFilter);
`{{ data.message | xxxxFilter }}`
// 搜索 `ng-repeat="x in xxxx | filter: searchText"`
searchText = ['T', {name: 'T'}, {name: 'T', last: 'H'}];
样式选择器 ng-class
,ng-style
下拉列表选项 ng-options
1
2
3
4$scope.colors = [
{ name: 'black', color: 'black'},
{ name: 'white', color: 'white'},
]
1 | <div ng-controller="FirstCtrl"> |
ng-include
和ng-template
1
2
3
4
5
6<div ng-include="views/part.html"></div>
<div ng-include="template.url"></div>
<div ng-include="getUrl()"></div>
<ng-include src="views/part.html"></ng-include>
directive1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26// 名字命名用驼峰,使用用-
App.directive('people', function() {
return {
restrict: 'E', // 类型 element A: attribute, C: class
replace: true, // 是否直接代替顶级标签
template: 'xxx' // `templateUrl`
}
})
.directive('te', function() {
return {
scope: {
// = 对象; @ 文本; & 函数
info: '=' // 从 attr 中获取 info 属性,存储到 scope.info中,, 双向数据绑定,改成@ 为只读.
},
link(scope, element, attrs) {
// scope 作用域
// element 封装过的页面dom。 element.children('h1').addClass('text')
// attrs 传入的所有 attrs
},
transclude: true, // 把 directive 变成一个容器 这里有点像 React.children 的概念,或者vue里面的 slot
template: `xxxxx<div ng-transclude></div>`
}
});
// 这里传入了 data
<div te="data"></div>
ng表单,验证等
作用域广播broadcasted
父级=>子级;emitted
子级=> 父级
filter 自定义筛选器
data binding 双向绑定
dependency injection 引来注入
ng-src directive 内置指令
event ng-click 事件系统指令
server 注入自定义server
angular.module(‘xxxx’, [])
.factory(‘serverName’, [], fn)