Angular 4 快速入门 笔记

https://segmentfault.com/a/1190000009733649

技术文章写的很标准，基本概念分节介绍，每节都有step,都有例子，后面例子base前面例子，最后汇总成一个大例子.

下面是划重点.

第三节 - 插值表达式 //类中定义的变量，通过{{}}在html中直接使用
在 Angular 中，我们可以使用 {{}} 插值语法实现数据绑定。

值得一提的是，我们可以使用 Angular 内置的 json 管道，来显示对象信息：

@Component({//it is Component
  selector: 'my-app',//selector is template container
  template: `
    ...
    <p>{{address | json}}</p>
  `,})
export class AppComponent {
  name = 'Semlinker';
  address = {
    province: '福建',city: '厦门'
  }
}

第四节 - 自定义组件

自定义组件示例
创建 UserComponent 组件
export class UserComponent {
    name = 'Semlinker';
    address = {
        province: '福建',city: '厦门'
    };
}
声明 UserComponent 组件
declarations: [ AppComponent,UserComponent]@NgModule({
  declarations: [ AppComponent,UserComponent] 
})使用 UserComponent 组件 //<sl-user> 是自定义控件UserComponent的selector.
等于在另一个文件使用UserComponent
template: `
    <sl-user></sl-user>
  `
使用构造函数初始化数据  //组件当成类，对类进行操作
constructor() {
        this.name = 'Semlinker';
        this.address = {
            province: '福建',city: '厦门'
        }
    }

第六节 - 事件绑定
在 Angular 中，我们可以通过 (eventName) 的语法，实现事件绑定。
<date-picker (dateChanged)="statement()"></date-picker>
等价于
<date-picker on-dateChanged="statement()"></date-picker>
第九节 - 注入服务
和第四节的，自定义组件，比较类似，一个类使用另一个类. 网页通常一个类对应一个网页.

创建 MemberService 服务
@Injectable()//it is Injectable
export class MemberService {
    constructor(private http: Http) { }
    getMembers() {
        return this.http
            .get(`https://api.github.com/orgs/angular/members?page=1&per_page=5`)
            .map(res => res.json()) //将结果转成任何类型，本例转成json类型
    }
}
配置 MemberService 服务
@NgModule({
  providers:[MemberService] //同比自定义Component。Component is  declarations: [ AppComponent,UserComponent]
})
使用 MemberService 服务
        this.memberService.getMembers()//调用http.get
            .subscribe(data => {//订阅http.get
                if (data) this.members = data;
            });

第十节 - 路由模块简介
配置路由信息

export const ROUTES: Routes = [
  { path: 'user',component: UserComponent }
];
@NgModule({
  imports: [BrowserModule,FormsModule,HttpModule,RouterModule.forRoot(ROUTES)],// ...
})

配置路由导航

@Component({
  selector: 'my-app',template: `
    <div class="app">
      <nav>
        <a routerLink="/user">我的</a>
        <a routerLink="/members">Angular成员</a>
      </nav>
    </div>
  `,})

类似公司项目
dashboard.html: //导航页
<div <a class="hyperlink" routerLink="/security/global-security">{{ "GLOBAL_SECURITY_NAV" | translation }}</a></div>
app-routing.modules.ts //内部路由

export const appRoutes: Routes = [
 {
        path: 'security',children: [
            {path: 'global-security',component: GlobalSecurityPage,canActivate: [ConferencingGuard]},]
  }
]

global-security.ts //ts实现网页 @Component({ template: ` ... ` }) export class GlobalSecurityPage implements OnInit,OnDestroy { ... }