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 第二篇文章是: & ...
随机推荐
- 怎么查 ODBC Driver for SQL Server
1)进入服务器,找到SQL Server 2016 Configuration... ,点进去就好了 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) ...
- hibernate二级缓存ehcache hibernate配置详解
<!-----------------hibernate二级缓存ehcache------------------------->hibernate配置 <prop key=&quo ...
- httpclient get post
https://www.cnblogs.com/wutongin/p/7778996.html post请求方法和get请求方法 package com.xkeshi.paymentweb.contr ...
- subwoofer
外文名:subwoofer 中文名:重低音音箱 俗 称:低音炮 归 类:音乐器材别 称:重低音音箱 低音炮是大家的一个俗称或者简称,严格讲应该是:重低音音箱.重低音其实是电子音乐里, ...
- C#——WebApi 接口参数传参详解
本篇打算通过get.post.put.delete四种请求方式分别谈谈基础类型(包括int/string/datetime等).实体.数组等类型的参数如何传递. 一.get请求 对于取数据,我们使用最 ...
- mysql命令(三)
创建一个名字为Student库: create database Student; 用以下地命令来查看创建的数据库是否成功: show databases; 进入数据库: use Student; 用 ...
- Service_name 和Sid的区别
Service_name:该参数是由oracle8i引进的.在8i以前,使用SID来表示标识数据库的一个实例,但是在Oracle的并行环境中,一个数据库对应多个实例,这样就需要多个网络服务名,设置繁琐 ...
- Spring MVC前传递和后端接收的参数名不一致处理方式
前端传递的变量和后端接收的变量名字不一致时,用注解@RequestParam来实现数据的传递 例如:@RequestParam(value="id") //实现商品的分类目录展现 ...
- Modbus库开发笔记之一:实现功能的基本设计(转)
源: Modbus库开发笔记之一:实现功能的基本设计