Angularjs 2.0 Quick Start 1, angularjs2.0 Quick Start 1

Angularjs 2.0 Quick Start 1, angularjs2.0 Quick Start 1

I. First, write a json file and download all the packages.

1. Create a folder named angular2Dome in any directory. Alternatively, run the mkdir angular2Dome command and press Enter.

2. Create a file named package. json in the angular2Dome folder or use the command echo> package. json

3. Copy the following content to package. json.

{  "name": "angular2-quickstart",  "version": "1.0.0",  "scripts": {    "tsc": "tsc",    "tsc:w": "tsc -w",    "lite": "lite-server",    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "  },  "license": "ISC",  "dependencies": {    "angular2": "2.0.0-beta.3",    "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.11"  },  "devDependencies": {    "concurrently": "^1.0.0",    "lite-server": "^2.0.1",    "typescript": "^1.7.5"  }}

View Code

4. Use the command to locate angular2Dome and enter npm install to wait ·

5. Configure Typescript (ts ).

6. Create a tsconfig. json file under angular2Dome and copy the following content to the file.

{  "compilerOptions": {    "target": "es5",    "module": "system",    "moduleResolution": "node",    "sourceMap": true,    "emitDecoratorMetadata": true,    "experimentalDecorators": true,    "removeComments": false,    "noImplicitAny": false  },  "exclude": [    "node_modules"  ]}

Ii. write ts source code

1. Create a folder app under the angular2Dome directory, and create a file app. component. ts in the app folder.

2. Copy the following content to app. component. ts.

import {Component} from 'angular2/core';@Component({    selector: 'my-app',    template: '
Note: The export action before the class turns the ts file into a component so that it can be imported and used elsewhere.
3. Create the main. ts file in the app directory.
4. Copy the following content to main. ts.
 
import {bootstrap}    from 'angular2/platform/browser'import {AppComponent} from './app.component'bootstrap(AppComponent);
 
3. Write html
1. Create an HTML file in angular2dome and name it index.html.
2. Copy to get index.html
To put it simply, index.html is divided into three parts. First, introduce necessary js files. All of them are in the directory downloaded by npm. Second, we have configured SystemJS and imported the main. ts file we have written in it,Main. tsThe entry to the code isBootstrap. The third part is to display the app we first wrote. component. ts, in the app. component. in the ts code, there is a selector: 'My-app'. In the html, this component is represented by <my-app> </my-app>, the tag displays the 
4. Compile and run
1. Enter npm start in the angular2Dome directory, or open the http-server Browser and you will see the result.
Selec substitution, suoyitor: