sexevil 发表于 2017-2-25 10:28:45

angularjs2 学习笔记（一） 开发环境搭建

　　开发环境，vs2013 update 5，win7 x64,目前最新angular2版本为beta 17
　　第一步：安装node.js
　　安装node.js(https://nodejs.org/en/),为的是能够使用npm获得angular2.0的开发包
　　验证是否安装成功
　　cmd下输入 node -v
　　npm -v

第二步：在vs2013上安装typescript
　　安装完成后在项目中可以添加typescript项目了，并且在项目属性栏中会有typescript页

第三步：创建项目
　　可以将没用的都删除
　　第四步：添加package.json文件用于获取angularjs2包及依赖项
　　编辑文件，添加内容
{
   "name": "angular2demo",
   "version": "1.0.0",
   "license": "ISC",
   "dependencies": {
   "angular2": "2.0.0-beta.17",
   "systemjs": "0.19.27",
   "es6-promise": "^3.2.1",
   "es6-shim": "^0.35.0",
   "reflect-metadata": "0.1.2",
   "rxjs": "5.0.0-beta.6",
   "zone.js": "0.6.12"
   },
   "devDependencies": {
   "typescript": "^1.7.5"
   }
}
　　对于所需要的包可通过npm查询最新版本，如
　　npm info angular2

下一步：配置package.config使用npm获取angular2相关包
　　在右键项目，选择power command 下的cmd下执行npm install
　　如果出现错误，需要安装“tsd”包的话，需要执行

npm install tsd -g
　　然后再进行安装
　　安装完成后

下一步：创建个人应用，注意在入口处需要添加browser.d.ts引用
　　新建一个app目录，并添加app.component.ts,main.ts
　　App.component.ts中添加angularjs模块

import {Component} from 'angular2/core';

@Component({
    selector: 'angular2-demo',
    template: '<h1>这是我的第一个应用</h1>'
})
export class AppComponent { }
此时编译会出现错误“connot find promise”等

这时需要在App.component.ts顶部添加引用
///<reference path="../node_modules/angular2/typings/browser.d.ts"/>

完整如下：
///<reference path="../node_modules/angular2/typings/browser.d.ts"/>

import {Component} from 'angular2/core';
@Component({
    selector: 'angular2-demo',
    template: '<h1>这是我的第一个应用</h1> <h2>太神奇了</h2>'
})
export class AppComponent { }


　　在mian.ts中添加app模块

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

下一步：添加index.html页

<html>
<head>
    <title>Angular 2 Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
            packages: {
                app: {
                  format: 'register',
                  defaultExtension: 'js'
                }
            }
      });
      System.import('app/main').then(null, console.error.bind(console));
    </script>

</head>

<!-- 3. Display the application -->
<body>
    <angular2-demo>Loading...</angular2-demo>
</body>

</html>

下一步：更改typescript编译选项，修改项目文件

如果此时编译会出现错误，错误信息“connot find name promise"

此时需要修改项目属性，如下选择system，同时修改项目文件在PropertyGroup中的debug和release中同时添加
<TypeScriptEmitDecoratorMetadata>true</TypeScriptEmitDecoratorMetadata>
    <TypeScriptModuleResolution>Node</TypeScriptModuleResolution>
    <TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators>



最后，文件编译成功，在app下的main.ts和app.component.ts会自动编译成.js文件，终于在浏览器上看到了第一个angular2的页面了，这中间好多坑，实验了很多个版本，各个版本出现的错误都不是一样的，毕竟还是beta版，先拿这个版本学习了！
页: [1]
查看完整版本: angularjs2 学习笔记（一） 开发环境搭建