angular2快速开始

简介

5 分钟从0搭建一个ng2项目demo
https://angular.io/docs/js/latest/quickstart.html

你运气真好，竟然看到了这篇文章，你省事了，一分钟让你完成，请点击https://github.com/1329555958/angular2-quickstart

具体步骤

假定你已经具备了nodejs环境；

  • 新建目录结构
    angular2-quickstart
    1.   |----app
    2.   |    |----app.component.js
    3.   |    |----boot.js
    4.   |----index.html
    5.   |----package.json
  • 修改package.json(npm 相关，如果看不懂这里面的内容请关注nodejs)
  • 安装依赖
    npm install 在package.json同级目录下执行（我假装你不知道在哪里执行）
    执行的时候可能有红色字体的警告，无视它们，最后会成功的
  • 修改app.component.js
  • 修改boot.js
  • 修改index.html

此时你发现你的目录多出了node_modules及下面一些目录；
运行npm start，你的默认浏览器会打开一个页面，http://localhost:3000 ,如果没有，可以联系我；

恭喜你！你很棒，累了吧，休息会，稍后我们再细聊具体细节!

代码清单

package.json

  1. {
  2.   "name": "angular2-quickstart",
  3.   "version": "1.0.0",
  4.   "scripts": {
  5.     "start": "npm run lite",
  6.     "lite": "lite-server"
  7.   },
  8.   "license": "ISC",
  9.   "dependencies": {
  10.     "angular2": "2.0.0-beta.0",
  11.     "systemjs": "0.19.6",
  12.     "es6-promise": "^3.0.2",
  13.     "es6-shim": "^0.33.3",
  14.     "reflect-metadata": "0.1.2",
  15.     "rxjs": "5.0.0-beta.0",
  16.     "zone.js": "0.5.10"
  17.   },
  18.   "devDependencies": {
  19.     "lite-server": "^1.3.1"
  20.   }
  21. }

app.component.js

  1. (function (app) {
  2.     app.AppComponent = ng.core
  3.         .Component({
  4.             selector: '.my-app',//简单的CSS选择器
  5.             template: '<h1>My First Angular 2 App</h1>'
  6.         })
  7.         .Class({
  8.             constructor: function () {
  9.             }
  10.         });
  11. })(window.app || (window.app = {}));

boot.js

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

index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Angular 2 QuickStart</title>
  6.     <!-- 1. Load libraries -->
  7.     <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
  8.     <script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
  9.     <script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>
  11.     <!-- 2. Load our 'modules' -->
  12.     <script src='app/app.component.js'></script>
  13.     <script src='app/boot.js'></script>
  15. </head>
  17. <!-- 3. Display the application -->
  18. <body>
  19. <div class="my-app">Loading...</div>
  20. </body>
  22. </html>




posted @ 2015-12-25 15:35  skyding  阅读(334)  评论(2)  编辑  收藏  举报