Angular CLI命令
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为组件名创建好后:
最基本的组件分为两部分:
- Component注解
- 组件定义类
组件代码讲解:
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命令的更多相关文章
- Angular CLI 命令行工具
工欲善其事必先利其器.好的工具让开发更加简单便捷. 1.全局安装angular cli npm install -g @angular/cli 2.安装完成后就可以使用angular-cli命令行工具 ...
- 有用的 Angular CLI 命令参数
这是一些有用的 Angular 5 CLI 命令参数,注意参数前面的-和--的不同... 1. 指定build的输出为production version,合并优化css and js files. ...
- Angular/cli的安装
Angular cli 是一个命令行工具,用来创建,打包,发布项目. Angular cli 安装之前必须先安装Node 6.9.0及以上版本,NPM 3 及以上版本. 在cmd控制台窗口执行命令no ...
- Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目
前言: 最近一直在使用阿里的NG-ZORRO(Angular组件库)开发公司后端的管理系统,写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善.因此这篇文章主要是对这段时间 ...
- 迈向angularjs2系列(8):angular cli和angular2种子项目
文章目录 1.angular cli快速搭建项目 2.angular2-seed 3.手动配置 题外话:如何更好的阅读本篇文章 一: angular cli的安装 Angular-cli(命令行界面, ...
- angular4.0 安装最新版本的nodejs、npm、@angular/cli的方法
在使用ng项目的ui框架时,比如ng-zorro.angular Material,需要安装最新版本的@angular/cli: 配置ng-zorro框架 ng-zorro官网:https://ng. ...
- 使用Angular CLI生成 Angular 5项目
如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文. Angular CLI 官网: https://github.com/angular/angular- ...
- Angular4---起步----环境配置安装@angular/cli
学习angular,首先要搭建起angular的手脚架@angular/cli.首先需要NodeJS环境. 1.安装NodeJS 首先检查电脑是否安装了NodeJS环境,打开cmd命令行,运行node ...
- 使用Angular CLI进行单元测试和E2E测试
第一篇文章是: "使用angular cli生成angular5项目" : http://www.cnblogs.com/cgzl/p/8594571.html 第二篇文章是: & ...
随机推荐
- 实现Winform 跨线程安全访问UI控件
在多线程操作WinForm窗体上的控件时,出现“线程间操作无效:从不是创建控件XXXX的线程访问它”,那是因为默认情况下,在Windows应用程序中,.NET Framework不允许在一个线程中直接 ...
- golang学习笔记8 beego参数配置 打包linux命令
golang学习笔记8 beego参数配置 打包linux命令 参数配置 - beego: 简约 & 强大并存的 Go 应用框架https://beego.me/docs/mvc/contro ...
- Nginx rewrite(重写)
Nginx Rewrite规则相关指令 Nginx Rewrite规则相关指令有if.rewrite.set.return.break等,其中rewrite是最关键的指令.一个简单的Nginx Re ...
- Hybrid App中原生页面 VS H5页面(分享)
本文部分转自 http://www.jianshu.com/p/00ff5664e000 现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有“混合的” ...
- 理解Sql Server 事务隔离层级(Transaction Isolation Level)
关于Sql Server 事务隔离级别,百度百科是这样描述的 隔离级别:一个事务必须与由其他事务进行的资源或数据更改相隔离的程度.隔离级别从允许的并发副作用(例如,脏读或虚拟读取)的角度进行描述. 隔 ...
- 数据分析之pandas01
Series 一.Series Series是一种类似于一维数组的对象,有两部分组成: .values:一组数据(ndarray类型) .index: 相关的数据索引标签 二.seri ...
- OL6.3 设置本地yum源
仅在 Oracle Linux Server release 6.3 上测试 PS:Oracle Linux Server release 6.3仅用于测试,不能用于商业用途 [root@oracle ...
- Linux 搭建安装Maven环境
1.前提条件: 1)下载并安装好JDK .在终端输入命令“java -version”,如果出现类似如下信息说明JDK安装成功. $ java -version java version " ...
- Mac配置java运行环境的步骤
官网下载地址:jdk1.8版本的 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.htm ...
- Program terminated with signal 6, Aborted,有可能啥原因呢?
Program terminated with signal 6, Aborted,有可能啥原因呢?其中一种原因就是事实上的OOM(虽然/var/log/message中没有标明操作系统kill了进行 ...