Angular2从搭建环境到开发步骤详解


Posted in Javascript onOctober 17, 2016

Angular-CLI

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

安装

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

npm install -g angular-cli

用法

ng --help

查看所有用法

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

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

PROJECT_NAME 是你自己的项目名

部署成功后不报错的情况下到浏览器 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

下表里是所有的命令:

Angular2从搭建环境到开发步骤详解

创建路由

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

建立一个 build

ng build

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

组件实战

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

ng g component nav

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

Angular2从搭建环境到开发步骤详解 

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

 Angular2从搭建环境到开发步骤详解

我们发现与项目创建时自带的 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

此时页面会呈现成这样

Angular2从搭建环境到开发步骤详解 

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

引入 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 的改进在于可以选择不同的色系。

我们这里用的是 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 已经整装待发。

我们尝试着添加多个按钮组件测试一下,修改 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 的信心倍增,真对已有组件可以完成快速开发,下一步就是大家去 Angular2 官网看其它概念的时候啦,处理数据实现与后端对接。项目上线,大功告成。

总结

当今前端框架层出不穷,不要盲从,要根据公司需求和员工的工作经验选择框架,真说到性能方面哪个框架快的话,我虽然没测试过,但我确定 React、Vue、Angular2 几个之间相差无几,除非在实现的时候代码存在问题,因为这几个框架都经过了大型项目的考验。以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
jQuery 改变CSS样式基础代码
Feb 11 Javascript
Javascript实现动态菜单添加的实例代码
Jul 05 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
Sep 26 Javascript
深入学习jQuery中的data()
Dec 22 Javascript
浅谈JavaScript作用域和闭包
Sep 18 Javascript
使用vue-router设置每个页面的title方法
Feb 11 Javascript
Vue面试题及Vue知识点整理
Oct 07 Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 Javascript
jquery图片预览插件实现方法详解
Jul 18 jQuery
关于JS模块化的知识点分享
Oct 16 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 10 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
Oct 17 #Javascript
学习Node.js模块机制
Oct 17 #Javascript
微信小程序 火车票查询实例讲解
Oct 17 #Javascript
让编辑器支持word复制黏贴、截屏的js代码
Oct 17 #Javascript
Node.js下自定义错误类型详解
Oct 17 #Javascript
js HTML5多媒体影音播放
Oct 17 #Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 #Javascript
You might like
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
PHP模块memcached使用指南
2014/12/08 PHP
php中stdClass的用法分析
2015/02/27 PHP
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
thinkPHP5.1框架路由::get、post请求简单用法示例
2019/05/06 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
2017/03/07 Javascript
React实践之Tree组件的使用方法
2017/09/30 Javascript
详解使用create-react-app快速构建React开发环境
2018/05/16 Javascript
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
python获取豆瓣电影简介代码分享
2014/01/16 Python
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
Python中return self的用法详解
2018/07/27 Python
解决pycharm回车之后不能换行或不能缩进的问题
2019/01/16 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
python安装mysql的依赖包mysql-python操作
2021/01/01 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
法国珠宝店:CLEOR
2017/01/29 全球购物
商场开业庆典策划方案
2014/06/02 职场文书
同学聚会策划方案
2014/06/06 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
思想作风建设心得体会
2014/10/22 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
学校食品安全责任书
2015/01/29 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
西游降魔篇观后感
2015/06/15 职场文书
CSS完成视差滚动效果
2021/04/27 HTML / CSS