angular2初入眼帘之-搭个环境
angular2是什么?我猜不容我赘述,各位一定略有耳闻,无论是曾经AngularJS的拥趸,亦或是React的粉丝,都或多或少的对她有过一点了解。未见其物、先闻其声,angular2在问世之前已经做足了宣传,想必诸位也一定被下面各种词汇所震慑,什么:TypeScript、 ES5、 ES6、 Dart、 Immutable、 Unidirectional Data Flow、 Reactive Programming、 Decorators、 System.js、 webpack...,天花乱坠,美不胜收!但我们不禁要问,“都说AngularJS学习曲线陡峭,也没陡出这些个莫名词汇!”,angular2究竟该如何上手?看了这些个知识点,有木有吓得手抖,都搞不清从何处入手了!?
本教程主旨:多些操作、少点说教(理论是进阶必须的,千万不要误读),让我们从实践中追寻真理吧!
本章源码:environment
本章使用angular2
版本为:2.4.5
, webpack
版本为: 2.2.0
推荐开发工具
vscode
这里我推荐使用vscode(原谅我变了,之前推荐的是atom
)。很爽的哦!
创建项目
mkdir environment
cd environment
npm init
根据npm init
提问,创建package.json
文件,创建后去掉不必要的字段,像这样即可:
{"name": "environment","version": "1.0.0","description": "I will show you how to set up angular2 development environment","keywords": ["angular2","environment"],"scripts": {"start": "webpack-dev-server --hot--host 0.0.0.0"},"author": "Howard.Zuo","license": "MIT","dependencies": {"@angular/common": "^2.4.5","@angular/compiler": "^2.4.5","@angular/core": "^2.4.5","@angular/platform-browser": "^2.4.5","@angular/platform-browser-dynamic": "^2.4.5","@angular/forms": "^2.4.5","core-js": "^2.4.1","rxjs": "5.0.3","zone.js": "^0.7.6"},"devDependencies": {"@types/core-js": "^0.9.35","ts-loader": "^2.0.0","typescript": "^2.1.5","webpack": "^2.2.0","webpack-dev-server": "^2.2.0"}
}
安装依赖
npm install
@angular: 这个必须的,没意见吧?之所以分了多个包,这是最新
2.1.2
的变化,可以按需引入,增加灵活性core-js:
javascript
的一个标准库实现,包含了大量ES2015
,ES2016
的ES5
实现rxjs: 一个
Reactive Programming
的JavaScript
实现。这里对她的依赖是因为angular2
支持多种数据更新模式,比如:flux、Rx.jszone.js: 用来对异步任务提供
Hooks
支持,使得在异步任务运行之前/之后做额外操作成为可能。在angular2
里的主要应用场景是提高脏检查效率、降低性能损耗。webpack: 我们这里使用
webpack2
对源码进行编译、打包,而不是用官网介绍的System.js
的运行时加载、解释、执行。合并打包的好处不用我多说吧?减少请求数、uglify
、预检查...webpack-dev-server: 一个轻量级的,支持
webpack
编译的静态服务器(调试工具),本章节我们就用它启动程序ts-loader:
TypeStrong
出品的TypeScript
加载器,通过该加载器,TypeScript
源码可以顺利被编译成ES5
代码typescript:
angular2
官方推荐的开发语言,我们在教程里也将使用该语言进行代码编写@types/core-js: 自
typescript
2.0.0
以后,使用@types
管理声明文件,由于angular2
依赖ES2015
的诸多特性,譬如:Promise
、Map
等,所以需要引入这些API的声明
第一个示例
创建index.html
touch index.html
向刚才创建的index.html
里添加如下内容:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>environment</title>
</head>
<body><!--这里引用我们的第一个component--><my-app></my-app><!--加载使用webpack编译后的bundle--><script type="text/javascript" src="/dist/bundle.js"></script>
</body>
</html>
创建app.ts
mkdir ts
touch ts/app.ts
向刚才创建的ts/app.ts
里添加如下内容:
import {Component} from '@angular/core';//声明第一个Component
@Component({selector: 'my-app',template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
创建index.ts
touch ts/index.ts
向刚才创建的ts/index.ts
里添加如下内容:
//不显示引入,你会得到"Uncaught reflect-metadata shim is required when using class decorators"的错误
import 'core-js/es6';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';//引入NgModule装饰器
import { NgModule } from '@angular/core';//引入浏览器模块
import { BrowserModule } from '@angular/platform-browser';//引入启动器
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';//引入我们刚才创建的第一个component
import { AppComponent } from './app';//声明一个应用模块
@NgModule({imports: [ BrowserModule ],declarations: [ AppComponent ],bootstrap: [ AppComponent ]
})
class AppModule { }//启动应用
platformBrowserDynamic().bootstrapModule(AppModule);
创建webpack.config.js
touch webpack.config.js
向刚才创建的webpack.config.js
里添加如下内容:
const {resolve} = require('path');module.exports = {entry: {index: './ts/index.ts'},output: {path: resolve(__dirname, 'dist'),filename: 'bundle.js',publicPath: 'dist/'},module: {exprContextCritical: false,rules: [{test: /\.ts$/,use: ['ts-loader']}]},resolve: {extensions: ['.js','.ts']}
};
创建tsconfig.json
touch tsconfig.json
向刚才创建的tsconfig.json
里添加如下内容:
{"compilerOptions": {"module": "commonjs","target": "es5","moduleResolution": "node","noImplicitAny": true,"removeComments": true,"emitDecoratorMetadata": true,"experimentalDecorators": true,"sourceMap": true,"declaration": false},"buildOnSave": false,"compileOnSave": false,"exclude": ["node_modules"]
}
运行
好了,到目前为止,我们第一个示例的开发/运行环境就基本搭好了,现在启动试试看:
npm start
你会看到:
下回预告:牛刀小试component
angular2初入眼帘之-搭个环境相关推荐
- angular2初入眼帘之-多components协作
前集回顾 在上一章里我们讲了如何在angular2下开发一个component(还没做的赶紧去学吧).我们使用了Unidirectional Data Flow模式书写component,并引入了Im ...
- 【Java百炼成神】魂圣初入Java ——安装JDK、环境变量、HelloWorld
- 初入职场必读:那些关于你职业生涯和收入的规则和建议
写在前面 最近很多读者.朋友和我探讨起职场的规则,特别是初入职场的小白程序员,很容易因为"不懂规矩"或者"傻乎乎"的行为导致自己的职业生涯受到阻碍.莫名其妙的考 ...
- 初入职场的我怎么就成了个打杂的,我是这样破局的 No.146
本文为转载文章,转载于公众号:一名叫大蕉的程序员 这么快就到6月份了,又到一大批有为青少年离开象牙塔摩拳擦掌准备进入职场大干一番的季节.但很多人也开始迷茫起来,毕竟啊,那个以考试成绩为唯一标记性成果的 ...
- RxJava初入学习(一)之Gifts-for-designers
Introduction 一个为设计师设计的APP( ´_ゝ`)一个特别简单项目 主要用来练习Rx,当然这个适合初入Rx的看看. 自己参考的教程给 Android 开发者的 RxJava 详解 Git ...
- 初入android驱动开发之字符设备(一)
大学毕业,初入公司,招进去的是android驱动开发工程师的岗位,那时候刚进去,首先学到的就是如何搭建kernel.android的编译环境,然后就是了解如何刷设备以及一些最基本的工具.如adb.fa ...
- 每一个div元素分析 php,PHP初入,div知识点整理(特效字体等元素的使用整理)...
.nav{ width: 500px; height: 100px; border: 2px solid black; background-image: url(js/QQ图片20170815095 ...
- 初入前端,面对一个项目应注意哪些?
前言: 对于初入职场的前端小白来说,一整个项目来了,顿时感觉压力山大,张皇失措,也总会感到手忙脚乱.其实不用怕,拆分步骤,把每个步骤做好,做细,一切都迎刃而解,犹如顺藤摸瓜般畅快淋漓. 目录: 概念的 ...
- python while循环if_初入python 用户输入,if,(while 循环)
python 基础 编译型: 一次性将所有程序编译成二进制文件. 缺点:开发效率低,不能跨平台 优点:运行速度快. :c ,c++语言 等等.... 解释行:当程序执行时,一行一行的解释. 优点:开发 ...
最新文章
- boost::graph模块演示 GGCL Edge 接口
- 面向对象的需求分析方法
- 04_使用Influxdb自带函数查询
- Hibernate many-to-many
- MySQL中table_schema的基本操作
- 收集 - 实际开发中的技巧记录【页面】
- 基于随机森林模型的心脏病患者预测及可视化(pdpbox、eli5、shap、graphviz库)附相关库安装教程
- 2020德勤面试开始了吗_刚刚去德勤面试,我只说了三个字就被录取了!
- ESP8266固件SDK开发初体验-让ESP8266打印helloworld(基于安信可ESP-07)
- ios设备管理 iMazing官方免费激活电脑版下载v2.11.6.0
- vim 方向键和backspace乱码
- android 9.x MTK平台讯飞输入法重启被卸载
- 理解本真的REST架构风格
- MSP430 单片机 SHT30 SHT31 温湿度传感器 MSP430F5529 MSP430G2553 程序
- 《新财富》:泡沫难破 房价至少被高估二成
- php万年历源代码!源代码![上一年、上一月、下一月、下一年、附加当天日期加背景颜色]-私聊源码
- 大数据时代,我们必守的三条底线,大数据杀熟,不可忍
- java公路车组装教程_骑行入门:怎样组装一辆自行车——零部件的准备
- druid.io中文版文档
- 图片转base64(前后端)
热门文章
- C#-datagridview隐藏行头
- POJ2728 Desert King ——01分数规划Dinkelbach迭代法+最小生成树prim算法
- Siri ShortCut 调研(含Demo)
- git 服务器自动部署项目之GitHooks
- [log.js]一个node端带文件路径和颜色的console.log
- 删除排序链表中的重复元素
- Android之TextView的样式类Span的使用具体解释
- 双程动态规划 nyoj61
- 「linux」win+linux 双系统 默认启动项 的修改
- BufferedReader和PrintWriter读写中文的问题