Angular 小试牛刀[1]:Getting Started

2022-06-10 20:21:45

首先，Angular2 与 Angular1.x 版本没有多大关系，甚至可以说是两个完全不一样的框架，故 Angular 指的是 Angular2 及以上的版本。而 Angular 与 TypeScript 的完美结合，对于一个 .NET 开发者来说，实在是找不到不用它的理由了，更多的优势来不及说了，快上车吧。

使用 angular-cli 初始化项目

Angular CLI 是一个用于构建 Angular 项目的命令行界面工具，它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布。

设置开发环境

在开始工作之前，我们必须设置好开发环境。

如果你的机器上还没有 Node.js®和npm，请先安装它们。

请先在终端/控制台窗口中运行命令 node -v 和 npm -v，来验证一下你正在运行 node 6.9.x 和 npm 3.x.x 以上的版本。更老的版本可能会出现错误，最新的版本则没问题。

安装 angular-cli

npm install -g @angular/cli@latest

查看 cli 命令

ng help

生成项目模版

ng new zero-admin-web --style=scss

cd zero-admin-web

ng server --运行

生成模版时常用的一些参数：

--style=scss 指定使用scss，默认使用css
--routing=false 是否生成一个路由模块
--inline-style=false 是否使用内联样式
--inline-template=false 是否使用内联模版

启动开发服务器

进入项目目录，并启动开发服务器

cd zero-admin-web

ng serve --open

默认端口是4200，在浏览器中打开 http://localhost:4200 ，便能看到页面成功加载，并显示 “Welcome to app!”。

并且 ng serve 命令会启动文件的监控，当你修改这些文件时将自动重新编译，并刷新浏览器。而 --open 参数则表示是否自动打开浏览器。

生成发布包

ng build --prod

build 用来生成压缩，优化后的JS，用来部署到生产环境，默认放成在 dist 文件夹下， --prod 用来指定发布环境。

angular-cli常用指令

可以使用ng generate 或者简写形式 ng g 命令来生成Angular组件：

ng generate component my-component1 #生成一个名称为my-component1的组件

使用 ng generate 命令时，会相对于 src/app/ 目录来生成组件，可以在生成的时候指定多级目录。

当然，也支持生成指令，管道，服务，类，接口，模块等，如下所示：

脚手架	用法
Component	`ng g component my-new-component`
Directive	`ng g directive my-new-directive`
Pipe	`ng g pipe my-new-pipe`
Service	`ng g service my-new-service`
Class	`ng g class my-new-class`
Guard	`ng g guard my-new-guard`
Interface	`ng g interface my-new-interface`
Enum	`ng g enum my-new-enum`
Module	`ng g module my-module`

项目结构

先看看项目模版里的文件结构，以及他们都是做什么的：

┌── e2e

│   ├── app.e2e-spec.ts

│   ├── app.po.ts

│   └── tsconfig.e2e.json

├── src

│   ├── app

│   │   ├── app.component.css

│   │   ├── app.component.html

│   │   ├── app.component.spec.ts

│   │   ├── app.component.ts

│   │   └── app.module.ts

│   ├── assets

│   │   └── .gitkeep

│   ├── environments

│   │   ├── environment.prod.ts

│   │   └── environment.ts

│   ├── favicon.ico

│   ├── index.html

│   ├── main.ts

│   ├── polyfills.ts

│   ├── styles.css

│   ├── test.ts

│   ├── tsconfig.app.json

│   ├── tsconfig.spec.json

│   └── typings.d.ts

├── .angular-cli.json

├── .editorconfig

├── .gitignore

├── karma.conf.js

├── package.json

├── protractor.conf.js

├── README.md

├── tsconfig.json

└── tslint.json

e2e/

在 e2e/ 目录中的是端到端（End-to-End）测试代码。它们不在 src/ 下，是因为端到端测试实际上和应用是相互独立的，它只适用于测试我们的应用，这也是为什么它会拥有自己的 tsconfig.e2e.json 文件的原因。

src/

我们的应用代码位于 src 文件夹中。所有的 Angular组件、模板、样式、图片以及应用所需的任何东西都在这个目录下，这个目录之外的文件都是为构建应用提供支持用的。

package.json

这是项目的基本定义文件，所有的基于nodejs的项目都会有一个package.json文件，里面会定义项目名称、版本、依赖的库，以及脚本。

.angular-cli.json

Angular CLI 的配置文件。在这个文件中，可以设置一系列默认值，还可以配置项目编译时要包含哪些文件等。

karma.conf.js

给 Karma 的单元测试配置，当运行 ng test 时会用到它。

protractor.conf.js

给*Protractor** 使用的端到端测试配置文件，当运行 ng e2e 的时候会用到它。

tsconfig.json

TypeScript 编译器的配置，IDE会借助它来为我们提供更好的代码提示，语法检查等。

tslint.json

给 TSLint 和 Codelyzer 用的配置信息，当运行 ng lint 时会用到。 Lint功能可以帮我们保持代码风格的统一。

Angular Material

Material Design，中文名：材料设计语言，是由Google推出的全新的设计语言，谷歌表示，这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。

据谷歌介绍，Material Design基于“真实的触感，灵感源自对纸和墨水的研究，” 能够让用户 “理解那些用于替代真实世界的可视线索”，“而又不违背力学原理”。另外，光线、表面和移动的基本原理是表现对象如何移动、交互和相互关联地存在于空间中的关键。逼真的光影效果可以显示区块间的接缝、划分空间、以及标识移动的部件。更多详细的介绍可以看 Material 的官网 https://material.io。

而 Angular Material 则是由 Angular 团队完全基于 Material 规范，完美实现的一套 Angular2+ UI框架。

安装配置步骤

第一步：安装

使用 npm 安装 Angular Materil 和 Angular CDK

npm install --save @angular/material @angular/cdk

注： CDK是(Component Dev Kit)的缩写，Angular 的组件开发包，用于分离组件开发与 Material 的耦合（目前大多还耦合在一起），以方便使用其它风格的设计来开发组件。

第二步：动画

有一些 Angular Material 组件依赖于 Angular 动画模块，以便能进行一些高级的 transitions。如果你希望使用这些动画，则需要安装 @angular/animations 模块。

npm install --save @angular/animations

导入动画模块

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({

  ...

  imports: [BrowserAnimationsModule],

  ...

})

export class AppModule { }

第三步：导入

导入你想要使用的 Angular Material 模块

import {MdButtonModule, MdCheckboxModule} from '@angular/material';

@NgModule({

  ...

  imports: [MdButtonModule, MdCheckboxModule],

  ...

})

export class AppModule { }

第四步：主题

定制一个主题，所有的组件都将遵循于这个主题。Angular Material 内置了几种主题，我们可以在 style.css 文件中导入：

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

更多主题的介绍以及如何自定义主题，则可以参考 theming guide。

第五步：手势

有些组件，如（md-slide-toggel, md-slider, mdTooltip)等依赖于 HammerJS 而支持手续操作。所以，如果你需要在你的项目中实现手势操作，则需要装 HammerJS 加载进来。

使用 npm 安装：

npm install --save hammerjs

导入到根模块中：

import 'hammerjs';

第六步：图标

如果你想通过 md-icon 组件来使用经典的 Material Design Icons 图标字体，则需要把 material-icons 的字体样式加载进来。

添加 material-icons.css

@font-face {

  font-family: 'Material Icons';

  font-style: normal;

  font-weight: 400;

  src: local('Material Icons'),

    local('MaterialIcons-Regular'),

    url(../fonts/MaterialIcons-Regular.woff2) format('woff2'), /* Super Modern Browsers */

    url(../fonts/MaterialIcons-Regular.woff) format('woff'), /* Super Modern Browsers */

    url(../fonts/MaterialIcons-Regular.ttf) format('truetype'), /* Safari, Android, iOS */

    url(../fonts/MaterialIcons-Regular.svg) format('svg'); /* Legacy iOS */

}

.material-icons {

  font-family: 'Material Icons';

  font-weight: normal;

  font-style: normal;

  font-size: 24px;  /* Preferred icon size */

  display: inline-block;

  line-height: 1;

  text-transform: none;

  letter-spacing: normal;

  word-wrap: normal;

  white-space: nowrap;

  direction: ltr;

  /* Support for all WebKit browsers. */

  -webkit-font-smoothing: antialiased;

  /* Support for Safari and Chrome. */

  text-rendering: optimizeLegibility;

  /* Support for Firefox. */

  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */

  font-feature-settings: 'liga';

}

/* Rules for sizing the icon. */

.material-icons.md-18 { font-size: 18px; }

.material-icons.md-24 { font-size: 24px; }

.material-icons.md-36 { font-size: 36px; }

.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */

.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }

.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */

.material-icons.md-light { color: rgba(255, 255, 255, 1); }

.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

然后在 index.html 中引用 material-icons.css

<!-- Icons -->

<link href="assets/css/material-icons.css" rel="stylesheet">

字体文件下载地址为：material-design-icons。

不过更加推荐的是直接使用 Google 提供的 CDN 服务（现在国内访问速度非常快），只需要在 index.html 中添加如下引用即可：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

总结

本文简单描述了如何使用 angular-cli 初始化项目和 material2 UI框架的配置，比起 webpack 那一大堆配置，angular-cli 则要简洁的多，而 angular-cli 生成的那么多文件，对于新手来说，可能有些还是不太理解，这个在后续会慢慢介绍，不要着急，前期不应过于执着细节，而是要先愉快的跑起来。而下一章则会介绍一下Angular项目的持续集成。

码农公寓