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  --live-reload-port 

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的更多相关文章

  1. Angular 个人深究(一)【Angular中的Typescript 装饰器】

    Angular 个人深究[Angular中的Typescript 装饰器] 最近进入一个新的前端项目,为了能够更好地了解Angular框架,想到要研究底层代码. 注:本人前端小白一枚,文章旨在记录自己 ...

  2. 从Java角度理解Angular之入门篇:npm, yarn, Angular CLI

    本系列从Java程序员的角度,带大家理解前端Angular框架. 本文重点介绍Angular的开发.编译工具:npm, yarn, Angular CLI,它们就像Java在中的Maven,同时顺便介 ...

  3. (转载)从Java角度理解Angular之入门篇:npm, yarn, Angular CLI

    本系列从Java程序员的角度,带大家理解前端Angular框架. 本文是入门篇.笔者认为亲自动手写代码做实验,是最有效最扎实的学习途径,而搭建开发环境是学习一门新技术最需要先学会的技能,是入门的前提. ...

  4. angular.module()创建、获取、注册angular中的模块

    // 传递参数不止一个,代表新建模块;空数组代表该模块不依赖其他模块 var createModule = angular.module("myModule", []); // 只 ...

  5. [Angular 2] Create Shareable Angular 2 Components

    Components that you use across multiple applications need to follow a module pattern that keeps them ...

  6. [Angular Directive] Create a Template Storage Service in Angular 2

    You need to define a <template> to be able to use it elsewhere in your app as a TemplateRef. Y ...

  7. [Angular 2] Create template with Params

    Angular 2 templates have a special let syntax that allows you to define and pass a context when they ...

  8. [Angular 2] Create a simple search Pipe

    This lesson shows you how to create a component and pass its properties as it updates into a Pipe to ...

  9. [Angular 2] Order Dynamic Components Inside an Angular 2 ViewContainer

    By default, when you generate components, they will simply be added to the page in order, one after ...

随机推荐

  1. http://blog.csdn.net/carolzhang8406/article/details/7196011

    http://blog.csdn.net/carolzhang8406/article/details/7196011

  2. UVA 515 King

    差分约束系统的第一个题目,看了落花大神的博客后,对差分约束有了一定了解,关键在于建图,然后就是判断是否存在负权回路. 关于差分约束系统的解释详见维基百科:http://zh.wikipedia.org ...

  3. HTML控件ID和NAME属性的区别,以及如何在asp.net页面的.CS文件中获得.ASPX页面中HTML控件的值

    在html中:name指的是用户名称,ID指的是用户注册是系统自动分配给用户的一个序列号. name是用来提交数据的,提供给表单用,可以重复: id则针对文档操作时候用,不能重复.如:document ...

  4. Altium Designer学习: 允许闭合回路

    使用AltiumDesigner画PCB时,顶层和底层都有电源线走 但是通过过孔链接的,主要是因为我这里可使用了几个相同的电源接口,把这些上下层的电源接口连在一起就很容易画出闭合回路,这自身没有太大的 ...

  5. YII AR查询方法

    ActiveRecord类文档:http://www.yiiframework.com/doc/guide/1.1/en/database.ar 对于一个Model Post 有如下的4中查询方法,返 ...

  6. function(a)

    问题:  问个初级的问题int a = 8;function(a);这里在function中的a值是引用a内存中的数据,还是新开辟内存后将a的值赋值到新内存供函数调用.  回答: int a = 8; ...

  7. Android 线程优先级

    对于Android平台上的线程优先级设置来说可以处理很多并发线程的阻塞问题,比如很多无关紧要的线程会占用大量的CPU时间,虽然通过了MultiThread来解决慢速I/O但是合理分配优先级对于并发编程 ...

  8. NOIP 2015 子串

    借鉴大神思路... #include<cstdio> #include<cstring> #include<cstdlib> #include<iostrea ...

  9. LA4329 Ping pong 树状数组

    题意:一条大街上住着n个乒乓球爱好者,经常组织比赛切磋技术.每个人都有一个能力值a[i].每场比赛需要三个人:两名选手,一名裁判.他们有个奇怪的约定,裁判必须住在两名选手之间,而裁判的能力值也必须在两 ...

  10. Jquery Ajax的时候 老是返回到 error,是因为json格式不正规的原因

    Jquery Ajax的时候 老是返回到 error,是因为json格式不正规的原因: 怪不得不执行,原来我返回的是{success:true,id:1} 这种不规则的字符串,不是严格的json格式, ...