angular2JS学习笔记１

天才第一步，配置环境node,nvm,npm,webpack等。

１．创建一个文件夹angular2-app.内置文件有package.json,tsconfig.json,typings.json.

//typings.json
{
  "ambientDependencies": {
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd","jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#5c182b9af717f73146399c2485f70f1e2ac0ff2b"
  }
}

//package.json
{
  "name": "angular2-app","version": "1.0.0","scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ","tsc": "tsc","tsc:w": "tsc -w","lite": "lite-server","typings": "typings","postinstall": "typings install"
  },"license": "ISC","dependencies": {
    "angular2": "2.0.0-beta.15","systemjs": "0.19.26","es6-shim": "^0.35.0","reflect-Metadata": "0.1.2","rxjs": "5.0.0-beta.2","zone.js": "0.6.10"
  },"devDependencies": {
    "concurrently": "^2.0.0","lite-server": "^2.2.0","typescript": "^1.8.10","typings":"^0.7.12"
  }
}

//tsconfig.json
{
  "compilerOptions": {
    "target": "es5","module": "system","moduleResolution": "node","sourceMap": true,"emitDecoratorMetadata": true,"experimentalDecorators": true,"removeComments": false,"noImplicitAny": false
  },"exclude": [
    "node_modules","typings/main","typings/main.d.ts"
  ]
}

2.在当前目录下运行(确保node已经打开)

npm install

然后就可以看到根目录下多了一个文件夹node_modules和typings.

3.根目录下新建文件夹app
这里先写入两个文件app.component.ts和main.ts

//app.component.ts
import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent {
    constructor(){}
 }

//main.ts
import {bootstrap}    from 'angular2/platform/browser';
import {AppComponent} from './app.component';
bootstrap(AppComponent);

4.在根目录下建立文件index.html和styles.css

//index.html
<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <Meta name="viewport" content="width=device-width,initial-scale=1">    
    <link rel="stylesheet" href="styles.css">
    <!-- 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/es6/dev/src/testing/shims_for_IE.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>
    <!--<my-app>Loading...</my-app>-->
  <my-app>Loading~~~~</my-app>
  </body>
</html>

//styles.css
/* Master Styles */
h1 {
  color: #369;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 250%;
}
h2,h3 {
  color: #444;
  font-family: Arial,sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body,input[text],button {
  color: #888;
  font-family: Cambria,Georgia;
}
/* 
 * See https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css
 * for the full set of master styles used by the documentation samples
 */

5.在根目录下终端运行

npm start

这时就会自动跳转到页面：

此时，我们的第一个angular2页面就完成啦

angular2JS学习笔记１

猜你在找的Angularjs相关文章