码迷,mamicode.com
首页 > 其他好文 > 详细

[Angular 2] Create Angular 2 Porject with Angular CLI

时间:2016-07-20 06:31:13      阅读:359      评论:0      收藏:0      [点我收藏+]

标签:

Install:

npm i -g angular-cli

 

Create a project:

ng new hello-angular2

 

Run the project:

cd hello-angular2
ng serve

 

Change the port:

ng serve --port 4201 --live-reload-port 49153

 

Create a component:

ng g component contact-list-component

The component will be created in src/app/contact-list-component.

// app.component.ts

import { Component } from @angular/core;
import {ContactListComponentComponent} from "./contact-list-component/contact-list-component.component";

@Component({
  moduleId: module.id,
  selector: app-root,
  templateUrl: app.component.html,
  styleUrls: [app.component.css],
  directives: [ContactListComponentComponent]
})
export class AppComponent {
  title = app works!;
}

 

Generate a child component:

The child component should live inside parent component, for example, we create a contact-detail-component:

cd ./contact-list-component
ng g component ./contact-detail-component

 

//contact-iist-component.ts

import { Component, OnInit } from @angular/core;
import {ContactDetailComponentComponent} from "./contact-detail-component/contact-detail-component.component";

@Component({
  moduleId: module.id,
  directives: [ContactDetailComponentComponent],
  selector: app-contact-list-component,
  templateUrl: contact-list-component.component.html,
  styleUrls: [contact-list-component.component.css]
})
export class ContactListComponentComponent implements OnInit {

  constructor() {}

  ngOnInit() {
  }

}

 

If everything went well, you should see:

技术分享

[Angular 2] Create Angular 2 Porject with Angular CLI

标签:

原文地址:http://www.cnblogs.com/Answer1215/p/5686865.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!