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. VirtualDub - 开源视频捕捉及线性处理软件

    VirtualDub是一个开放源代码的视频捕捉及线性处理软件.它由Avery Lee编写,遵循GPL协议.VirtualDub可以通过摄像头捕捉视频. 官方网站http://virtualdub.or ...

  2. SQL Server系统表和常用函数(转)

    sysaltfiles 主数据库 保存数据库的文件 syscharsets 主数据库 字符集与排序顺序sysconfigures 主数据库 配置选项syscurconfigs 主数据库 当前配置选项s ...

  3. Form.KeyPreview 属性

    Form.KeyPreview 属性 今天再做KeyDown 和 KeyUp 事件时,就是忘了设置,窗体的KeyPreview 属性,所以KeyDown 和 KeyUp 事件没有反应(这里说明一下,本 ...

  4. spring的事件机制

    事件机制作为一种编程机制,在许多语言中都提供了支持.JAVA语言也不例外,java中的事件机制的参与者有3种角色: 1.event object 2.event source 3.event list ...

  5. 转自 void- man 差分约束系统详解

    一直不知道差分约束是什么类型题目,最近在写最短路问题就顺带看了下,原来就是给出一些形如x-y<=b不等式的约束,问你是否满足有解的问题 好神奇的是这类问题竟然可以转换成图论里的最短路径问题,下面 ...

  6. MCI音乐播放

    缘由: 在改正俄罗斯方块程序的功能的时候,想给这个程序增加一个背景音乐.本想用PlayWave来做的,但想到这个功能十分常用,那还不如封装一个自己的CMusic 类,以备不时之需.本来以为很容易的,可 ...

  7. ruby2.2.2在msvc2010上编译

    ruby2.2.2在msvc2010上编译有些问题,主要是msvc2010不支持c99,ruby有些扩展源代码例如ffi.c局部变量没有在block的起始位置定义,导致编译器报错. 办法 1.用支持c ...

  8. apache开源项目--ibatis

    iBATIS一词来源于“internet”和“abatis”的组合,是一个由Clinton Begin在2001年发起的开放源代码项目.最初侧重于密码软件的开发,现在是一个基于Java的持久层框架.i ...

  9. 关于ButterKnife 8.1.0使用遇到的问题

    ButterKnife注解方式 和eventbus 差不多 都很好用 @OnClick(R.id.button) void onButtonClick() { //TODO implement Toa ...

  10. c# 中Intern的作用

    1. 函数如下 public static string Intern(string str) { if(str == null) { throw new ArgumentNullException( ...