angular6

首先确认npm的版本，一定要大于5.6以上的，最好直接更新
npm install -g npm
npm -v

下载安装npm install -g @angular/cli
安装之后可以通过ng -v查看

开始初始化项目
ng new 项目名 --style=scss --routing
如果不加上--style=scss 默认是生成css文件的
--routing 会帮我们生成一个路由配置文件，不加的话没有

安装完后进入项目
cd project
ng serve -o 开启项目并打开浏览器

上面步骤进行之后，会生成超级多文件，但是我们只需要关注红色的文件夹就可以
，其余的晚点有时间再研究一下

在src/app/app.moudule.ts文件，这个是最重要的一个文件，几乎很多配置都是在这里导入初始化的，比如我们新建组件，服务，路由模块的导入等其他模块导入都是这里，
在@NgModule 里面的declarations的这个部分都是导入组件的，但是当我们使用命令行ng g c 组件名生成组件的时候会自动添加到这里。imports 这里放的都是导入的模块资源名称，providers这里主要放导入的服务services,而最后的bootstrap驱动引导好像就是这样，还不知道有什么作用

新建组件
ng generate component 组件名 也可以使用简写 ng g c 组件名
然后就会自动生成一个组件文件夹目录层级，
里面的ts文件基本结构

在文件最上面需要导入import { Component } from '@angular/core';
然后@Component里面对象的selector对应文件独特标识符，新建的话一般会根据文件名来定
templateUrl 定义该组件的html文件，styleUrl定义该组件的css

应用组件
在app.component.html文件里面

直接写上就可以
这边是当访问不同的路由的时候，新路由的页面显示就会出现在该部分

路由

当我们在最原始新建项目的时候加上了 --routing就可以生成一个app.routing.module.ts，我们需要关注的是定义路由的那个数组，首先需要导入我们需要路由的组件，然后在路由数组中定义路由配置参数等

---

新建服务services 使用编写请求
ng generate service data

---

http client
在data.service.ts文件中

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

并且需要创建一个注入到constructor的实例

 constructor(private http: HttpClient) { }

  getUsers() {
    return this.http.get('https://jsonplaceholder.typicode.com/users')
  }

最后需要在app.module.ts文件中，加入HttpClientModule模块

---

在users.component.ts文件中加入下面代码

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import { Observable } from 'rxjs';

export class UsersComponent implements OnInit {

  users$: Object;
  
  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.getUsers().subscribe(
      data => this.users$ = data 
    );
  }

}

在users.component.html文件中配置

<h1>Users</h1>

<ul>
  <li *ngFor="let user of users$">
    <a routerLink="/details/{{user.id}}">{{ user.name }}</a>

    <ul>
      <li>{{ user.email }}</li>
      <li><a href="http://{{ user.website }}">{{ user.website }}</a></li>
    </ul>
  </li>
</ul>

---

当我们需要路由是动态路由的时候
比如在data.service.ts文件有这么一个请求

 getUser(userId) {
    return this.http.get('https://jsonplaceholder.typicode.com/users/'+userId)
  }

在detail.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import { Observable } from 'rxjs';
import { ActivatedRoute } from "@angular/router";

@Component({
  selector: 'app-details',
  templateUrl: './details.component.html',
  styleUrls: ['./details.component.scss']
})
export class DetailsComponent implements OnInit {

  user$: Object;
  
  constructor(private route: ActivatedRoute, private data: DataService) { 
     this.route.params.subscribe( params => this.user$ = params.id );  //划重点
  }

  ngOnInit() {
    this.data.getUser(this.user$).subscribe(
      data => this.user$ = data 
    );
  }

}

---

样式class的绑定
当我们有时需要点击侧边栏的时候显示背景色的时候
我们可以通过路由判断当前页面的路由
例如在sidebar.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent implements OnInit {

  currentUrl: string;

  constructor(private router: Router) {
    router.events.subscribe((event)=>{
    	if(event instanceof NavigationEnd){  通过路由选择参数，可以获取到最后的url
    		console.log('navigationEnd',event); 
    		this.currentUrl = event.url;
    	}
    })
  }

  ngOnInit() {}

}

---

动画
需要安装动画库 @angular/animations --save

然后在app.module.ts导入动画模块

在需要引入动画的页面导入动画配置
import { trigger,style,transition,animate,keyframes,query,stagger } from '@angular/animations';
然后在该页面配置

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.scss'],

  // Add this:
  animations: [
    trigger('listStagger', [
      transition('* <=> *', [
        query(
          ':enter',
          [
            style({ opacity: 0, transform: 'translateY(-15px)' }),
            stagger(
              '50ms',
              animate(
                '550ms ease-out',
                style({ opacity: 1, transform: 'translateY(0px)' })
              )
            )
          ],
          { optional: true }
        ),
        query(':leave', animate('50ms', style({ opacity: 0 })), {
          optional: true
        })
      ])
    ])
  ]
})

在html文件中<ul [@listStagger]="users$">

---

补充：我们可以使用npm install -g json-server 建一个假的服务器接口地址
新建一个db.json ,里面写好自己要的json格式，json-server --watch db.json 就可以

Reference:https://coursetro.com/posts/code/154/Angular-6-Tutorial---Learn-Angular-6-in-this-Crash-Course

最后效果图如下