angular2快速開始

時間 2019-12-06

標籤 angular2 angular 快速開始欄目 AngularJS 简体版

原文原文鏈接

簡介

5 分鐘從0搭建一個ng2項目demo
https://angular.io/docs/js/latest/quickstart.html html

你運氣真好，居然看到了這篇文章，你省事了，一分鐘讓你完成，請點擊https://github.com/1329555958/angular2-quickstartnode

具體步驟

假定你已經具有了nodejs環境；git

新建目錄結構
angular2-quickstart

   
   
   
   
   
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
   
   
   
   
 |----app | |----app.component.js | |----boot.js |----index.html |----package.json

修改package.json(npm 相關，若是看不懂這裏面的內容請關注nodejs)
安裝依賴
npm install 在package.json同級目錄下執行（我僞裝你不知道在哪裏執行）
執行的時候可能有紅色字體的警告，無視它們，最後會成功的
修改app.component.js
修改boot.js
修改index.html

此時你發現你的目錄多出了node_modules及下面一些目錄；
運行npm start，你的默認瀏覽器會打開一個頁面，http://localhost:3000 ,若是沒有，能夠聯繫我；es6

恭喜你！你很棒，累了吧，休息會，稍後咱們再細聊具體細節!github

代碼清單

package.jsonnpm

 
 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
 
 
 
 
 
{ "name": "angular2-quickstart", "version": "1.0.0", "scripts": { "start": "npm run lite", "lite": "lite-server" }, "license": "ISC", "dependencies": { "angular2": "2.0.0-beta.0", "systemjs": "0.19.6", "es6-promise": "^3.0.2", "es6-shim": "^0.33.3", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.0", "zone.js": "0.5.10" }, "devDependencies": { "lite-server": "^1.3.1" }}

app.component.jsjson

 
 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
 
 
 
 
 
(function (app) { app.AppComponent = ng.core .Component({ selector: '.my-app',//簡單的CSS選擇器 template: '<h1>My First Angular 2 App</h1>' }) .Class({ constructor: function () { } });})(window.app || (window.app = {}));

boot.jsbootstrap

 
 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
 
 
 
 
 
(function (app) { document.addEventListener('DOMContentLoaded', function () { ng.platform.browser.bootstrap(app.AppComponent); });})(window.app || (window.app = {}));

index.htmlpromise

 
 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
 
 
 
 
 
<!DOCTYPE html><html><head> <title>Angular 2 QuickStart</title> <!-- 1. Load libraries --> <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> <script src="node_modules/rxjs/bundles/Rx.umd.js"></script> <script src="node_modules/angular2/bundles/angular2-all.umd.js"></script> <!-- 2. Load our 'modules' --> <script src='app/app.component.js'></script> <script src='app/boot.js'></script></head><!-- 3. Display the application --><body><div class="my-app">Loading...</div></body></html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。