一、Angular概述

基于命令行的开发方式？
①hot reload
②编译工作
③集成了webpack打包工具
。。。。

angular.cn 中文
angular.io 正式官网
angular.cn/guide/styleguide 风格指南

1、what？
angular是一个Google推出的js框架，是以模块为基本单位，模块又可以包含组件、指令、过滤器。。

1.1 版本问题
angular angular2.0以后所有的版本统称为angular
(当前学习ng4.0)

angular.js angular1.* 统称为angular.js
（http://www.runoob.com/angularjs/angularjs-tutorial.html）

1.2 版本之间的区别
①新版本是有组件的概念的
②老版本是$scope和controller为主
③angular引入了rxjs
④angular采用ts（typescript是es6的超集，是由微软和谷歌） ts是一种强类型检查机制的语言
⑤angular可读性、提高了代码的复用率、维护成本变低。。。

2、where
可以使用支持angular的Ionic框架来实现移动端的开发，直接使用angular来实现pc端的开发

实现操作比较频繁的SPA

3、why
①遵循w3c所推出的webComponent标准（组件化）
②代码具有更好的可读性和可维护性、
③引入了更多的高效率的工具 ，比如rxjs\immutable.js。。。， 让代码的编译、部署更简单
④ts --》 健壮

④装饰器：用来描述当前这个类是一个什么样的类 @Component @NgModule @Pipe @Directive @Injectable

方式2：
Angular CLI是一个命令行界面工具，它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布。
//安装基于angular的命令工具
npm install -g @angular/cli
//创建一个有着ng模板的项目
ng new my-app
//进入当前目录下的my-app
cd my-app
//启动开发服务器
ng serve --open

①创建文件 app/test/test.component.ts

        ②将类装饰成一个组件类

            import {Component} from '@angular/core'

            @Component({

                selector:'test',

                template:`<h1>it is a test</h1>`

            })

            export class Demo01Component{

            }

        ③使用组件

            ①到模块中声明

                app.module.ts中，

                import {TestComponent} from './test/test.component'

                @NgModule({

                    declarations:[TestComponent]

                })

            ②<test></test>

demo01

demo02_lianxi

demo03_for

demo04_lianxi

demo05_directive

demo06_custom_directive

demo07_communication

xiaotou

datou

通过ViewChild来实现类似ref的效果：

通过服务来实现通信：

父组件

子组件

demo08_lianxi

聊天室、用户

聊天室

用户

demo09_bind

test.css

demo10_lianxi

demo11_pipe

sex.pipe.ts

test.pipe.ts

demo12_service

user.service.ts

heartbeat.service.ts

demo13_http

myhttp.service.ts

demo14_lianxi

storehttp.service.ts