Angular 2 JavaScript Environment Configuration
This chapter introduces how to set up the execution environment for Angular 2.
This chapter uses JavaScript to create Angular applications, although you can also use TypeScript and Dart to create Angular applications.
The file directory structure used in this chapter is as follows:
Creating Configuration Files
Creating Directories
$ mkdir angular-quickstart
$ cd angular-quickstart
Loading Required Libraries
We recommend using npm as the package management tool. If you haven't installed npm or are unfamiliar with it, you can refer to our tutorial: NPM Introduction.
Create a package.json file with the following code:
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 the slow access to the npm official mirror in China, I used the Taobao npm mirror. 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
After successful execution, a node_modules directory will be generated under the angular-quickstart directory, containing the modules needed for this example.
Creating Angular Components
Components are the foundation and core of Angular applications. A component encapsulates a specific function, and components work together to assemble a complete application.
Typically, a component is a JavaScript class that controls a view template.
Next, we create an app directory in angular-quickstart:
$ mkdir app
$ cd app
And add the component file app.component.js with the following content:
app.component.js File:
(function(app) {
app.AppComponent =
ng.core.Component({
selector: 'my-app',
template: '<h1>My First Angular App</h1>'
})
.Class({
constructor: function() {}
});
})(window.app || (window.app = {}));
Next, let's analyze the above code:
We create a visual component named AppComponent by chaining calls to the global Angular core namespace ng.core's Component and Class methods.
The Component method accepts a configuration object with two properties, and 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 views and behaviors.
Modules
Angular applications are modular, and ES5 does not have a built-in modular system. You can use a third-party module system, and then we create a separate namespace for the application called app. The file code can be wrapped in an IIFE (Immediately Invoked Function Expression):
(function(app) {
})(window.app || (window.app = {}));
We pass the global app namespace object into the IIFE, initializing it with an empty object if it does not exist.
Most application files export code by adding to the app namespace. We exported AppComponent in the app.component.js file.
app.AppComponent =
Class Definition Object
In this example, the AppComponent class has only an empty constructor:
.Class({
constructor: function() {}
});
When we want to create a meaningful application, we can extend this object with properties and application logic.
Component Definition Object
ng.core.Component() tells Angular that this class definition object is an Angular component. The configuration object passed to ng.core.Component() has two fields: selector and template.
ng.core.Component({
selector: 'my-app',
template: '<h1>My First Angular App</h1>'
})
The selector defines a simple CSS selector my-app for a host HTML element. When Angular encounters a my-app element in the host HTML, it creates and displays an instance of AppComponent.
The template property holds the component's template.
Adding NgModule
Angular applications are made up of Angular modules, which contain the components and other things needed by the application.
Next, we create the app/app.module.js file with the following content:
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 = {}));
Bootstrapping the Application
Add the 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's
platformBrowserDynamic().bootstrapModulefunction. - The application's root module,
AppModule, mentioned above.
Next, create the index.html file with the following content:
index.html File:
<html>
<head>
<meta charset="utf-8">
<title>Angular 2 Example - tutorialpro.org</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<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 src='app/app.module.js'></script>
<script src='app/main.js'></script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
index.html Analysis
- Load the JavaScript libraries we need;
- Load our own JavaScript files, paying attention to the order;
- Add the
<my-app>tag within the<body>tag.
- Add the
The execution process is as follows: When Angular calls the bootstrapModule function in main.js, it reads the metadata of AppModule, finds AppComponent in the bootstrap component, and locates the my-app selector, then it finds an element named my-app and loads the content between this tag.
Adding some styles
The styles.css file code is:
styles.css file:
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
body {
margin: 2em;
}
Open the terminal and enter the following command:
$ npm start
Visit http://localhost:3000/, the browser displays the result as:
This completes the creation of our first Angular2 application. The source code used in this article can be downloaded in the following way, excluding node_modules.