Angular入门

注：以下内容都是基于Windows环境讲解说明的。

一、了解

　　1.什么是Angular？

二、环境配置以及工具

　　1.安装NodeJs和npm

　　　　a.Nodejs安装

　　　　b.npm包管理器

　　　　c.cnpm（淘宝镜像）

　　2.Visual Studio Code

　　　　a.chrome debugger插件安装

　　　　b.VSCode快捷键

　　　　c.VSCode调试Angular代码

　　　　d.其他插件推荐

三、项目创建

四、Angular项目说明

　　1.目录说明

　　2.Angular属性操作、元素操作、指令

　　3.Angular的生命周期

　　4.demo举例

 =================分 ==================界 ==================线 =================

一、了解

　　1.什么是Angular

　　Angular是一个基于TypeScript的开源Web应用程序框架，一个用HTML，CSS和JavaScript / TypeScript构建客户端应用程序的框架。Angular是由构建AngularJS的团队重写的。

二、环境配置以及工具

　　1.安装NodeJs和npm

　　　　a.Nodejs安装

　　　　确保开发环境中包含Node.js和npm包管理器。

　　　　去官网下载NodeJs，找到环境合适稳定的版本进行下载安装，安装会自动配置全局变量

https://nodejs.org/en/

 安装后打开终端/控制台窗口允许命令查看是否安装成功

node -v

　　　　b.npm包管理器

　　　　Angular、Angular CLI和Angular应用都依赖于npm包中提供的特性和功能。想要下载npm包，就必须要拥有一个npm包管理器。

　　　　好在安装Nodejs的时候已经默认安装了，所以只需要在安装完NodeJs后验证是否安装npm即可。

　　　　在终端/控制台窗口输入命令进行验证　

npm -v

　　　　c.cnpm（淘宝镜像）

　　　　一般的项目会通过 npm install 安装应用等等，但是时间会比较长，或者不知道什么原因出现错误，这时候推荐使用cnpm，下面使用命令安装cnpm并指定淘宝镜像。　

npm install -g cnpm --registry=https://registry.npm.taobao.org

　　2.Visual Studio Code

　　　　a.chrome debugger插件安装

　　　　直接在VSCode扩展（ctrl+shitf+x）搜索 Debugger for Chrome，点击安装即可。这个插件以便于开发阶段前台进行debug。

　　　　b.VSCode快捷键

　　　　网上搜索一大堆，就不介绍了。https://code.visualstudio.com/docs/getstarted/keybindings

　　　　c.VSCode调试Angular代码

　　　　安装完Debugger for Chrome后，按F5配置Debug参数，默认即可。保存后再次按F5进入debug模式。提前打好测试断点。

　　　　F8进入下一步，F5直接走完。

　　　　d.其他插件推荐

　　　　TSLint：Typescript语法检查 Prettier：代码格式化 IntelliJ IDEA

三、项目创建

// TODO

四、Angular项目说明

　　1.目录说明

webapp

├── app                               - Your application（你的应用）app根模块

│   ├── account                       - User account management UI(用户账号管理界面)

│   ├── admin                         - Administration UI(管理员界面)

│   ├── blocks                        - Common building blocks like configuration and interceptors(公共构建模块和拦截器)

│   ├── components                    - Common components like alerting and form validation(常用组件，比如警告组件和验证组件)

│   ├── entities                      - Generated entities (more information below)(生成的实体，下面会有介绍)

│   ├── home                          - Home page(主页)

│   ├── layouts                       - Common page layouts like navigation bar and error pages(通用页面布局，类似导航条和错误页)

│   ├── services                      - Common services like authentication and user management(通用服务，类似身份验证和管理)

│   ├── app.constants.js              - Application constants(应用常量)

│   ├── app.module.js                 - Application modules configuration(应用modules配置)根模块，之后添加的组件都会在这里面进行引用

│   ├── app.state.js                  - Main application router(应用路由--单页应用业务通过js控制，无法简单通过url控制，故而使用应用路由，详情请百度)

├── bower_components                  - Dependencies installed by Bower(通过Bower安装的依赖)

├── content                           - Static content(静态内容)

│   ├── images                        - Images(图片)

│   ├── styles                        - CSS stylesheets(css样式表)

│   ├── fonts                         - Font files will be copied here(字体库)

├── i18n                              - Translation files(国际化语言文件)

├── scss                              - Sass style sheet files will be here if you choose the option(如果创建应用选择了LibSass，则其文件会在这生成)

├── swagger-ui                        - Swagger UI front-end(SwaggerAPI文档前段页面)

├── 404.html                          - 404 page(404错误页)

├── favicon.ico                       - Fav icon(网站图标)

├── index.html                        - Index page(索引页)入口

├── robots.txt                        - Configuration for bots and Web crawlers(针对搜索引擎爬虫的配置文件)

├── package.json                   - 配置文件，包括依赖

├── robots.txt                        - Configuration for bots and Web crawlers(针对搜索引擎爬虫的配置文件)

　　

　　2.Angular属性操作、元素操作、指令

　　　　a.*ngFor

　　　　

ts:
let colors = [ 'red', 'blue', 'yellow', 'green' ];

html:
<div *ngFor="let color of colors let i=index let odd=odd">
  {{odd}}
  {{i}}
  {{color}}
</div>

　　　　效果如下：

　　　　b.*ngIf

<div *ngIf="showInfo">{{message}}</div>

　　　　c.ngClass,ngStyle

<span class="badge" [ngClass]="getBadgeClass(health.status)" jhiTranslate="{{'health.status.' + health.status}}">
　　{{health.status}}
</span>

<span class="badge" [ngStyle]="{'color': 'red'}" jhiTranslate="{{'health.status.' + health.status}}">
　　{{health.status}}
</span>

　　　　d.*ngSwitch

<ul [ngSwitch]="score">
<li *ngSwitchCase="1">已支付</li>
<li *ngSwitchCase="2">订单已经确认</li> <li *ngSwitchCase="3">已发货</li>
<li *ngSwitchDefault>无效</li>
</ul>

　　　　e.click执行事件

<button class="button" (click)="getData()"> 点击按钮触发事件
</button>

　　　　g.表单事件

<input type="text" (keyup)="keyUpFn($event)"/>

keyUpFn(e){
    console.log(e)
}

　　　　h.管道

　　　　时常我们需要把数字显示成金额、大小写转换、日期等等。 Angular管道对于象这样小型的转换来说是个很方便的选择。管道是一个简单的函数，它接受一个输入值，并返回转换结果。

<p>{{today | date:'yyyy-MM-dd HH:mm:ss'}}</p>

　　　　i.双向数据绑定

　　　　1.首先在app.module.ts里面引入并声明;

　　　　2.再在input里使用[(ngModel)]="inputVal"双向绑定数据

　　　　3.home.component.ts里面的方法为了测试通过model来改变视图

 

 　　　　j.路由

 RouterModule.forRoot(
            [
                ...LAYOUT_ROUTES,
                {
                    path: 'admin',
                    loadChildren: './admin/admin.module#FccAdminModule' // 告诉路由从另一个模块中获取子路由:需要导入模块的相对路径、# 分隔符、导出模块类的名称
                },

　　3.Angular的生命周期

　　　　生命周期函数通俗的讲就是组件创建、组件更新、组件销毁的时候会触发的一系列的方法。
　　　　当 Angular 使用构造函数新建一个组件或指令后，就会按下面的顺序在特定时刻调用这些 生命周期钩子方法。
　　　　每个接口都有唯一的一个钩子方法，它们的名字是由接口名再加上ng前缀构成的，比如OnInit接口的钩子方法叫做ngOnInit.

　　　　a.生命周期钩子分类

　　　　基于指令与组件的区别来分类

　　　　指令与组件共有的钩子

ngOnChanges 当数据绑定输入属性的值发生变化时调用 // 调用顺序1
ngOnInit 在第一次 ngOnChanges 后调用 // 调用顺序2
ngDoCheck 自定义的方法，用于检测和处理值的改变 // 调用顺序3
ngOnDestroy 指令销毁前调用 // 调用顺序8

　　　　组件特有的钩子

ngAfterContentInit 在组件内容初始化之后调用 // 调用顺序4
ngAfterContentChecked 组件每次检查内容时调用 // 调用顺序5
ngAfterViewInit 组件相应的视图初始化之后调用 // 调用顺序6
ngAfterViewChecked 组件每次检查视图时调用 // 调用顺序7

　　　　首次加载生命周期顺序

export class LifecircleComponent {

    constructor() {

        console.log('00构造函数执行了---除了使用简单的值对局部变量进行初始化之外，什么都不应该做')
    }

    ngOnChanges() {

        console.log('01ngOnChages执行了---当被绑定的输入属性的值发生变化时调用(父子组件传值的时候会触发)'); 
    }

    ngOnInit() {
        console.log('02ngOnInit执行了--- 请求数据一般放在这个里面');
    }
    ngDoCheck() {
        console.log('03ngDoCheck执行了---检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应');
    }
    ngAfterContentInit() {
        console.log('04ngAfterContentInit执行了---当把内容投影进组件之后调用');
    }
    ngAfterContentChecked() {
        console.log('05ngAfterContentChecked执行了---每次完成被投影组件内容的变更检测之后调用');
    }
    ngAfterViewInit() : void {
        console.log('06 ngAfterViewInit执行了----初始化完组件视图及其子视图之后调用（dom操作放在这个里面）');
    }
    ngAfterViewChecked() {
        console.log('07ngAfterViewChecked执行了----每次做完组件视图和子视图的变更检测之后调用');
    }

    ngOnDestroy() {
        console.log('08ngOnDestroy执行了····');
    }

    //自定义方法
    changeMsg() {

        this.msg = "数据改变了";
    }
}

　　4.demo举例