摘要：前端知识点总结一概述基于命令行的开发方式编译工作集成了打包工具。。。。在浏览器中接管展现应用的内容，并根据我们提供的操作指令响应用户的交互。在开发时，八大组成部分模块组件模板自带的标签指令绑定相关的的语法元数据告诉如何处理一个类。

一、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标准（组件化）
②代码具有更好的可读性和可维护性、
③引入了更多的高效率的工具 ，比如rxjsimmutable.js。。。， 让代码的编译、部署更简单
④ts --》 健壮

4、how

angular的开发整体框架，是有8大组成部分构成

搭建环境的方式：
方式1：
    ①下载quickstart-master.zip压缩包
    https://github.com/angular/quickstart download
    或者 直接拷贝老师提供的压缩包
    ②解压缩 压缩包，进入对应的目录中
    执行npm install 安装项目所需要用到的依赖
    ③npm start 启动开发服务器

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

index.html

main.js (main.ts)-->启动一个模块 AppModule

app/app.module.ts ---> 启动一个组件 app/app.component.ts

Hello Angular

1、创建组件和使用组件
    ①创建文件 app/test/test.component.ts
    ②将类装饰成一个组件类
        import {Component} from "@angular/core"
    
        @Component({
            selector:"test",
            template:`
it is a test
`
        })

        export class Demo01Component{
        }
    ③使用组件
        ①到模块中声明
            app.module.ts中，
            import {TestComponent} from "./test/test.component"

            @NgModule({
                declarations:[TestComponent]
            })
        ②

    练习：（16:50 - 17:00）
        demo02/demo02.component.ts
        组件中渲染一个无序列表（5个列表）

        将组件渲染AppComponent
        

1、循环指令
Vue :  

Angular: 
        语法：
   
   

2、选择指令
Vue: 
angular:
        

指令和组件的关系：

组件就是一个带有模板的指令！！！

1、多重分支判断

vue 
    v-if
    v-else-if
    v-else


    

    

2、属性绑定

Vue:
    
    
    
    


Angular:
    
    
    

    

3、事件绑定

Vue
    
    
Angular
    语法：
    
    举例：
    

4、双向数据绑定

Vue:
    
Angular:
    

依赖注入：
    将依赖的东西注入到指定的地方，让依赖可被使用
    举例：AppModule依赖于FormsModule,
    只需要在AppModule的imports数组写上FormsModule名称
    就可以使用FormsModule所提供的东西。
    好处：解耦，降低了耦合度


Angular中如果想要监听双向数据绑定数据的变化，提供一个事件 ngModelChange

注意事项：
①Angular中如果要想使用双向数据绑定，就必须指定模块依赖于FormsModule
②使用ngModelChange事件时，通过$event去传递用户当前所输入的信息
    （ngModelChange）="handleChange($event)"

内置的指令：

*ngFor
*ngIf
*ngSwitchCase
*ngSwitchDefault
ngSwitch
[]
()
[(ngModel)]
{{}}

5、自定义指令

Vue中自定义指令：
    Vue.directive("change",{
        bind:function(el,binding){},
        update:function(){},
        unbind:function(){}
    });
    v-change
Angular中指令创建和使用

5.1 创建
    import {Directive}    from "@angular/core"

    @Directive({
        selector:"[test]"
    })

    export class TestDirective{
    }

5.2 使用
    ①到模块中声明
        app.module.ts
            import {TestDirective} from "***"
            @NgModule({
                declarations:[TestDirective]
            })
    ②作为标签的属性
        


5.3 得到调用指令的元素
    ①import {ElementRef} from "@angular/core"
    ②实例化
        constructor(private el:ElementRef){}
    ③读取元素
        this.el.nativeElement

5.4 指令调用时传参？？
    ①

    ②在指令类的内部
        import {Input} from "@angular/core"

        @Input() test="";

        this.test

补充：使用生命周期的处理函数？
    ①引入
        import {OnDestroy} from "@angular/core"
    ②在定义类的时候 实现接口类
        export class Test implements OnDestroy{
            ngOnDestroy(){}
        }
        

Vue中组件通信的方式？
    ①props down
        步骤1：发送
            
        步骤2：接收
            Vue.component("son",{
                props:["myName"]
            })
    ②events up（子-》父）
        步骤1: 事件的绑定
            methods:{
                rcvMsg:function(msg){}
            }
            
        步骤2：事件的触发（儿子）
            this.$emit("customEvent",123);
    ③$refs $parent
    ④bus
Angular中组件通信？
    1、props down
        步骤1：发送
        
        步骤2：接收
            import {Input} from "@angular/core"
            @Input() uName="";
            this.uName
    2、events up
        步骤1：事件和处理函数的绑定
            定义一个方法
                rcvMsg(msg){}
            
            
        步骤2：触发事件
            子组件触发
                import {Output,EventEmitter} from "@angular/core"

                @Output() toFatherEvent = new EventEmiiter();

                this.toFatherEvent.emit("123");

我们是这样写 Angular 应用的：

用 Angular 扩展语法编写 HTML 模板， 
用组件类管理这些模板，
用服务添加应用逻辑， 
用模块打包发布组件与服务。

管道是用来对数据进行筛选、过滤、格式化

Vue中过滤器：
    {{expression | filter(1,2) | filter2 }}

    Vue.filter("changeSex",function(arg,arg1,arg2){
        return 处理后的结果
    })

angular中管道：

过滤器的本质就是一个有参数有返回值的方法
    
    语法:
            
            {{expression | pipe1:"12":34 | pipe2}}
            
    
    1、内置管道
        
        常见内置管道：
            uppercase/lowercase/date/number/slice

    2、自定义管道
        创建一个自定义管道：
            import {Pipe,PipeTransform} from "@angular/core"

            @Pipe({
                name:"testNG"
            })

            export class TestPipe implements PipeTransform {
                    //value是竖杠前表达式执行的结果
                    //args通过调用管道时，冒号后边跟的参数
                 transfrom(value:any,...args:[]):any{
                    return ‘处理后的结果’
                 }
            
            }
        
        调用：
            ①声明
                到模块中先引入再声明
            ②调用
                和内置管道的用法是一样的,同样支持传参、多重过滤
        
    

服务 service:服务的本质是一个类，在服务类中封装的是经常用到的数据和方法。

常见的服务：日志类服务、心跳服务、网络请求服务。。。

1、服务的创建和使用
    创建：
        import {Injectable} from "@angular/core"

        @Injectable()
        export class UserService {
            constructor(){}

            checkUserLogin(){return true}
        }

    使用：
        ①需要给服务指定provider
            在组件中或者模块中指定providers:[UserService]
        ②调用
            import {UserService} from "./***"

            constructor(private myService:UserService){}

            this.myService.checkUserLogin()



2、如何封装一个网络请求的服务

    ①创建服务的文件
    ②在服务中封装一个方法
        sendRequest(myUrl:string){
            return  this.http.get(myUrl).map((response)=>
                response.json()
            )
        }
    ③调用之前 首先指定providers
    ④到组件中，先引入，再实例化，再调用
        this.myHS.sendRequest().subscribe((result)=>{
            //result就是服务器端返回的结果！
        })
    
    
    与服务器端通信如果涉及的session，angular需要这么处理：
        客户端
            ①发起请求 withCredentials:true
                this.http.get(
        myUrl,
        {withCredentials:true}
        )
        服务器端：
            ①跨域header("Access-Control-Allow-Origin:http://localhost:3000");
            ②服务器允许接收凭证
            header("Access-Control-Allow-Credentials:true");


服务创建和使用：
    1、创建一个文件 test.service.ts
    2、在文件中编写代码，装饰一个服务
        @Injectable()
        export class TestService{
            showAlert(msg){
                alert(msg);
            }
        }
    3、    给模块或者组件,在providers属性对应的数组中 [TestService]

    4、组件中要想使用服务中的方法
        import {TestService} from "***"

        constructor(private myService:TestService){}

        this.myService.showAlert()

Angular中开发模式：

我们是这样写 Angular 应用的：
用 Angular 扩展语法编写 HTML 模板， 
用组件类管理这些模板，
用服务添加应用逻辑， 
用模块打包发布组件与服务。

然后，我们通过引导根模块来启动该应用。
Angular 在浏览器中接管、展现应用的内容，并根据我们提供的操作指令响应用户的交互。

在Angular开发时，八大组成部分：

1、模块
2、组件
3、模板 自带的html标签+指令、绑定相关的ng的语法
4、元数据 告诉 Angular 如何处理一个类。
5、数据绑定
    {{}} () [] [(ngModel)]
6、指令 
        三大类：组件、结构型、属性型
7、服务
    封装一些数据和方法
8、依赖注入
    就是将依赖的服务、模块注入到指定组件、模块中取使用，提供了一种新的实例化的方式（解耦）

路由模块：建立起url和页面之间的映射关系
1、实现SPA的基本步骤

Vue：
实现一个SPA基本思路：
①指定一个容器
    
②创建代码片段
    创建组件
    var Login = Vue.component("login-component",{
        template:`
登录页面
`
    })
③配置路由词典
    new Vue({
        router:new VueRouter({
            routes:[
                {path:"/myLogin",component:Login}
            ]
        })
    })
④测试
    测试路由词典中 路由地址能否按照需求 正确加载所需要用到的页面

Angular：
①指定容器
    
②创建组件 （声明）
    @Component({}) export class **
③配置路由词典
    //a-module-routing
    import {Routes,RouterModule} from "@angular/router"
    import {LoginComponent} from "./demo15_spa/login.component"

    const routes:Routes = [
        {path:"",component:LoginComponent}
        .....
    ]

    @NgModule({
        import:[RouterModule.forRoot(routes)],
        exports:[RouterModule]
    })

    export class AppRoutingModule{}

    找到跟模块：
        import {AppRoutingModule} from "./app.router"

        @NgModule({
            imports:[AppRoutingModule]
        })
④测试

2、在Angular实现组件间的导航的方式

Vue写法：
        ①可以直接修改地址栏（内部测试）
        ②可以通过js
         this.$router.push("目的地的路由地址")
        ③routerLink
         
Angular：
①直接修改地址栏
②js    
    import {Router} from "@angular/router"
    constructor(private myRouter:Router){}
    this.myRouter.navigateByUrl("url");
③ 



补充：实现前进和后退
    import {Location} from "@angular/common"

    constructor(private myLocation:Location){}

    this.myLocation.back();                this.myLocation.forward();

3、参数的传递

Angular:
    3.1 发送
        this.myRouter.navigateByUrl("myOC/123");

    3.2 接收
        ① 配置接收方的路由地址
            {path:"myOC"} ==> {path:"myOC/:price"}
        ② 接收参数
                import {ActivatedRoute} from "@angular/router"

                constructor(private myAR:ActivatedRoute){}

                this.myAR.params.subscribe((result)=>{
                    //result.price
                })
    
    在Angular中 实现数据传输的方式：
        ①组件间通信
        ②跳转时指定参数
        ③与远程服务器端通信

4、路由嵌套

    可以在SPA中某个组件中，根据url嵌套其它的组件
    Vue中实现方式：
        ①在准备嵌套其它组件的，指定一个容器 
        ②配置路由词典
            {
                path:"",
                component:MailComponent,
                children:[
                    {path:"inbox",component:***}
                ]
            }
    
    Angular中实现方式：
        ①指定容器
            router-outlet
        ②配置子路由
            {
                path:"mail",
                children:[
                    ...
                ]
            }

        总结：在Angular中实现一个支持路由嵌套的SPA，
        导航到对应的子路由对应的页面时，必须在携带父组件的地址
            localhost:3000/mail/outbox
            localhost:3000/mail/inbox

        demo18_embed
            mylogin.component.ts  MyLoginComponent
            mail.component.ts MailComponent
            inbox.component.ts InboxComponent
            outbox.component.ts OutboxComponent
        ①完成组件的创建和声明

        ②路由模块

5、路由守卫

路由守卫 RouteGuard，控制是否能够访问某一个url中所对应的组件！
    鉴权的组件
    用户登录的页面
    。。。

如何使用路由守卫：
    ①创建一个服务
        import {Injecatable} from "@angular/core"
        import {CanActivate} from "@angular/router"

        @Injectable()
        export class MailGuard implments CanActivate{
        
            canActivate(){
                return true/false
            }
        }
    ②给服务指定提供商
         providers:[MailGuard]
    ③给路由词典中想要保护的路由指定canActivate
            {
                path:"mail",
                canActivate:[MailGuard]
            }

    Vue中如果也想实现路由守卫：
        const router = new VueRouter({ ... })

        router.beforeEach((to, from, next) => {
            // ...
        })

        https://router.vuejs.org/zh-cn/advanced/navigation-guards.html