Angular2 从搭建环境到开发

最新推荐文章于 2023-04-18 11:35:11 发布

I-T枭

最新推荐文章于 2023-04-18 11:35:11 发布

阅读量1.9k

点赞数

文章标签： angular2-cli

Angular2 的发布带来了一阵热议，很久之前就在筹备了，当时的官方答复就是彻底推翻重写，问世之后大家的呼声就是学习成本太高，虽然去掉了 1.x 里的一部分概念，但是加进了 typescript，虽然不强制使用，但是我推荐大家都试一试，毕竟此次改版是谷歌和微软两大家的产物。

对于会部署环境的可以尝试本文最后一节加入 Angular material2 ，个人认为对高度个性化的项目不推荐使用，对企业级的 CMS 省去了写样式的时间，直接开始正文。

Angular-CLI

说到 cli 大家不陌生，没出一个框架都会有对应的 cli ，俗称脚手架。angular2 本身提供了起步项目 angular2-quickstart，我尝试了一下，发现不是很好用，其它的大部分扩展需要自行安装，之后看了一下 angular-cli 部署简单易用，还提供了快捷搭建项目的目录。

Github地址： https://github.com/angular/an...

我就简单说下 Github 里的文档吧，细部的大家扩展阅读。

安装

首先，最好先升级 node 到 6.x 可以避免 node 版本过低带来的不必要的麻烦。

npm install -g angular-cli

用法

ng --help

查看所有用法

创建本地开发环境生成和运行angular2项目

@@使用Angular-cli搭建开发环境

 ng new projectName

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

PROJECT_NAME 是你自己的项目名

然后脚手架会帮我们搭建初始环境，由于初始化的时候Angualr-cli会去初始化node-modules依赖，所以会比较慢；如果没有切换淘宝镜像，那不是一般的慢
　　


　　最终安装好了是这样的

　　5.　　运行Angular

　　这个时候整个Angular2已经搭建好了，命令行进入进入刚才的工程目录，输入

　　ng serve

　　Angular-cli会编译整个项目，只有打开localhost:4200 （可以切换其他端口，具体参考Angular-cli的使用）就可以看到效果了

　　关于工程目录结构是下面这个样子的

　　结束语：Angular2可以使用javascript,typescript,dart来编写;个人推荐使用typescript来编写。TypeScript最近也发布了2.1版本，我们可以使用可爱的Async/await来编写我们的项目了。Angular2有专门的中文官方网站Angular.cn,上面有对所有的概念的详细的解释，并且有一个完整小项目的教程，很有帮助；还有，我推荐大家使用我写的模式来搭建自己的Angular项目，一方面Angualr-cli是官方出的脚手架（虽然还是beta版），另一方面，你如果自己独立去使用Webpack或者SystemJs又增加了学习难度，项目出错你都不知道是代码错了还是打包的问题！

部署成功后不报错的情况下到浏览器 http://localhost:4200/，修改项目中文件后会自动部署

您可以配置默认的 HTTP 端口和一个 LiveReload server 用 --，形如：

ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153

生成组件、指令、管道和服务

命令以 ng generate 开头，可以缩写为 ng g，下面给出创建 component 的几种方式。

ng generate component my-new-component
ng g component my-new-component # using the alias

# components support relative path generation
# if in the directory src/app/feature/ and you run
ng g component new-cmp
# your component will be generated in src/app/feature/new-cmp
# but if you were to run
ng g component ../newer-cmp
# your component will be generated in src/app/newer-cmp

下表里是所有的命令：

Scaffold	Usage
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
Interface	ng g interface my-new-interface
Enum	ng g enum my-new-enum
Module	ng g module my-module

创建路由

这里 cli 暂时禁用了创建路由，新的路由生成器即将到来，您可以在这里阅读新路由器的官方文档：https://angular.io/docs/ts/la...

建立一个 build

ng build

会生成到 dist/ 目录下，其它关于测试，配置文件请大家去 Github 仔细阅读，这里只给最基本的搭建流程。

组件实战

看到这你可能已经开始尝试了，创建项目的步骤相信大家参照上文可以轻松解决，这里我先尝试创建一个 component，命令如下。

ng g component nav

这里我创建了一个 nav 组件。执行成功后，后台会自动部署。我们看一下文件目录有什么改变

多了一个叫做 nav 的文件夹，看一看文件目录

我们发现与项目创建时自带的 app component 目录结构相同，内容也大同小异，大家可以尝试去创建一个自己的组件，组件的样式可以去对应的 css 文件中修改。

这时我的 app.module.ts 变成了如下

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { NavComponent } from './nav/nav.component';

@NgModule({
  declarations: [
    AppComponent,
    NavComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这里不难看出全局自动引入了 nav.component 组件。我们现在关心的问题是组件之间的引用和数据传输，这里为了简单起见，只给引入的方法，而数据传输、路由机制这里不做解释大家自行官网。

下面说一下 app 内引入 nav 组件，只需要改变 app.component.html 如下。

<h1 class="title">
  {{title}}
</h1>
<app-nav></app-nav>

这里的 class 在对应的 app.component.css 如下

.title {
  font-size: 100px;
}

这时页面自动刷新字号变大，那么这里的 app-nav 标签从哪里得到的呢？

我们去 nav.component.ts 里看一眼

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css']
})
export class NavComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

这里的 selector: 'app-nav' 说明我们的选择器选择的是 app-nav 标签，同样的可以通过 [app-nav] 选择属性。

注：这里 selector 类似 css 中的选择器，大家也可以根据 1.x 中的 directive 来理解这里的组件

此时页面会呈现成这样

好，到这里简单的组件引用已经实现。

引入 Angular material2

文章开头已经阐述了引入 Angular material2 的优点，用过其它组件样式框架的都明白。

安装命令

npm install --save @angular/material

在 src/app/app.module.ts 中引入框架

import { MaterialModule } from '@angular/material';
// other imports
@NgModule({
  imports: [MaterialModule.forRoot()],
  ...
})
export class PizzaPartyAppModule { }

引入核心和主体风格，较 Angular material 1.x 的改进在于可以选择不同的色系。具体看文档链接：https://github.com/angular/ma...

我们这里用的是 Angular CLI 这里又可以钻空子啦，添加下面一行到 style.css，注意是 src 目录下的文件

@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';

deeppurple-amber 主题颜色是可变的，具体看上文的文档链接。

到这里一直打开控制台（是个好习惯）的朋友会发现类似下面的报错。

client:49 [default] J:\workspace\angular2\ts\epimss\node_modules\@angular2-material\slide-toggle\slide-toggle.d.ts:67:19
Cannot find name 'HammerInput'.

client:49 [default] J:\workspace\angular2\ts\epimss\node_modules\@angular2-material\core\gestures\MdGestureConfig.d.ts:4:39
Cannot find name 'HammerManager'.

文档也给出了解释，因为框架中 md-slide-toggle 和 md-slider 两个组件依赖外部第三方组件 HammerJS 需要额外的配置。

我们不急着用文档给的 npm 或引入 cdn 路径，因为亲测还是会报错，可能我引入方式有误，为了大家少走弯路直接给亲测有效的方法

我们先去命令行工具运行 npm i --save-dev @types/hammerjs

然后编辑 tsconfig.json 文件将 hammerjs 添加到 types 下

"types": [
  "jasmine", "hammerjs"
]

到这里发现页面自动刷新后报错消失了，如果需要字体图标可以在 src/index.html 中引入

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

目前为止，整个 Angular material2 已经整装待发。全部语法看这里：https://github.com/angular/ma...

我们尝试着添加多个按钮组件测试一下，修改 app.component.html 文件，完整代码如下

<h1 class="title">
  {{title}}
</h1>
<app-nav></app-nav>

<button md-button>FLAT</button>
<button md-raised-button>RAISED</button>
<button md-icon-button>
  <md-icon class="md-24">favorite</md-icon>
</button>
<button md-fab>
  <md-icon class="md-24">add</md-icon>
</button>
<button md-mini-fab>
  <md-icon class="md-24">add</md-icon>
</button>
<br/>
<br/>

<button md-raised-button color="primary">PRIMARY</button>
<button md-raised-button color="accent">ACCENT</button>
<button md-raised-button color="warn">WARN</button>
<br/>
<br/>

<button md-button disabled>OFF</button>
<button md-raised-button [disabled]="isDisabled">OFF</button>
<button md-mini-fab [disabled]="isDisabled"><md-icon>check</md-icon></button>

没问题这里手懒不写布局样式了，直接给 br 换行大家方便看些，待页面部署完成后我们会看到以下效果

炫酷的组件，更多组件语法参考上面给的链接，到这里相信大家学习 angular2 的信心倍增，真对已有组件可以完成快速开发，下一步就是大家去 Angular2 官网看其它概念的时候啦，处理数据实现与后端对接。项目上线，大功告成。

总结

orange 最近也是在学习新技术，更底层框架方面的知识还再学习，当今前端框架层出不穷，不要盲从，要根据公司需求和员工的工作经验选择框架，真说到性能方面哪个框架快的话，我虽然没测试过，但我确定 React、Vue、Angular2 几个之间相差无几，除非在实现的时候代码存在问题，因为这几个框架都经过了大型项目的考验。、

一、背景介绍：

两个概念：

关于Angular版本，Angular官方已经统一命名Angular 1.x统称为Angular JS；Angular 2.x及以上统称Angular；
CLI是Command Line Interface的简写，是一种命令行接口，实现自动化开发流程，比如：ionic cli、vue cli等；它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布。

二、安装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

期间可能会失败（先看错误信息），可能由于node-sass这个包被墙了，所以解决办法有两个：要么用梯子，要么用淘宝镜像。

// 淘宝镜像解药
SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass

这里可以参考

当然你也可以所有的东西都从淘宝源来安装，整个过程会快不少：

// 安装cnpm
npm install -g cnpm --registry=https://registry.taobao.org

三、新建Angular项目

1. 新建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                      // 使用淘宝源安装

那么，这时候Angular cli帮你干了以下这么多事情：

创建 helloKeriy 目录
应用程序相关的源文件和目录将会被创建
应用程序的所有依赖 (package.json中配置的依赖项) 将会被自动安装
自动配置项目中的 TypeScript 开发环境
自动配置 Karma 单元测试环境
自动配置 Protractor (end-to-end) 测试环境
创建 environment 相关的文件并初始化为默认的设置
2. 成果展示
安装完成之后就可以启动项目了：

cd helloKeriy
ng serve -open

ng serve命令会启动开发服务器，监听文件变化，并在修改这些文件时重新构建此应用。
使用--open（或-o）参数可以自动打开浏览器并访问http://localhost:4200/。
接下来你将看到：

surprise

上面展示的是我们的根组件，我们科室适当修改其中的一些信息，显示自己喜欢的内容。
ng serve命令提供了很多参数，可以适当参考。
以下参数仅供参考：

--dry-run: boolean, 默认为 false, 若设置 dry-run 则不会创建任何文件
--verbose: boolean, 默认为 false
--link-cli: boolean, 默认为 false, 自动链接到 @angular/cli 包
--skip-install: boolean, 默认为 false, 表示跳过 npm install
--skip-git: boolean, 默认为 false, 表示该目录不初始化为 git 仓库
--skip-tests: boolean, 默认为 false, 表示不创建 tests 相关文件
--skip-commit: boolean, 默认为 false, 表示不进行初始提交
--directory: string, 用于设置创建的目录名，默认与应用程序的同名
--source-dir: string, 默认为 'src', 用于设置源文件目录的名称
--style: string, 默认为 'css', 用于设置选用的样式语法 ('css', 'less' or 'scss')
--prefix: string, 默认为 'app', 用于设置创建新组件时，组件选择器使用的前缀
--mobile: boolean, 默认为 false,表示是否生成 Progressive Web App 应用程序
--routing: boolean, 默认为 false, 表示新增带有路由信息的模块，并添加到根模块中
--inline-style: boolean, 默认为 false, 表示当创建新的应用程序时，使用内联样式
--inline-template: boolean, 默认为 false, 表示当创建新的应用程序时，使用内联模板

四、Angular CLI简单使用

1. 新建组件

$ ng generate component great-angular
installing component
  create src/app/great-angular/great-angular.component.css
  create src/app/great-angular/great-angular.component.html
  create src/app/great-angular/great-angular.component.spec.ts
  create src/app/great-angular/great-angular.component.ts
  update src/app/app.module.ts

如你所见，Angular cli帮我们干了如下事情：

src/app/great-angular 目录被创建
great-angular 目录下会生成以下四个文件：
CSS 样式文件，用于设置组件的样式
HTML 模板文件，用于设置组件的模板
TypeScript 文件，里面包含一个 GreatAngular 组件类和组件的元信息
Spec 文件，包含组件相关的测试用例
GreatAngular 组件会被自动地添加到最近模块 @NgModule 装饰器的 declarations 属性中。

2. 其他命令

Angualr CLI提供了许多常用命令供我们选择：

ng generate class my-new-class              // 新建 class
ng generate component my-new-component      // 新建组件
ng generate directive my-new-directive      // 新建指令
ng generate enum my-new-enum                // 新建枚举
ng generate module my-new-module            // 新建模块
ng generate pipe my-new-pipe                // 新建管道
ng generate service my-new-service          // 新建服务

当然选择。。简写：

ng g cl my-new-class        // 新建 class
ng g c my-new-component     // 新建组件
ng g d my-new-directive     // 新建指令
ng g e my-new-enum          // 新建枚举
ng g m my-new-module        // 新建模块
ng g p my-new-pipe          // 新建管道
ng g s my-new-service       // 新建服务

CLI git文档

3. 单元测试
Angular默认帮我们集成了``karma`测试框架，我们只需要：

$ ng test

4. 端到端测试

$ ng e2e

关于Angular测试部分详细可以参考官方文档。
5. 构建应用程序

$ ng built

其中过程应该是这样的：
Angular CLI 从 .angular-cli.json 文件中加载配置信息
Angular CLI 运行 Webpack 打包项目相关的 JavaScript、 CSS 等文件
打包后的资源，将被输出到配置文件中 outDir 所指定的目录，默认是输出到 dist 目录。

这只是一个初级的文档，强烈建议请参考Angular CLI 终极指南

7. 参考文献

官方文档--Angular CLI快速起步
 官方文档--部署
 Angular CLI 终极指南

8. 相关链接

作者：Keriy
链接：https://www.jianshu.com/p/327d88284abb
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

I-T枭

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Angular2 从搭建环境到开发

Angular2 的发布带来了一阵热议，很久之前就在筹备了，当时的官方答复就是彻底推翻重写，问世之后大家的呼声就是学习成本太高，虽然去掉了 1.x 里的一部分概念，但是加进了 typescript，虽然不强制使用，但是我推荐大家都试一试，毕竟此次改版是谷歌和微软两大家的产物。对于会部署环境的可以尝试本文最后一节加入 Angular material2 ，个人认为对高度个性化的项目不推荐使用，对企业...
复制链接

扫一扫