Angular2 项目起步

0.创建配置文件

使用DOS命令切换到目标目录下,运行命令

mkdir angular-quickstart
cd angular-quickstart

创建并转到目录中.

1.手动编写配置文件

新建文件 package.json
写入配置

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "npm run lite",
    "lite": "lite-server"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
 
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.23",
 
    "angular2-in-memory-web-api": "0.0.20",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0"
  }
}

2.安装npm //这个过程好像可以省略

如图

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install
Angular2 项目起步_第1张图片
Dos安装npm

3.创建js文件

首先新建app目录
在app目录下新建组件文件:app.component.js

(function(app) {
  app.AppComponent =
    ng.core.Component({
      selector: 'my-app',
      template: '

我的第一个 Angular 应用

' }) .Class({ constructor: function() {} }); })(window.app || (window.app = {}));

新建模块文件 :app.module.js

(function(app) {
  app.AppModule =
    ng.core.NgModule({
      imports: [ ng.platformBrowser.BrowserModule ],
      declarations: [ app.AppComponent ],
      bootstrap: [ app.AppComponent ]
    })
    .Class({
      constructor: function() {}
    });
})(window.app || (window.app = {}));

新建启动文件 main.js

(function(app) {
  document.addEventListener('DOMContentLoaded', function() {
    ng.platformBrowserDynamic
      .platformBrowserDynamic()
      .bootstrapModule(app.AppModule);
  });
})(window.app || (window.app = {}));

4.入口文件

在Angular目录下新建路口文件 index.html


 
  
    
    Angular 2 实例 - 菜鸟教程(runoob.com)
    
    
 
    
    
    
 
    
    
 
    
    
    
    
    
    
 
    
    
    
    
 
  
 
  
  
    Loading...
  
 

5.完成 及 其他

Angular2 项目起步_第2张图片
完成收工
Angular2 项目起步_第3张图片
项目目录
我才不会说我玩了一早上没玩出来
主要问题终于js文件一定要下载好!!!

你可能感兴趣的:(Angular2 项目起步)