ng new project-name --style=scss --routing初始化工程文件之后，如果运行ng serve -o会出现如下错误:
ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Cannot find module 'node-sass'
at Function.Module._resolveFilename (module.js:548:15)
at Function.Module._load (module.js:475:25)
at Module.require (module.js:597:17)
at require (internal/module.js:11:18)
at Object.sassLoader (/home/local/BROCELIA/zhli/WebstormProjects/ng6-project/node_modules/sass-loader/lib/loader.js:46:72)
ℹ ｢wdm｣: Failed to compile.
复制代码因为缺少依赖包：node-sass，但是只用sudo npm install node-sass是行不通的，需要使用：sudo npm install --save-dev --unsafe-perm node-sass才可以正常安装这个依赖包。
- 如果使用
sudo初始化工程文件，文件夹会被锁定，导致webstorm无法获取权限无法编辑文本，所以在terminal中使用sudo chmod 777 ng6-project来给文件夹赋予所有权限，然后使用sudo chown -R zhli /home/local/BROCELIA/zhli/WebstormProjects来给父文件夹赋予权限，此时就可以正常编辑文件了。 - 在
Angular工程中使用Material icons时候，先在src/index.html的<head>中添加依赖：
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,700" rel="stylesheet">
复制代码然后使用引用模板：<i class="material-icons">account_circle</i>即可，如果图片没有刷新，尝试sudo npm install material-design-icons 然后 ng -serve -o重启服务器。
- 依赖安装指令集合：
// 动画依赖
sudo npm install @angular/animations@latest --save
// Material icons
sudo npm install material-design-icons
复制代码- 创建组件指令集合：
// 创建新组件
ng generate component details
// Request API 服务
ng generate service data
复制代码- Angular 动画：
在app.module,ts中引用import {BrowserAnimationsModule} from '@angular/platform-browser/animations';并在import中添加BrowserAnimationsModule。 然后在component中添加依赖import {trigger, style, transition, animate, keyframes, query, stagger} from '@angular/animations';并在@component标识符中定义动画。
animations: [
trigger('listStagger', [
transition('* <=> *', [
query(
':enter',
[
style({ opacity: 0, transform: 'translateY(-15px)' }),
stagger(
'50ms',
animate(
'550ms ease-out',
// animate ('duration delay easing')
style({ opacity: 1, transform: 'translateY(0px)' })
)
)
],
{ optional: true }
),
query(':leave', animate('50ms', style({ opacity: 0 })), {
optional: true
})
])
])
复制代码其中：
- Trigger用来触发动画
- transition用来定义状态的转换:
open => close,close => open,* => open,* => close,close => *,open => *,void => *,':enter',':leave' - style用来定义样式，对应不同的state，也定义在不同的state中。样式的名称要用驼峰法命名：
camelCase
state('open', style({
height: '200px',
opacity: 1,
backgroundColor: 'yellow'
})),
复制代码- animate就是动画的定义
transition('open => closed', [
animate('1s')
]),
复制代码- query()用于在已经定义了动画的元素内部定义其他的动画,
This function targets specific HTML elements within a parent component and applies animations to each element individually - tagger()用于在不同的动画之间定义timing gap,在不同的animation之间增加动画延迟
- 引用时，使用@来引用动画Trigger的名称:
<div [@triggerName]="expression">...</div>;
- Routing: 路由详细教程
- 在向app.module.ts中添加HttpClientModule和DataService依赖时，HttpClientModule添加在import中，DataService添加在providers中：
import { HttpClientModule } from '@angular/common/http';
import { DataService } from './data.service';
@NgModule({
declarations: [
AppComponent
],
imports: [
/**....**/
HttpClientModule,
],
providers: [DataService],
bootstrap: [AppComponent]
})
复制代码-
Angular支持数据双向绑定：
[hero]="selectedHero"）。用户的修改通过事件绑定流回组件，把属性值设置为最新的值（(click)="selectHero(hero)"）。 -
template 内联模板的书写：包在 ECMAScript 2015 反引号 (`) 中的一个多行字符串。 反引号 (`) — 注意，不是单引号 (') — 允许把一个字符串写在多行上， 使 HTML 模板更容易阅读。
template: `
<h1>{{title}}</h1>
<h2>My favorite hero is: {{myHero}}</h2>
`
复制代码使用模板可以不用再编写模板文件（按照需求）：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h1>{{title}}</h1>
<h2>My favorite hero is: {{myHero}}</h2>
`
})
export class AppComponent {
title = 'Tour of Heroes';
myHero = 'Windstorm';
}
复制代码- 数据类的创建：
- 创建数据类：
ng generate class data - 构造属性：
export class Data { constructor( public id: number, public name: string) { } } 复制代码 - 在app.component.ts中导入data数据类之后就可以在属性中返回类型化的对象数组了：
dataa = [ new Data(1, 'Windstorm'), new Data(13, 'Bombasto'), new Data(15, 'Magneta'), new Data(20, 'Tornado') ]; myData = this.dataa[0]; 复制代码
- 语句上下文的互相引用：
<button (click)="onSave($event)">Save</button>
<button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{hero.name}}</button>
<form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>
复制代码模板上下文中的变量名的优先级高于组件上下文中的变量名,也就是说上面的 deleteHero(hero) 中，hero 是一个模板输入变量，而不是组件中的 hero 属性