├── Angular4 ├── Component │ ├── README.html │ └── README.md ├── DependencyInjection │ └── README.md ├── Directive │ └── README.md ├── Environment │ └── README.md ├── HTTP │ └── README.md ├── Pipes │ └── README.md ├── README.MD ├── Router │ └── README.md └── TemplateSyntax │ └── README.md ├── AngularJS1 ├── README.md ├── controller │ ├── README.md │ ├── controller.html │ └── controllers.html ├── dependence │ ├── README.md │ ├── common.js │ ├── dependence.html │ ├── factory.html │ ├── provide.html │ ├── service.html │ └── value.html ├── directive │ ├── README.md │ └── directive.html ├── erp │ └── product.html ├── expression.html ├── filter │ ├── README.md │ ├── array.html │ ├── autofilter.html │ ├── currency.html │ ├── date.html │ ├── number.html │ ├── orderby.html │ └── string.html ├── libs │ ├── angular-ui │ │ ├── angular-ui-router.js │ │ └── angular-ui-router.min.js │ ├── angular │ │ ├── angular-sanitize.min.js │ │ ├── angular.global.js │ │ └── angular.min.js │ ├── bootstrap │ │ ├── css │ │ │ ├── bootstrap-main-responsive.css │ │ │ ├── bootstrap-main.css │ │ │ ├── bootstrap-theme-light.css │ │ │ ├── bootstrap-theme.css │ │ │ ├── bootstrap-theme.min.css │ │ │ ├── bootstrap.css │ │ │ ├── bootstrap.global.css │ │ │ ├── bootstrap.min.css │ │ │ └── style.min.css │ │ ├── datepicker │ │ │ ├── css │ │ │ │ └── datepicker.css │ │ │ ├── js │ │ │ │ └── bootstrap-datepicker.js │ │ │ └── less │ │ │ │ └── datepicker.less │ │ ├── fonts │ │ │ ├── glyphicons-halflings-regular.eot │ │ │ ├── glyphicons-halflings-regular.svg │ │ │ ├── glyphicons-halflings-regular.ttf │ │ │ └── glyphicons-halflings-regular.woff │ │ └── js │ │ │ ├── bootstrap.js │ │ │ ├── bootstrap.main.js │ │ │ └── bootstrap.min.js │ ├── imgs │ │ ├── green.jpg │ │ ├── red.jpg │ │ └── yellow.jpg │ └── jquery │ │ ├── jquery-1.11.0.js │ │ ├── jquery-2.1.1.min.js │ │ ├── jquery.cookie.js │ │ ├── jquery.form.js │ │ ├── jquery.format.js │ │ ├── jquery.lazyload.min.js │ │ └── jquery.touchwipe.js └── repeat │ ├── common.js │ ├── commonDictionary.txt │ ├── datagrid.css │ ├── datagrid.html │ ├── datagrid.js │ ├── studentDictionary2.txt │ ├── students.html │ └── students2.html └── README.md /Angular4/Component/README.md: -------------------------------------------------------------------------------- 1 | ## 创建简单的组件 2 | 1. 创建文件 3 | 在 `./src/app` 目录下手动创建或者在 Angular-CLI 中用命令 4 | `ng g c [component-name] -it -is # 表示新建组件，该组件使用内联模板和内联样式` 5 | 执行上面命令后会在 `./src/app` 目录下自动创建对应的组件目录和组件文件，同时会修改 `src/app/app.module.ts` 文件，将新建的组件添加到 `@NgModule` 的 `declarations` 数组中。 6 | 7 | 2. 编写组件代码 8 | ```javascript 9 | //加载组件装饰器 10 | import { Component } from '@angular/core'; 11 | //@Component装饰器为组件提供了Angular元数据。 12 | @Component({ 13 | selector: 'app-root', //用来渲染组件内容的选择器 14 | templateUrl: './app.component.html',//加载 html 15 | template：'

{{title}}

', 16 | styleUrls: ['./app.component.css'] //加载 css 17 | styles: ['*{padding: 0; margin: 0;}'] 18 | }) 19 | //总是export这个组件类，因为你必然会在别处import它。 20 | export class AppComponent { 21 | title = 'Tour of Heroes'; //定义变量 22 | } 23 | ``` 24 | 25 | 3.在根模版 `./src/app.module.ts` 中将指令添加到 `declarations` 数组当中 26 | ```javascript 27 | import { HeroDetailComponent } from './components/hero-detail/hero-detail.component'; 28 | @NgModule({ 29 | declarations: [HeroDetailComponent] 30 | }) 31 | ``` 32 | 4.使用组件 33 | ```html 34 | 35 | ``` 36 | 37 | ## 组件模板 38 | 在组件装饰器中用 `template` 或 `templateUrl` 来定义组件模板，两者只能出现一个，如果两者同时出现，后者会覆盖前者。 39 | 40 | ## 组件样式 41 | 在组件装饰器中用 `styles` 或 `styleUrls` 来定义组件样式，两者只能出现一个，如果两者同时出现，后者会覆盖前者。 42 | 43 | 把样式加入组件有以下几种方式： 44 | #### styles 45 | ```javascript 46 | @Component({ 47 | selector: 'app-root', 48 | template: `

App

`, 49 | styles: ['h1 { font-weight: normal; }'] 50 | }) 51 | export class AppComponent { 52 | /* . . . */ 53 | } 54 | ``` 55 | 56 | #### styleUrls 57 | ```javascript 58 | @Component({ 59 | selector: 'app-root', 60 | template: `

App

`, 61 | styleUrls: ['./app.component.css'] 62 | }) 63 | export class AppComponent { 64 | /* . . . */ 65 | } 66 | ``` 67 | 68 | #### 模板内联样式 69 | ```javascript 70 | @Component({ 71 | selector: 'app-root', 72 | template: ` 73 | 79 |

Controls

80 | 81 | ` 82 | }) 83 | export class AppComponent { 84 | /* . . . */ 85 | } 86 | ``` 87 | 88 | #### 模板中的link标签 89 | ```javascript 90 | @Component({ 91 | selector: 'app-root', 92 | template: ` 93 | 94 |

Team

95 | 100 | ` 101 | }) 102 | export class AppComponent { 103 | /* . . . */ 104 | } 105 | ``` 106 | 107 | #### CSS @imports 语法 108 | ```javascript 109 | @import 'hero-details-box.css'; 110 | ``` 111 | 112 | ## 组件生命周期 113 | 指令和组件的实例有一个生命周期：新建、更新和销毁。 通过实现一个或多个 Angular core库里定义的生命周期钩子接口 114 | 115 | 每个接口都有唯一的一个钩子方法，它们的名字是由接口名再加上ng前缀构成的。如:OnInit 116 | ```javascript 117 | import { Component, OnChanges, OnInit, DoCheck, OnDestroy } from '@angular/core'; 118 | export class AppComponent implements OnChanges, OnInit, DoCheck, OnDestroy { 119 | ngOnChanges(){} 120 | 121 | ngOnInit(){} 122 | 123 | ngDoCheck(){} 124 | 125 | ngOnDestroy(){} 126 | } 127 | ``` 128 | 129 | #### OnChanges 130 | - 当Angular（重新）设置数据绑定输入属性时响应。 该方法接受当前和上一属性值的SimpleChanges对象。 131 | - 当被绑定的输入属性的值发生变化时调用，首次调用一定会发生在ngOnInit()之前。 132 | 133 | #### OnInit 134 | - 在 Angular第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件时触发。 135 | - 在第一轮 ngOnChanges() 完成之后调用，只调用一次。 136 | - 在 onDestroy() 后重新渲染后会被调用。 137 | 138 | #### AfterContentInit 139 | - 当把内容投影进组件之后调用。第一次ngDoCheck()之后调用，只调用一次。 140 | - 只适用于组件。 141 | 142 | #### DoCheck 143 | - 使用DoCheck钩子来检测那些Angular自身无法捕获的变更并采取行动。如引用类型的赋值。 144 | - 给组件赋值同一个对象的时候，不会触发 OnChanges，但会触发 DoCheck。 145 | 146 | #### AfterContentChecked 147 | - 每次完成被投影组件内容的变更检测之后调用。 148 | - ngAfterContentInit()和每次ngDoCheck()之后调用。 149 | - 只适用于组件。 150 | 151 | #### OnDestroy 152 | - 当Angular每次销毁指令/组件之前调用并清扫。 在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏。 153 | - 在Angular销毁指令/组件之前调用。 154 | - 没有对应的销毁后钩子函数。 155 | 156 | #### AfterViewInit 157 | - Angular会在每次创建了组件的子视图后调用它们。 158 | - 可用于监听子组件加载完成。 159 | 160 | #### AfterViewChecked 161 | - Angular 会在每次子视图修改后会调用它们。 162 | - 可用于监听子组件修改完成。 163 | 164 | ## 组件通信 165 | #### 通过 @Input 实现子组件调用父组件 166 | 167 | 父组件定义 168 | ```javascript 169 | import { Component } from '@angular/core'; 170 | 171 | export class Hero { 172 | id: number; 173 | name: string; 174 | } 175 | 176 | const HEROES: Hero[] = [ 177 | { id: 11, name: 'Mr. Nice' }, 178 | { id: 12, name: 'Narco' }, 179 | { id: 13, name: 'Bombasto' }, 180 | { id: 14, name: 'Celeritas' }, 181 | { id: 15, name: 'Magneta' }, 182 | { id: 16, name: 'RubberMan' }, 183 | { id: 17, name: 'Dynama' }, 184 | { id: 18, name: 'Dr IQ' }, 185 | { id: 19, name: 'Magma' }, 186 | { id: 20, name: 'Tornado' } 187 | ]; 188 | @Component({ 189 | selector: 'app-root', 190 | templateUrl: './app.component.html', 191 | styleUrls: ['./app.component.css'] 192 | }) 193 | export class AppComponent{ 194 | heroes = HEROES; 195 | currHero: Hero; 196 | 197 | selectHero(hero: Hero) { 198 | this.currHero = hero; 199 | } 200 | } 201 | ``` 202 | 父组件的 template 并在里面调用子组件 203 | ```html 204 | 209 | 210 | ``` 211 | 子组件定义 212 | ```javascript 213 | 214 | import { Component, Input } from '@angular/core'; 215 | 216 | @Component({ 217 | selector: 'hero', 218 | templateUrl: './hero.component.html', 219 | styleUrls: ['./hero.component.css'] 220 | }) 221 | export class HeroComponent{ 222 | @Input() currHero: Object; 223 | } 224 | ``` 225 | 子组件的 template 226 | ```html 227 |
228 |

{{currHero.name}} details!

229 |
{{currHero.id}}
230 |
231 | 232 | 233 |
234 |
235 | ``` 236 | 237 | #### 通过 @Output 实现父组件调用子组件 238 | 子组件暴露一个EventEmitter属性，当事件发生时，子组件利用该属性emits(向上弹射)事件。父组件绑定到这个事件属性，并在事件发生时作出回应。 239 | 240 | 子组件的EventEmitter属性是一个输出属性，通常带有@Output装饰器，就像在VoterComponent中看到的。 241 | 242 | 父组件定义 243 | ```javascript 244 | import { Component } from '@angular/core'; 245 | 246 | @Component({ 247 | selector: 'app-root', 248 | templateUrl: './app.component.html', 249 | styleUrls: ['./app.component.css'] 250 | }) 251 | export class AppComponent{ 252 | parentEvent(val: Boolean){ 253 | console.log(val); 254 | } 255 | } 256 | ``` 257 | 父组件的 template 并在里面调用子组件 258 | ```html 259 | 260 | ``` 261 | 子组件定义 262 | ```javascript 263 | import { Component, Output } from '@angular/core'; 264 | 265 | @Component({ 266 | selector: 'hero', 267 | templateUrl: './hero.component.html', 268 | styleUrls: ['./hero.component.css'] 269 | }) 270 | export class HeroComponent{ 271 | @Output() parentAttr = new EventEmitter(); 272 | childrenEvent(val: Boolean){ 273 | this.parentAttr.emit(val); 274 | } 275 | } 276 | ``` 277 | 子组件的 template 278 | ```html 279 | 280 | ``` 281 | 282 | #### 父组件与子组件通过本地变量互动 283 | 父组件定义 284 | ```javascript 285 | import { Component } from '@angular/core'; 286 | 287 | @Component({ 288 | selector: 'app-root', 289 | templateUrl: './app.component.html', 290 | styleUrls: ['./app.component.css'] 291 | }) 292 | export class AppComponent{ 293 | parentEvent(arg1){ 294 | console.log(arg1); 295 | } 296 | } 297 | ``` 298 | 父组件的 template 并在里面调用子组件 299 | ```html 300 | 301 | 302 | ``` 303 | 子组件定义 304 | ```javascript 305 | import { Component, Output } from '@angular/core'; 306 | 307 | @Component({ 308 | selector: 'hero', 309 | templateUrl: './hero.component.html', 310 | styleUrls: ['./hero.component.css'] 311 | }) 312 | export class HeroComponent{ 313 | title = "Children Component"; 314 | } 315 | ``` 316 | 317 | #### 通过服务来通信 -------------------------------------------------------------------------------- /Angular4/DependencyInjection/README.md: -------------------------------------------------------------------------------- 1 | ## 依赖注入 2 | 依赖注入是重要的程序设计模式。 Angular 有自己的依赖注入框架，离开了它，几乎没法构建 Angular 应用。 它使用得非常广泛，以至于几乎每个人都会把它简称为 DI。 3 | 4 | #### 从服务开始来了解依赖注入 5 | 创建字典服务 -- ./src/app/service/dictionary.service.ts 6 | ```javascript 7 | export class DictionayService { 8 | lan: String = "cn"; 9 | } 10 | ``` 11 | 在根模块依赖注入 -- ./scr/app/app.module.ts 12 | ```javascript 13 | import {DictionayService} from './service/dictionary.service.ts' 14 | @NgModule({ 15 | providers: [ 16 | DictionayService 17 | ] 18 | }) 19 | ``` 20 | 在根组件使用依赖注入的服务 -- ./src/app/app.component.ts 21 | ```javascript 22 | import { Component} from '@angular/core'; 23 | import {DictionayService} from './service/dictionary.service.ts' 24 | 25 | @Component({ 26 | selector: 'app-root', 27 | template: ` 28 |

{{dic.lan}}

29 | `, 33 | }) 34 | export class AppComponent { 35 | constructor(private dic: DictionayService) {} 36 | } 37 | ``` 38 | 在根组件使用依赖注入的服务 -- ./src/app/student.component.ts 39 | ```javascript 40 | import { Component} from '@angular/core'; 41 | import {DictionayService} from './service/dictionary.service.ts' 42 | 43 | @Component({ 44 | selector: 'app-root', 45 | template: `

{{dic.lan}}

`, 46 | }) 47 | export class AppComponent { 48 | constructor(private dic: DictionayService) {} 49 | } 50 | ``` 51 | 52 | 在上面的案例中可以看到当在根组件中更改 DictionayService 的时候，其子组件也同步发生改变。如果在上面案例中不使用依赖注入，而是当普通的类使用，在子组件实例化一个 DictionayService 的实例，会发现当更组件改变的时候，子组件不会发生改变。 53 | 54 | 所以依赖注入可以理解成一个全局的对象。在根模块依赖注入的时候就实例化好了一个实例，其它组件在使用的时候都是在使用该实例。 55 | 56 | #### Injectable 装饰器 57 | 在上面的案例中，如果我们想要实现在 DictionayService 发起一个 Ajax 请求，然后把请求的数据在依赖注入后拿来做全局数组对象，那代码将改成下面这样 58 | 59 | 更改字典服务 -- ./src/app/service/dictionary.service.ts 60 | ```javascript 61 | import { Http } from '@angular/http'; 62 | export class DictionayService { 63 | lan: String = "cn"; 64 | dataset: Object; 65 | constructor(http: Http){ 66 | http.get('api').subscribe((res) => { 67 | this.dataset = res.json(); 68 | }); 69 | } 70 | } 71 | ``` 72 | 更改代码后将会发生一个错误 73 | ``` 74 | compiler.es5.js:1694Uncaught Error: Can't resolve all parameters for DicService: (?) 75 | ``` 76 | 这是因为在依赖注入的时候，没能将 Http 对象同时依赖注入进来。这个时候就要使用到 Injectable 装饰器。 77 | ```javascript 78 | import { Http } from '@angular/http'; 79 | import { Injectable } from '@angular/core'; 80 | 81 | @Injectable() 82 | export class DictionayService { 83 | lan: String = "cn"; 84 | dataset: Object; 85 | constructor(http: Http){ 86 | http.get('api').subscribe((res) => { 87 | this.dataset = res.json(); 88 | }); 89 | } 90 | } 91 | ``` 92 | 93 | #### 总结 94 | - 依赖注入可以理解成整个应用的全局对象 95 | - 果所创建的服务不依赖于其他对象，是可以不用使用 Injectable 类装饰器 96 | - 不过比较推荐的做法不管是否有依赖对象，在创建服务时都使用 Injectable 类装饰器。 -------------------------------------------------------------------------------- /Angular4/Directive/README.md: -------------------------------------------------------------------------------- 1 | ## 指令概述 2 | 在 Angular 中有三种类型的指令： 3 | 1. 组件 — 拥有模板的指令。此类指令为最常用的指令。 4 | 2. 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令。如 `ngFor` `ngIf` 等。 5 | 3. 属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。如 `ngStyle` 等。 6 | 7 | ## 内置指令 8 | 指令使用时要在前页加上 `*` 号。 9 | 10 | #### ngIf 11 | 该指令主要作用于防范空指针错误，比如一个未定义的变量被当成对象使用时会报错。 12 | ```javascript 13 | export class AppComponent { 14 | } 15 | ``` 16 | `

{{currHero.name}}

` 17 | 上面将会抛出错误，原因是 `currHero` 未定义。但加上指令 `ngIf` 则可以避免这种错误 18 | `

{{currHero.a}}

` 19 | 20 | 该指令当表达式不为 `false` 时 DOM 元素不会存在 Document 中。 21 | 22 | #### ngFor 23 | ```javascript 24 | export class AppComponent { 25 | data: Array = [ 26 | {name: 'Tom', age: 18}, 27 | {name: 'Sam', age: 15}, 28 | {name: 'Lucy', age: 28} 29 | ]; 30 | getKeys(item){ 31 | return Object.keys(item); 32 | } 33 | } 34 | ``` 35 | ``` html 36 |