1.2.1. Create a profile ¶

$ mkdir angular-quickstart $ cd angular-quickstart 

1.2.2. Load the required libraries ¶

We recommend it here. npm as a package management tool, if you do not have npm installed or do not understand npm can check out our tutorial, introduction to using NPM.

Create package.json file, the code is as follows:

package.json file:

{ "name": "angular2-quickstart", "version": "1.0.0", "scripts": { "start": "npm run lite", "lite": "lite-server" }, "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", "zone.js": "^0.6.23", "angular2-in-memory-web-api": "0.0.20", "bootstrap": "^3.3.6" }, "devDependencies": { "concurrently": "^2.0.0", "lite-server": "^2.2.0" } } 

Due to npm the domestic access to the official website image is too slow. Here I use Taobao’s npm image. Install the image as follows:

$ npm install -g cnpm --registry=https://registry.npmmirror.com 

After execution, we can use the cnpm command to install the module:

$ cnpm install 

After a successful execution angular-quickstart will be generated under the directory node_modules directory, which contains the modules we need for this example.

1.2.3. Create an Angular component ¶

Components (Component) are the foundation and core of Angular applications. A component wraps a specific function, and components work together to assemble a complete application.

Generally speaking, a component is a JavaScript class that controls the view template.

Next, we are in angular-quickstart create a app directory:

$ mkdir app $ cd app 

And add component files app.component.js the contents are as follows:

app.component.js file:

(function(app) { app.AppComponent = ng.core.Component({ selector: 'my-app', template: '
My first Angular application
' }) .Class({ constructor: function() {} }); })(window.app || (window.app = {})); 

Next, let’s analyze the above code:

We call the global Angular through chaining core namespace ng.core in Component and Class method creates a file named AppComponent the visual component of the.

Component method accepts a configuration object that contains two properties Class method is where we implement the component itself, in the Class method, we add properties and methods to the component, whichare bound to the corresponding view and behavior.

1.2.4. Module ¶

Angular applications are modular, ES5 does not have a built-in modular system, we can use third-party modular systems, and then we create independent namespaces for the application app the file code can be wrapped in IIFE (execute the function expression immediately):

(function(app) { })(window.app || (window.app = {})); 

We will take the overall situation app the namespace object is passed into the IIFE and initialized with an empty object if it does not exist.

Most of the application files are passed through the app to add something to the namespace to output the code, we are in the app.component.js output in the file AppComponent .

app.AppComponent = 

1.2.5. Class define object ¶

In this example AppComponent class has only one empty constructor:

.Class({ constructor: function() {} }); 

When we want to create an application that is meaningful, we can use properties and application logic to extend the object.

1.2.6. Component define object ¶

ng.core.Component() tell Angular that the class definition object is an Angular component. Pass to ng.core.Component() has two fields for the configuration object of selector and template .

ng.core.Component({ selector: 'my-app', template: '
My first Angular application
' }) 

selector when Angular encounters a my-app element, it creates and displays a AppComponent an example.

template property holds the template for the component.

1.2.7. Add NgModule ¶

The Angular application consists of an Angular module, which contains the components needed by the Angular application and anything else.

Next, we create app/app.module.js file, the contents are as follows:

1.2.8. app.module.js file: ¶

(function(app) { app.AppModule = ng.core.NgModule({ imports: [ ng.platformBrowser.BrowserModule ], declarations: [ app.AppComponent ], bootstrap: [ app.AppComponent ] }) .Class({ constructor: function() {} }); })(window.app || (window.app = {})); 

1.2.9. Start the application ¶

Add app/main.js file:

(function(app) { document.addEventListener('DOMContentLoaded', function() { ng.platformBrowserDynamic .platformBrowserDynamic() .bootstrapModule(app.AppModule); }); })(window.app || (window.app = {})); 

                        Loading...