hello angular1.5

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 scope

1
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-ifng-showng-hide
循环: ng-repeat ng-repeat="x in xx" $index, x.xxx

//过滤器

1
2
3
4
App.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
2
3
4
5
6
<div ng-controller="FirstCtrl">
<label>
<select ng-model="colorChoosen" ng-options="color.name for color in colors">
</select>
</label>
</div>

ng-includeng-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>

更多

directive

1
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)