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. Memcached总结四:用ava程序连接memcached进行操作

    1. Memcached的Java环境设置 需要下载spymemcached-2.10.3.jar,并把这个jar放到java程序的classpath中才能使用memcached. 在下面的程序,假设 ...

  2. scrollView的几个属性contentSize contentOffset contentInset

    01-  ontentSize是scrollview可以滚动的区域 比如frame = (0 ,0 ,320 ,480) contentSize = (320 ,960), 代表你的scrollvie ...

  3. TYPEC 接口芯片CC逻辑原理与必要性

    USB Type-C凭借其自身强大的功能,在Apple,Intel,Google等厂商的强势推动下,必将迅速引发一场USB接口的革命,并将积极影响我们日常生活的方方面面.为了能够使自己的设备兼容这些接 ...

  4. MS提供的虚拟机IE测试

    https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/

  5. QT带OpenGL与不带的区别,QT5是一个伟大的框架,短时期内根本不会有替代者

    你好 , 我Qt的初学者 , 我在官网下载Qt时感觉很迷茫 , 不知道要下载哪个, 麻烦你写他们之间的不同点:Qt 5.2.0 for Windows 32-bit (MinGW 4.8, OpenG ...

  6. hdu4499Cannon(搜索)

    链接 这样的叫迭代吗..最近多做些搜索题了要 分行分列搜 判断满足条件 #include <iostream> #include<cstdio> #include<cst ...

  7. hdu4374One hundred layer (DP+单调队列)

    http://acm.hdu.edu.cn/showproblem.php?pid=4374 去年多校的题 今年才做 不知道这一年都干嘛去了.. DP的思路很好想 dp[i][j] = max(dp[ ...

  8. 函数lock_mode_stronger_or_eq 锁权限等级

    row代表lock HashTable的权限 column代表预加锁的权限    ulint lock_mode_stronger_or_eq( /*=====================*/ e ...

  9. CodeForces_#354_Div.2_2016.5.25(A+B+C)

    A 描述:给出一串数,可以互换任意两个数的位置一次,求最大的数和最小的数的最大距离. 分析:找到最大的数和最小的数的位置,求右边的数到左端点的距离和左边的数到右端点的距离. #include < ...

  10. 一个TextView使用不同的颜色

    一个TextView使用不同的颜色: textview中首先需要已经有内容了 public static void ColorFormatTextView(TextView tv,int color, ...