Home > Developer > Web Develop
Development environment, vs2013 Update 5,win7 x64, currently the latest ANGULAR2 version is beta 17
First step: Install node. js
Install node. JS (https://nodejs.org/en/) in order to be able to use NPM to get angular2.0 's development package
Verify that the installation is successful
CMD under input node-v
Npm-v
Step Two: Install Typescript on the vs2013After the installation is complete, you can add the Typescript project to the project, and there will be typescript pages in the Project property bar
Step three: Create a projectYou can delete all the useless
Fourth step: Add the Package.json file to get the ANGULARJS2 package and dependencies
Edit file, add content
{
"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"
}
}
For the required packages, the latest version can be queried via NPM, such as
NPM Info angular2
Next: Configure Package.config to get ANGULAR2 related packages using NPMIn the right-click Project, select cmd under power command to execute NPM install
If there is an error, you need to install the "TSD" package, you need to perform
NPM Install Tsd-g
And then install it.
After installation is complete
Next: Create a personal app, and note that you need to add a browser.d.ts reference at the entranceCreate a new app directory and add app.component.ts,main.ts
Add Angularjs module in App.component.ts
Import {Component} from ' Angular2/core ';@Component ({Selector: ' Angular2-demo ',
Template: '})Export class AppComponent {}The compile error "Connot find Promise" appears.You need to add a reference at the top of the App.component.ts<reference path= ". /node_modules/angular2/typings/browser.d.ts "/>
Complete as follows:<reference path= ". /node_modules/angular2/typings/browser.d.ts "/>
Import {Component} from ' Angular2/core ';
@Component ({
Selector: ' Angular2-demo ',
Template: '
})
Export class AppComponent {}
Add an app module to Mian.ts
Import {bootstrap} from ' Angular2/platform/browser 'Import {AppComponent} from './app.component 'Bootstrap (AppComponent);Next: Add index.html page<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><!--3. Display the application--<body><angular2-demo>Loading...</angular2-demo></body>Next: Change the typescript compilation options, modify the project fileIf the error is compiled at this point, the error message "Connot Find name Promise"You need to modify the project properties at this time, select System as follows, and modify the project file to add both in Debug and release in PropertyGroup<TypeScriptEmitDecoratorMetadata>true</TypeScriptEmitDecoratorMetadata>
<TypeScriptModuleResolution>Node</TypeScriptModuleResolution>
<TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators>
Finally, the file compiles successfully, In the app Main.ts and App.component.ts will automatically compile into. js file, finally saw the first page of Angular2 on the browser, the middle of many pits, experiment a lot of versions, the errors are not the same, after all, or beta version, first take this version of the study!ANGULARJS2 Study Notes (i) Development environment construction
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
