ng
基础命令

npm install –g @angular/cli

npm install -g @angular/cli@latest
ng serve –prot –aot 启动项目并压缩项目文件
ng build 项目打包命令,也可以加上–prot –aot 

新建项目

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.我们从"@angular@/core"模块中导入了组件 { Component, OnInit } 

// 3."@angular@/core"告诉程序到哪里查找这些依赖,新建的这个项目中定"@angular@/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中

Angular CLI命令的更多相关文章

  1. Angular CLI 命令行工具

    工欲善其事必先利其器.好的工具让开发更加简单便捷. 1.全局安装angular cli npm install -g @angular/cli 2.安装完成后就可以使用angular-cli命令行工具 ...

  2. 有用的 Angular CLI 命令参数

    这是一些有用的 Angular 5 CLI 命令参数,注意参数前面的-和--的不同... 1. 指定build的输出为production version,合并优化css and js files. ...

  3. Angular/cli的安装

    Angular cli 是一个命令行工具,用来创建,打包,发布项目. Angular cli 安装之前必须先安装Node 6.9.0及以上版本,NPM 3 及以上版本. 在cmd控制台窗口执行命令no ...

  4. Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目

    前言: 最近一直在使用阿里的NG-ZORRO(Angular组件库)开发公司后端的管理系统,写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善.因此这篇文章主要是对这段时间 ...

  5. 迈向angularjs2系列(8):angular cli和angular2种子项目

    文章目录 1.angular cli快速搭建项目 2.angular2-seed 3.手动配置 题外话:如何更好的阅读本篇文章 一: angular cli的安装 Angular-cli(命令行界面, ...

  6. angular4.0 安装最新版本的nodejs、npm、@angular/cli的方法

    在使用ng项目的ui框架时,比如ng-zorro.angular Material,需要安装最新版本的@angular/cli: 配置ng-zorro框架 ng-zorro官网:https://ng. ...

  7. 使用Angular CLI生成 Angular 5项目

    如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文. Angular CLI 官网: https://github.com/angular/angular- ...

  8. Angular4---起步----环境配置安装@angular/cli

    学习angular,首先要搭建起angular的手脚架@angular/cli.首先需要NodeJS环境. 1.安装NodeJS 首先检查电脑是否安装了NodeJS环境,打开cmd命令行,运行node ...

  9. 使用Angular CLI进行单元测试和E2E测试

    第一篇文章是: "使用angular cli生成angular5项目" : http://www.cnblogs.com/cgzl/p/8594571.html 第二篇文章是: & ...

随机推荐

  1. 怎么查 ODBC Driver for SQL Server

    1)进入服务器,找到SQL Server 2016 Configuration... ,点进去就好了 2)

  2. python 读csv数据 通过改变分隔符去掉引号

    import csv with open(r'C:\Temp\ff.csv') as f: f_csv=csv.reader(f,delimiter='\t') headers=next(f_csv) ...

  3. hibernate二级缓存ehcache hibernate配置详解

    <!-----------------hibernate二级缓存ehcache------------------------->hibernate配置 <prop key=&quo ...

  4. httpclient get post

    https://www.cnblogs.com/wutongin/p/7778996.html post请求方法和get请求方法 package com.xkeshi.paymentweb.contr ...

  5. subwoofer

    外文名:subwoofer 中文名:重低音音箱 俗    称:低音炮 归    类:音乐器材别    称:重低音音箱 低音炮是大家的一个俗称或者简称,严格讲应该是:重低音音箱.重低音其实是电子音乐里, ...

  6. C#——WebApi 接口参数传参详解

    本篇打算通过get.post.put.delete四种请求方式分别谈谈基础类型(包括int/string/datetime等).实体.数组等类型的参数如何传递. 一.get请求 对于取数据,我们使用最 ...

  7. mysql命令(三)

    创建一个名字为Student库: create database Student; 用以下地命令来查看创建的数据库是否成功: show databases; 进入数据库: use Student; 用 ...

  8. Service_name 和Sid的区别

    Service_name:该参数是由oracle8i引进的.在8i以前,使用SID来表示标识数据库的一个实例,但是在Oracle的并行环境中,一个数据库对应多个实例,这样就需要多个网络服务名,设置繁琐 ...

  9. Spring MVC前传递和后端接收的参数名不一致处理方式

    前端传递的变量和后端接收的变量名字不一致时,用注解@RequestParam来实现数据的传递 例如:@RequestParam(value="id") //实现商品的分类目录展现 ...

  10. Modbus库开发笔记之一:实现功能的基本设计(转)

    源: Modbus库开发笔记之一:实现功能的基本设计