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. [状压dp]HDU5045 Contest

    题意: n和人做m道题, 每俩人做的题数不能相差一题以上.(也就是每n道题分别由n个人完成)   给n个人分别做m道题的概率, 求完成m题的最大期望 $1\le N \le 10$ 注意!!! fil ...

  2. 《ArcGIS Engine+C#实例开发教程》第六讲 右键菜单添加与实现

    原文:<ArcGIS Engine+C#实例开发教程>第六讲 右键菜单添加与实现 摘要:在这一讲中,大家将实现TOCControl控件和主地图控件的右键菜单.在AE开发中,右键菜单有两种实 ...

  3. 解决win8.1右键菜单出现在左边

    这个问题估计很少有人遇到,当在桌面上单击鼠标右键时,如果正常情况下,应该是在鼠标光标的右侧弹出来,除非右边的空间不够了,才在左侧弹出.但遇到故障,就是不论在桌面的哪里点右键,菜单都在左侧弹出,虽然不影 ...

  4. Android 开发绕不过的坑:你的 Bitmap 究竟占多大内存?

    0.写在前面 本文涉及到屏幕密度的讨论,这里先要搞清楚 DisplayMetrics 的两个变量,摘录官方文档的解释: density:The logical density of the displ ...

  5. [译]GotW #89 Smart Pointers

    There's a lot to love about standard smart pointers in general, and unique_ptr in particular. Proble ...

  6. Android开发之PendingIntent的使用

    PendingIntent,待确定的意图,等待的意图 官网链接:http://developer.android.com/reference/android/app/PendingIntent.htm ...

  7. Innodb加载数据字典 && flush tables

    测试了两个case,属于之前blog的遗留问题: innodb如何加载数据字典 flush tables都做了什么操作 先来看下innodb加载数据字典: 首次使用:select * from tt; ...

  8. 获取Mac、CPUID、硬盘序列号、本地IP地址、外网IP地址OCX控件

    提供获取Mac.CPUID.硬盘序列号.本地IP地址.外网IP地址OCX控件 开发语言:vc++ 可应用与WEB程序开发应用 <HTML><HEAD><TITLE> ...

  9. [Uva 11825] Hackers’ Crackdown

    Hackers’ Crackdown  Input: Standard Input Output: Standard Output   Miracle Corporations has a numbe ...

  10. javascript中的 && 与 || 的运用

    a && b : 将a, b转换为Boolean类型, 再执行逻辑与, true返回b, false返回a a || b : 将a, b转换为Boolean类型, 再执行逻辑或, tr ...