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

Source: Internet
Author: User
Tags export class

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:

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.