hello angular1.5

Posted on | Edited on | Views:
本文作者:Jsonz 原文链接:《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-if、ng-show、ng-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-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>

更多

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)