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.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的諸多特性,譬如:Promise、Map等,所以需要引入這些API的聲明
第一個示例 創建index.htmltouch index.html
向剛才創建的index.html里添加如下內容:
創建app.tsenvironment
mkdir ts touch ts/app.ts
向剛才創建的ts/app.ts里添加如下內容:
import {Component} from "@angular/core"; //聲明第一個Component @Component({ selector: "my-app", template: "創建index.tsMy First Angular 2 App
" }) export class AppComponent { }
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
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/79186.html
摘要:通過增加刪除元素改變布局的。譬如和控制元素顯示隱藏,或者改變元素行為的。譬如設計看過我之前介紹以手寫依賴注入的朋友應該已經對行為驅動多少有些了解了。她有,并且包含了至少一個和一個標簽。,將左邊的事件傳遞給了右邊的表達式通常就是事件處理函數。 前集回顧 在上一章里我們講了如何為angular2搭建開發環境(還沒搭起來的趕緊去看哦),并使之跑起來我們的第一個My First Angular...
摘要:前集回顧上一章里我們在里通過組合三個組件,并通過單向數據流的方式把她們驅動起來。設計每章都會提一下,先設計使用場景這種方式,我們稱之為,不了解的朋友參考以手寫依賴注入。 前集回顧 上一章里我們在AppComponent里通過組合InputItem、 CheckableItem、 Counter三個組件,并通過Unidirectional Data Flow(單向數據流)的方式把她們驅動...
摘要:我們使用了模式書寫,并引入了思想,這些以前只在里見到的設計,現在里也有體現,并且在本章中會著重講解多的協作。如果之前寫過,那對于這種書寫方式一定無比熟悉。每次數據的變更,無論是還是,都將變化冒泡到,然后由再向下逐級推送各組件是否重繪。 前集回顧 在上一章里我們講了如何在angular2下開發一個component(還沒做的趕緊去學吧)。我們使用了Unidirectional Data ...
摘要:入門系列一如何在中使用和基于的插件在年的月中旬,官方終于正式發布。本篇文章就簡單介紹下在中如何使用極其插件。按照插件的使用規則,在對應的中使用插件所需要的結構。 Angular2入門系列(一)————如何在Angular2中使用jQuery和基于jQuery的插件 在2016年的9月中旬,Google官方終于正式發布Angular2。盡管npm社區越來越完善,也提供了大量的插件,但是基...
閱讀 824·2021-09-07 09:58
閱讀 2682·2021-08-31 09:42
閱讀 2855·2019-08-30 14:18
閱讀 3086·2019-08-30 14:08
閱讀 1831·2019-08-30 12:57
閱讀 2759·2019-08-26 13:31
閱讀 1299·2019-08-26 11:58
閱讀 1052·2019-08-23 18:06