Angular CLI 安装和使用
1、背景介绍
关于Angular版本,Angular官方已经统一命名Angular 1.x同一为Angular JS;Angular 2.x及以上统称Angular;
CLI是Command Line Interface的简写,是一种命令行接口,实现自动化开发流程,比如:ionic cli、vue cli等;它可以创建项目、添加文件以及执行一大堆开发任务,比如测试、打包和发布。
官方文档:https://angular.io
官方文档:https://angular.io/guide/quickstart
GitHub:https://github.com/angular/angular-cli
Angular Material:https://material.angular.io/
2、安装Angular CLI
- 首先确认安装了node.js和npm
// 显示当前node和npm版本
$ node -v
$ npm -v
// node 版本高于6.9.3 npm版本高于3.0.0 - 全局安装typescript(可选)
$ npm install -g typescript
// 新建项目的时候会自动安装typescript(非全局)所以这里也可以不用安装。 - 安装Angular CLI
$ npm install -g @angular/cli
经过不算漫长的等待,你的Angular CLI就装好了。确认一下:
$ ng v // 出现下面画面说明安装成功,如果不成功你可能需要uninstall一下,再重新来过
$ ng v
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
@angular/cli: 1.1.1
node: 7.10.0
os: darwin x64
3、新建Angular项目
$ ng new my-app
这里要等很久啊,大概要下载141M东西。
如果你已经建好了项目文件夹就可以使用ng init my-app来新建项目,ng init和ng new的区别是ng new会帮我们创建一个和项目名称相同的文件夹。
趁着它在下载,来看一下运行ng new之后Angular cli已经帮我们干了什么:
$ ng new helloKeriy
installing ng
create .editorconfig
create README.md
create src/app/app.component.css // 使用HTML模板、CSS样式和单元测试定义AppComponent组件。 它是根组件,随着应用的成长它会成为一棵组件树的根节点。
create src/app/app.component.html
create src/app/app.component.spec.ts
create src/app/app.component.ts // 定义AppModule,这个根模块会告诉Angular如何组装该应用
create src/app/app.module.ts
create src/assets/.gitkeep // 这个文件夹下你可以放图片等任何东西,在构建应用时,它们全都会拷贝到发布包中。
create src/environments/environment.prod.ts
create src/environments/environment.ts
create src/favicon.ico // 每个网站都希望自己在书签栏中能好看一点。 请把它换成你自己的图标。
create src/index.html // 宿主页面
create src/main.ts
create src/polyfills.ts
create src/styles.css // 公共样式
create src/test.ts // 这是单元测试的主要入口点
create src/tsconfig.app.json
create src/tsconfig.spec.json
create src/typings.d.ts
create .angular-cli.json // Anguar 编译依赖
create e2e/app.e2e-spec.ts // e2e 端对端测试目录
create e2e/app.po.ts
create e2e/tsconfig.e2e.json
create .gitignore
create karma.conf.js
create package.json // Angular 的依赖包
create protractor.conf.js
create tsconfig.json // TypeScript 编译器的参数
create tslint.json
Successfully initialized git.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Project 'helloKeriy' successfully created.
这里强烈推荐使用淘宝镜像安装:
$ ng new helloKeriy --skip-install // 先跳过npm安装
$ cd helloKeriy
$ cnpm install // 使用淘宝源安装
4、成果展示
安装完成之后就可以启动项目了:
cd helloKeriy
ng serve -open
ng serve命令会启动开发服务器,监听文件变化,并在修改这些文件时重新构建此应用。
使用--open(或-o)参数可以自动打开浏览器并访问http://localhost:4200/。
接下来你将看到:
5、安装Angular Material
5.1、安装
官方安装说明:https://material.angular.io/guide/getting-started
npm install --save @angular/material @angular/cdk @angular/animations
然后执行修复
npm audit fix
5.2、配置animations
将BrowserAnimationsModule导入应用程序以启用动画支持。
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; @NgModule({
...
imports: [BrowserAnimationsModule],
...
})
export class PizzaPartyAppModule { }
示例:打开app.module.ts并修改:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AppComponent } from './app.component'; @NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
5.3、导入组件模块(component modules)
import {MatButtonModule, MatCheckboxModule} from '@angular/material'; @NgModule({
...
imports: [MatButtonModule, MatCheckboxModule],
...
})
export class PizzaPartyAppModule { }
示例:打开app.module.ts并修改:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatButtonModule, MatCheckboxModule} from '@angular/material'; import { AppComponent } from './app.component'; @NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatButtonModule,
MatCheckboxModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
5.4、添加主题
包含主题是将所有核心和主题样式应用于您的应用程序所必需的。要开始使用预先构建的主题,请在应用程序中全局包含Angular Material的预构建主题之一。如果您正在使用Angular CLI,则可以将其添加到styles.css中。
如果您不使用Angular CLI,则可以通过 index.html 中的<link>元素包含预构建的主题。有关主题的更多信息以及有关如何创建自定义主题的说明,请参阅主题指南。
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
5.5、添加手势支持(Gesture Support)
npm install --save hammerjs
然后在 src/main.ts 中引入
import 'hammerjs';
5.6、添加图标
如果您想将mat-icon组件与正式的材质设计图标一起使用,请在 index.html 中加载图标字体。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Angular CLI 安装和使用的更多相关文章
- Visual Studio Code作为Angular开发工具常用插件安装、json-server安装与使用、angular/cli安装失败问题
前提准备: 搭建好Angular开发环境 1 安装Visual Studio Code 教程简单,不会的去问度娘 2 安装Chrome浏览器 教程简单,不会的趣闻度娘 3 Visual Studio ...
- Angular CLI 安装
安装Angular 官网的教程,因为国内网络环境原因,访问不了服务器,导致安装失败. 1.先安装NodeJs 安装教程:http://blog.csdn.net/zengmingen/article/ ...
- Angular/cli 安装(windows环境)。
1.卸载先前安装的Angular/cli npm uninstall -g angular-clinpm uninstall --save-dev angular-clinpm uninstall - ...
- [转]Angular CLI 安装和使用
本文转自:https://www.jianshu.com/p/327d88284abb 一. 背景介绍: 两个概念: 关于Angular版本,Angular官方已经统一命名Angular 1.x统称为 ...
- Angular CLI 安装和使用以及安装失败的解决方法
背景介绍 关于Angular版本,Angular官方已经统一命名Angular 1.x同一为Angular JS:Angular 2.x及以上统称Angular: CLI是Command Line I ...
- Angular14 Visual Studio Code作为Angular开发工具常用插件安装、json-server安装与使用、angular/cli安装失败问题、emmet安装
前提准备: 搭建好Angular开发环境 1 安装Visual Studio Code 教程简单,不会的去问度娘 2 安装Chrome浏览器 教程简单,不会的趣闻度娘 3 Visual Studio ...
- Windows 安装Angular CLI
1.安装nvm npm cnpm nrm(onenote笔记上有记录) 参考:https://blog.csdn.net/tyro_java/article/details/51232458 提示:如 ...
- Angular/cli的安装
Angular cli 是一个命令行工具,用来创建,打包,发布项目. Angular cli 安装之前必须先安装Node 6.9.0及以上版本,NPM 3 及以上版本. 在cmd控制台窗口执行命令no ...
- angular cli全局版本大于本地版本 把本地版本升级方式
查看 angular 版本 ng version 如出现提示 Your global Angular CLI version (xxx) is greater than your local ver ...
随机推荐
- Grafana简单使用
下载安装 Grafana也是用GO语言写的,无任何依赖,安装非常简单. 启动 sudo service grafana-server start 运行 直接访问:http://your_ip:3000 ...
- Spring中bean的注入方式
首先,要学习Spring中的Bean的注入方式,就要先了解什么是依赖注入.依赖注入是指:让调用类对某一接口的实现类的实现类的依赖关系由第三方注入,以此来消除调用类对某一接口实现类的依赖. Spring ...
- python 安装cv2
问题描述:import cv2 报错提示未安装此包. 解决措施: 1.cmd框中输入pip install cv2,若安装成功,则恭喜你一次性成功,如提示"无法找到与你当前版本的匹配&quo ...
- koa+mysql+vue+socket.io全栈开发之web api篇
目标是建立一个 web QQ的项目,使用的技术栈如下: 后端是基于koa2 的 web api 服务层,提供curd操作的http接口,登录验证使用的是 json web token,跨域方案使用的是 ...
- Supervisor守护DotNet Core控制台程序
Supervisor 相信对Linux系统很熟的都知道这个软件,基于Python写的一个守护进程软件.具体的介绍和使用我就不再赘述了. 使用asp.net core 部署在Linux常用的方法 我们可 ...
- SQL中关于Join、Inner Join、Left Join、Right Join、Full Join、On、 Where区别
前言: 今天主要的内容是要讲解SQL中关于Join.Inner Join.Left Join.Right Join.Full Join.On. Where区别和用法,不用我说其实前面的这些基本SQL语 ...
- Python中使用面状矢量裁剪栅格影像,并依据Value值更改矢量属性
本文整体思路:在Python中使用Geopandas库,依次读取shp文件的每一个面状要素,获取其空间边界信息并裁剪对应的栅格影像,计算所裁剪影像Value值的众数,将其设置为对应面状要素的NewTY ...
- 《HelloGitHub》第 35 期
<HelloGitHub>第 35 期 兴趣是最好的老师,HelloGitHub 就是帮你找到兴趣! 简介 分享 GitHub 上有趣.入门级的开源项目. 这是一个面向编程新手.热爱编程. ...
- WebGL three.js学习笔记 创建three.js代码的基本框架
WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...
- 那些年我们一起踩过的Dubbo"坑"
前言 微服务架构在如今的9102年已经不是什么新鲜的话题了,但是怎么做好微服务架构,却又是一个永恒的话题.比如服务粒度的划分,怎么控制好粗细?服务划分后,对于项目的部署会有什么改变?... 这会是一 ...