AngularJS2 JavaScript environment configuration
This section, we introduce how to configure the execution environment AngularJS2.
This section is used to create Angular JavaScript applications, of course, you can also use to create Angular Dart TypeScript and applications.
Use this section to the file directory structure is as follows:
Create profile
Create a directory
$ mkdir angular-quickstart $ cd angular-quickstart
Loading required libraries
Here we recommend to use as a management tool npm package, if you do not understand or did not install npm npm can see our tutorial: NPM use presentation .
Create package.json file, the code is as follows:
package.json file:
Since npm country visit the official website of the mirror is too slow, and here I use Taobao npm image, installation is as follows:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
After we do that we can use to install the module cnpm command:
$ cnpm install
After the successful implementation of the next angular-quickstart directory will generate a node_modules directory where the instance contains the modules we needed.
Create Angular assembly
Component (Component) is the basis and constitute the core of Angular application, a component of a package of specific functions, and work together to assemble into a complete application between components.
In general, a component that is used to control a JavaScript class view template.
Next we create a directory app in the angular-quickstart:
$ mkdir app $ cd app
And add the component files app.component.js, within as follows:
app.component.js file:
Next we have to analyze the code above:
Create a visual component called AppComponent we call a global namespace ng.core Angular core of Component and Class method chain.
Component method accepts a configuration object contains two properties, Class method is that we achieve the component itself a place in Class approach to the component we add properties and methods, they will bind to the appropriate view and behavior.
Module
Angular applications are modular, ES5 no built-in modular system, you can use third-party modules system, then we have to create a separate application namespace app, file code can be wrapped in IIFE (expression function is executed immediately) in:
(function(app) {
})(window.app || (window.app = {}));
We will be the global namespace object passed IIFE app, if it does not exist with a null object to initialize it.
Most of the application file by adding something on the app namespace to output code, we output the AppComponent in app.component.js file.
app.AppComponent =
Class definition objects
This example AppComponent only an empty class constructor:
.Class({
constructor: function() {}
});
When we want to create is a meaningful application, we can use the properties and application logic to extend the object.
Component definition object
ng.core.Component () tells the class definition object Angular Angular is a component. Passed to ng.core.Component () configuration object has two fields: selector and template.
a selector for the host HTML element defines a simple CSS selector my-app. When Angular encounters a my-app element in the host HTML it creates and displays a AppComponent instance.
template property accommodates form template.
Add NgModule
Angular Angular application by the module, the module contains the components and any other thing Angular required for the application.
Next we create app / app.module.js file, as follows:
app.module.js file:
Start the application
Add app / main.js file:
app / main.js file:
We need two things to start the application:
- Angular the platformBrowserDynamic (). BootstrapModule function.
- In the above-mentioned application root module AppModule.
Next, create index.html, code as follows:
index.html file:
index.html Analysis
- 1, we need to load a JavaScript library;
- 2, load our own JavaScript file, in that order;
- 3, we add <my-app> tag in the <body> tag.
The implementation process is: When Angular call bootstrapModule main.js function, which reads AppModule metadata find AppComponent start assembly and locate my-app selector to locate a name for my-app element, then then load the contents of the tags.
Add some style
styles.css file code is:
styles.css file:
Open a terminal, enter the following command:
$ npm start
Visit http: // localhost: 3000 /, the browser displays the results as follows:
So our first Angular2 even created the application, as used herein, the source code can be downloaded in the following ways, it does not contain node_modules.