This section uses TypeScript to create Angular applications, which is also the officially recommended approach. The examples in this tutorial will also be written in TypeScript. TypeScript is a free and open-source programming language developed by Microsoft. It is a superset of JavaScript, extending JavaScript's syntax. If you are not familiar with TypeScript, you can refer to the following resources: Before starting, you need to ensure that you have installed npm. If you haven't installed npm or are unfamiliar with it, you can check our tutorial: (#). Since the official npm website is slow to access from within China, I am using the Taobao npm mirror here. The installation method is as follows: $ npm install -g cnpm --registry=https://registry.npmmirror.com After execution, we can use the cnpm command to install modules: $ cnpm install * * * ## Step 1: Create and Configure the Project ### Create Directory $ mkdir angular-quickstart $ cd angular-quickstart ### Create Configuration Files An Angular project requires the following configuration files: * **package.json** marks the npm dependencies required for this project. * **tsconfig.json** defines how the TypeScript compiler generates JavaScript code from the project source files. * **typings.json** provides additional definition files for libraries that the TypeScript compiler cannot recognize. * **systemjs.config.js** provides information to the module loader about where to find application modules and registers all necessary dependencies. It also includes packages needed for later examples in the documentation. Create the following files in the angular-quickstart directory with the code shown below: ## package.json file: {"name": "angular-quickstart", "version": "1.0.0", "scripts": {"start": "tsc && concurrently "npm run tsc:w""npm run lite"", "lite": "lite-server", "postinstall": "typings install", "tsc": "tsc", "tsc:w": "tsc -w", "typings": "typings"}, "license": "ISC", "dependencies": {"@angular/common": "2.0.0", "@angular/compiler": "2.0.0", "@angular/core": "2.0.0", "@angular/forms": "2.0.0", "@angular/http": "2.0.0", "@angular/platform-browser": "2.0.0", "@angular/platform-browser-dynamic": "2.0.0", "@angular/router": "3.0.0", "@angular/upgrade": "2.0.0", "core-js": "^2.4.1", "reflect-metadata": "^0.1.3", "rxjs": "5.0.0-beta.12", "systemjs": "0.19.27", "zone.js": "^0.6.23", "angular2-in-memory-web-api": "0.0.20", "bootstrap": "^3.3.6"}, "devDependencies": {"concurrently": "^2.2.0", "lite-server": "^2.2.2", "typescript": "^2.3.4", "typings":"^1.3.2"}} ## tsconfig.json file: {"compilerOptions": {"target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false}} ## typings.json file: {"globalDependencies": {"core-js": "registry:dt/core-js#0.0.0+20160725163759", "jasmine": "registry:dt/jasmine#2.2.0+20160621224255", "node": "registry:dt/node#6.0.0+20160909174046"}} ## systemjs.config.js file: (function(global){System.config({paths: {'npm:': 'node_modules/'}, map: {app: 'app', '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 'rxjs': 'npm:rxjs', 'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api', }, packages: {app: {main: './main.js', defaultExtension: 'js'}, rxjs: {defaultExtension: 'js'}, 'angular2-in-memory-web-api': {main: './index.js', defaultExtension: 'js'}}}); })(this); Next, we use the cnpm command to install the dependencies: $ cnpm install After successful execution, a node_modules directory will be generated under the angular-quickstart directory. This contains the modules needed for our example. We can look at the project's directory structure: !(#) * * * ## Step 2: Create the Application We use NgModules to organize Angular applications into functional code blocks. Angular itself is split into independent Angular modules, so we only need to import the required parts of Angular into our application. Each Angular application requires at least one **root module**, which in this example is AppModule. Next, we create an app directory under the angular-quickstart directory: $ mkdir app $ cd app Then create the app.module.ts file in the app directory with the code shown below: ## app.module.ts file: import{NgModule}from'@angular/core'; import{BrowserModule}from'@angular/platform-browser'; @NgModule({imports: })export class AppModule{} Since QuickStart is a web application running in the browser, the root module needs to import BrowserModule from @angular/platform-browser and add it to the imports array. ### Create a Component and Add it to the Application Each Angular application has at least one **root component**, which in this example is AppComponent. The code for the app.component.ts file is as follows: ## app.component.ts file: import{Component}from'@angular/core'; @Component({selector: 'my-app', template: '

My First Angular App

'})export class AppComponent{} Code Analysis: * The above code imports the _Component_ package from _angular2/core_. * _@Component_ is an Angular 2 _decorator_ that associates metadata with the AppComponent component class. * _my-app_ is a CSS selector that can be used in HTML tags as a component. * _@view_ contains a _template_ that tells Angular how to render the component's view. * _export_ specifies that the component can be used outside the file. Next, we reopen the app.module.ts file, import the new AppComponent, and add it to the declarations and bootstrap fields of the NgModule decorator: ## app.module.ts file: import{NgModule}from'@angular/core'; import{BrowserModule}from'@angular/platform-browser'; import{AppComponent}from'./app.component'; @NgModule({imports: , declarations: , bootstrap: })export class AppModule{} * * * ## Step 4: Start the Application Next, we need to tell Angular how to start the application. Create a main.ts file in the angular-quickstart/app directory with the code shown below: ## main.ts file: import{platformBrowserDynamic}from'@angular/platform-browser-dynamic'; import{AppModule}from'./app.module'; const platform = platformBrowserDynamic(); platform.bootstrapModule(AppModule); The above code initializes the platform, allowing your code to run, and then bootstraps your AppModule on that platform. * * * ## Define the Application's Host Page Create an index.html file in the angular-quickstart directory with the code shown below: ## index.html file: System.import('app').catch(function(err){ console.error(err); }); Loading... Notable points here: * JavaScript libraries: **core-js** is a polyfill library for older browsers, **zone.js** and **reflect-metadata** libraries are required by Angular, and the SystemJS library is used for module loading. * SystemJS configuration file and script, which can import and run the app module we just wrote in the main file. * The tag is where the application loads. ### Add Some Styles We can set the styles we need in the styles.css file in the angular-quickstart directory: ## styles.css file: h1{color:#369; font-family:Arial, Helvetica, sans-serif; font-size:250%; }h2, h3{color:#444; font-family:Arial, Helvetica, sans-serif; font-weight:lighter; }body{margin:2 em; } * * * ## Step 6: Compile and Run the Application Open a terminal window and enter the following command: npm start Visit http://localhost:3000/, and the browser will display the result: !(#) This completes the creation of our first Angular2 application. The final directory structure is: !(#) The source code used in this article can be downloaded in the following way, excluding the node_modules and typings directories. (