AngularJS2 JavaScript environment configuration

In this section we will show you how to configure the AngularJS2 execution environment.

This section uses JavaScript to create Angular applications, and of course you can also use TypeScript and Dart to create Angular applications.

The file directory structure used in this section is as follows:

Create a configuration file

Create a directory

$ Mkdir angular-quickstart
$ Cd angular-quickstart

Load the required libraries

Here we recommend using npm as a package management tool, if you have not installed npm or do not understand npm can view our tutorial: NPM use introduction .

Create the package.json file with the following code:

Package.json file:

{ " Name " : " angular2-QuickStart " ,
   " Version " : " 1.0.0 " ,
   " scripts " : { " Start " : " NPM Lite RUN " ,
     " 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 " } }
  
    
  
    
  
    
  

As npm official website mirror domestic visit is too slow, here I use the Taobao npm mirror, the installation method is as follows:

$ Npm install -g cnpm --registry = https: //registry.npm.taobao.org

After the implementation we can use the cnpm command to install the module:

$ Enpm install

After the success of the implementation, the angular-quickstart directory will generate a node_modules directory, which contains the examples we need this module.

Create the Angular component

Component is the foundation and core of the Angular application, a component that wraps a specific function, and the components work together to assemble into a complete application.

In general, a component is a JavaScript class for controlling view templates.

Next we create an app directory in the angular-quickstart:

$ Mkdir app
$ Cd app

And add the component file app.component.js, as follows:

App.component.js file:

( Function ( App ) { App . AppComponent =
     ng . Core . The Component ( { Selector : ' My-App ' ,
       Template : ' <h1 of> <h1 of /> My first application Angular ' } ) 
    . Class ( { constructor : Function ( ) { } } ) ;
 } ) ( window . App || ( window .App = { } ) ) ;

Next we have to analyze the following code:

We created a visual component named AppComponent by chaining the Component and Class methods in the global Angular core namespace ng.core.

The Component method takes a configuration object with two properties. The Class method is where we implement the component itself. In the Class method, we add properties and methods to the component, which bind to the corresponding view and behavior.

Module

Angular applications are modular, ES5 does not have a built-in modular system, you can use third-party module system, and then we create a separate namespace app for the application, the file code can be wrapped in IIFE (immediate execution function expression):

(Function (app) {
}) (Window.app || (window.app = {}));

We pass the global app namespace object into IIFE and initialize it with an empty object if it does not exist.

Most of the application files output the code by adding something to the app namespace, and we output the AppComponent in the app.component.js file.

App.AppComponent =

Class defines the object

The AppComponent class in this example has only one empty constructor:

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

When we want to create a practical application, we can use attributes and application logic to extend the object.

Component Defines the object

Ng.core.Component () tells Angular that the class definition object is an Angular component. The configuration object passed to ng.core.Component () has two fields: selector and template.

ng . Core . the Component ( { Selector : ' My-App ' ,
     Template : ' <h1 of /> <h1 of> My first application Angular ' } )
    

Selector for a 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 an AppComponent instance.

The template attribute holds the formed template.

Add NgModule

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

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

App.module.js file:

( Function ( App ) { App . The AppModule =
     ng . Core . NgModule ( { Imports : [ ng . PlatformBrowser . BrowserModule ] ,
       Declarations : [ App . AppComponent ] ,
       on Bootstrap : [ App . AppComponent ] } ) 
    . Class ( { constructor :Function ( ) { } } ) ;
 } ) ( window . App || ( window . App = { } ) ) ;

Start the application

Add app / main.js file:

App / main.js file:

( Function ( app ) { document . AddEventListener ( ' DOMContentLoaded ' , function ( ) { ng . PlatformBrowserDynamic 
      . PlatformBrowserDynamic ( ) 
      . BootstrapModule ( app . AppModule ) ;
   } ) ;
 } ) ( window . App || ( window . App = { } ) ) ; 
   
    

We need two things to start the application:

Angular platformBrowserDynamic (). BootstrapModule function.
The above mentioned application root module AppModule.

Next, create index.html as follows:

Index.html file:

< Html > < head > < meta charset = " utf-8 " > < title > Angular 2 instance - rookie tutorial (runoob.com) </ title > < meta name = " viewport " content = " width = device-width, Initial-scale = 1 " > < link rel = " stylesheet " href = " styles.css " > <! - 1.Load script -> <! - IE need polyfill -> < script src = " node_modules / core-js / client / shim.min.js " > </ script > < script src = " node_modules / zone.js /dist/zone.js " > </ script > < script src = " node_modules / reflect-metadata / Reflect.js " > </ script > < script src = " node_modules / rxjs / bundles / Rx.Js " > </ script > < script src = " node_modules/@angular/core/bundles/core.umd.js " > </ script > < script src = " node_modules/@angular/common/bundles/common.umd. Js " > </ script > < script src = " node_modules/@angular/compiler/bundles/compiler.umd.js " > </ script > <Script src = " node_modules/@angular/platform-browser/bundles/platform-browser.umd.js " > </ script > < script src = " node_modules / @ angular / platform-browser-dynamic / bundles / platform-browser- Dynamic.umd.js " > </ script > <! - 2. load 'modules' -> < script src = ' app / app . Component . Js ' > </ Script > < Script the src = ' App / App . Module1 . JS ' > </ Script > < Script the src = ' App / main . JS ' > </ Script > </ head > <-! 3. display application - -> < body > < my-app > Loading ... </ my-app > </ Body > </ html >

Index.html analysis

1, load the JavaScript library we need;
2, load our own JavaScript files, note the order;
3. We added the <my-app> tag to the <body> tag.

The execution is: When Angular calls the bootstrapModule function in main.js, it reads the AppModule's metadata, finds AppComponent in the boot component, finds the my-app selector, locates an element named my-app, and then And then load the contents of this label.

Add some style

Styles.css file code:

Styles.css file:

H1 { color: # 369 
   ;
   Font-family: Arial , Helvetica , sans-serif ;
   Font-size: 250 % ;
 } Body { margin: 2 em
 
   ;
 }

Open the terminal and enter the following command:

$ Npm start

Visit http: // localhost: 3000 /, the browser displays the result:

Simplidigital