前端学习总结——Angular

前端知识点总结——Angular

一、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 --》 健壮

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

二、Angular模板项目的启动流程

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

四、Angular中常见的指令

1、循环指令
Vue :  

Angular: 
        语法：
   
   

2、选择指令
Vue: 
angular: