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

  1. 首先确认安装了node.js和npm

    // 显示当前node和npm版本
    $ node -v
    $ npm -v
    // node 版本高于6.9.3 npm版本高于3.0.0
  2. 全局安装typescript(可选)
    $ npm install -g typescript
    // 新建项目的时候会自动安装typescript(非全局)所以这里也可以不用安装。
  3. 安装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 安装和使用的更多相关文章

  1. Visual Studio Code作为Angular开发工具常用插件安装、json-server安装与使用、angular/cli安装失败问题

    前提准备: 搭建好Angular开发环境 1 安装Visual Studio Code 教程简单,不会的去问度娘 2 安装Chrome浏览器 教程简单,不会的趣闻度娘 3 Visual Studio ...

  2. Angular CLI 安装

    安装Angular 官网的教程,因为国内网络环境原因,访问不了服务器,导致安装失败. 1.先安装NodeJs 安装教程:http://blog.csdn.net/zengmingen/article/ ...

  3. Angular/cli 安装(windows环境)。

    1.卸载先前安装的Angular/cli npm uninstall -g angular-clinpm uninstall --save-dev angular-clinpm uninstall - ...

  4. [转]Angular CLI 安装和使用

    本文转自:https://www.jianshu.com/p/327d88284abb 一. 背景介绍: 两个概念: 关于Angular版本,Angular官方已经统一命名Angular 1.x统称为 ...

  5. Angular CLI 安装和使用以及安装失败的解决方法

    背景介绍 关于Angular版本,Angular官方已经统一命名Angular 1.x同一为Angular JS:Angular 2.x及以上统称Angular: CLI是Command Line I ...

  6. Angular14 Visual Studio Code作为Angular开发工具常用插件安装、json-server安装与使用、angular/cli安装失败问题、emmet安装

    前提准备: 搭建好Angular开发环境 1 安装Visual Studio Code 教程简单,不会的去问度娘 2 安装Chrome浏览器 教程简单,不会的趣闻度娘 3 Visual Studio ...

  7. Windows 安装Angular CLI

    1.安装nvm npm cnpm nrm(onenote笔记上有记录) 参考:https://blog.csdn.net/tyro_java/article/details/51232458 提示:如 ...

  8. Angular/cli的安装

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

  9. angular cli全局版本大于本地版本 把本地版本升级方式

    查看 angular 版本  ng version 如出现提示 Your global Angular CLI version (xxx) is greater than your local ver ...

随机推荐

  1. gitlab pipelines job执行时日志较大报错

    问题描述 gitlab pipelines job执行时日志较大报错 Job's log exceeded limit of 4194304 bytes. 解决方案 出现该问题主要是因为gitlab ...

  2. C语言文件 "w+"与"wb+"区别

    这是我今天碰到的问题,现在已经解决, 希望我的整理能够帮助到你们! w+以纯文本方式读写,而wb+是以二进制方式进行读写. mode说明: w 打开只写文件,若文件存在则文件长度清为0,即该文件内容会 ...

  3. python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)

    简介 有些 post 的请求参数是 json 格式的,这个前面发送post 请求里面提到过,需要导入 json模块处理.现在企业公司一般常见的接口因为json数据容易处理,所以绝大多数返回数据也是 j ...

  4. 为自己搭建一个分布式 IM(即时通讯) 系统

    前言 大家新年快乐! 新的一年第一篇技术文章希望开个好头,所以元旦三天我也没怎么闲着,希望给大家带来一篇比较感兴趣的干货内容. 老读者应该还记得我在去年国庆节前分享过一篇<设计一个百万级的消息推 ...

  5. 重学前端 --- Promise里的代码为什么比setTimeout先执行?

    首先通过一段代码进入讨论的主题 var r = new Promise(function(resolve, reject){ console.log("a"); resolve() ...

  6. 驰骋工作流引擎 -Webservice接口说明文档

      关键词:工作流引擎接口说明  驰骋工作流接口参数详解 接口 LocalWSI /** * 待办 * @param userNo 用户编号 * @param sysNo 系统编号,为空时返回平台所有 ...

  7. Android studio无法创建类和接口问题解决办法。提示 Unable to parse template "Class"

    重新配置了studio 的工作环境, 没问题,后来加需求要新增java类和接口,这就出现问题了,新建的时候,就会报错: Unable to parse template "Interface ...

  8. SQL 高效运行注意事项(一)

    设计SQL后,应使用explain命令检查SQL,看是否使用到索引,是否存在filesort,重点检查检索的行数(rows)是否太大. 一般来说. 1.rows<1000,是在可接受的范围内的. ...

  9. 关于Python中读取写入文件并进行文件与用户交互的操作

    一.提前知识点 在python中是同样和其他语言一样可以进行文件的读取写入操作,值得注意的是,Python中打开文件读取的方式有几种,分别是以下几种: f = open('username.txt') ...

  10. Nginx反向代理解决iframe跨域问题

    前言 这几天有个需求:做个表单页面,要求后台人员能自定义发布表单,用户来填写表单.我一想,这不麦克表单有现成的吗,拿来就用!发布表单后,可以选择使用iframe方式嵌入网站,一切顺利. 当时的网站是h ...