资讯专栏INFORMATION COLUMN

angular2初入眼帘之-搭个环境

everfight / 3299人阅读

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, ES2016ES5实现

rxjs: 一个Reactive ProgrammingJavaScript实现。这里对她的依赖是因为angular2支持多种数据更新模式,比如:flux、Rx.js

zone.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的诸多特性,譬如:PromiseMap等,所以需要引入这些API的声明

第一个示例 创建index.html
touch index.html

向刚才创建的index.html里添加如下内容:




    
    
    environment


    
    
    
    

创建app.ts
mkdir ts
touch ts/app.ts

向刚才创建的ts/app.ts里添加如下内容:

import {Component} from "@angular/core";

//声明第一个Component
@Component({
    selector: "my-app",
    template: "

My First Angular 2 App

" }) 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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/79186.html

相关文章

  • angular2初入眼帘-了解component

    摘要:通过增加删除元素改变布局的。譬如和控制元素显示隐藏,或者改变元素行为的。譬如设计看过我之前介绍以手写依赖注入的朋友应该已经对行为驱动多少有些了解了。她有,并且包含了至少一个和一个标签。,将左边的事件传递给了右边的表达式通常就是事件处理函数。 前集回顾 在上一章里我们讲了如何为angular2搭建开发环境(还没搭起来的赶紧去看哦),并使之跑起来我们的第一个My First Angular...

    ixlei 评论0 收藏0
  • angular2初入眼帘-service

    摘要:前集回顾上一章里我们在里通过组合三个组件,并通过单向数据流的方式把她们驱动起来。设计每章都会提一下,先设计使用场景这种方式,我们称之为,不了解的朋友参考以手写依赖注入。 前集回顾 上一章里我们在AppComponent里通过组合InputItem、 CheckableItem、 Counter三个组件,并通过Unidirectional Data Flow(单向数据流)的方式把她们驱动...

    jokester 评论0 收藏0
  • angular2初入眼帘-多components协作

    摘要:我们使用了模式书写,并引入了思想,这些以前只在里见到的设计,现在里也有体现,并且在本章中会着重讲解多的协作。如果之前写过,那对于这种书写方式一定无比熟悉。每次数据的变更,无论是还是,都将变化冒泡到,然后由再向下逐级推送各组件是否重绘。 前集回顾 在上一章里我们讲了如何在angular2下开发一个component(还没做的赶紧去学吧)。我们使用了Unidirectional Data ...

    dreamans 评论0 收藏0
  • Angular2入门系列(一)————如何在Angular2中使用jQuery和基于jQuery的插

    摘要:入门系列一如何在中使用和基于的插件在年的月中旬,官方终于正式发布。本篇文章就简单介绍下在中如何使用极其插件。按照插件的使用规则,在对应的中使用插件所需要的结构。 Angular2入门系列(一)————如何在Angular2中使用jQuery和基于jQuery的插件 在2016年的9月中旬,Google官方终于正式发布Angular2。尽管npm社区越来越完善,也提供了大量的插件,但是基...

    Karrdy 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<