Angular CLI命令

基础命令

npm install –g @angular/cli

npm install -g @angular/[email protected]

新建项目

ng new 项目名称

//示例

ng new angular-hello-word

它将运行一段时间，进行npm依赖的安装，安装成功后我们将看到

Installed packages for tooling via npm.

使用vs code打开刚刚创建项目的文件夹

• 运行应用

ng serve

编译并运行应用，如果一切正常会出现以下信息

如果出现

端口被占用错误，请使用

ng serve --port 4211
//4211为替换默认4200的端口

出现以下消息表示运行成功：

• 制作Component（组件）

执行命令创建组件

ng generate component hello-world

// hello-world为组件名

创建好后：

最基本的组件分为两部分：

1. Component注解
2. 组件定义类

组件代码讲解：

import { Component, OnInit } from ‘@angular/core‘;

// 1.import语句定义了我们写代码时要用到的那些模块。这里导入了Component和OnInit

// 2.我们从"@[email protected]/core"模块中导入了组件 { Component, OnInit } 

// 3."@[email protected]/core"告诉程序到哪里查找这些依赖，新建的这个项目中定"@[email protected]/core"定义并导出了两个js/ts对象，分别是 { Component, OnInit } \]

// 4.OnInit能帮我们在组件的初始话阶段运行某些代码。如属性初始化

引入语法为：

import {things} from wherever

导入依赖后我们还要声明组件：

@Component({
  selector: ‘app-hello-world‘,
  templateUrl: ‘./hello-world.component.html‘,
  styleUrls: [‘./hello-world.component.css‘]
})

//1.我们可以把注解看做是添加到代码上的元数据.挡在hellowerld类上使用@Component时，就把helloworld“装饰”成了一个Component

//2.<app-hello-world>标签表示我们希望在html中使用该组件.要实现它，就得配置@Component并把selector指定为<app-hello-world

//3.在这个组建中我们把templateUrl指定为./hello-world.component.html。意味着我们将从与该组件同目录的hello-world.component.html文件中加载模板

//4.styleUrls 意思为：该组件的样式表

• 加载组件

把<app-hello-world></app-hello-world>标签添加到app.component.html中

原文地址：https://www.cnblogs.com/liying0721/p/8343819.html