In this chapter, we will introduce how to set up the execution environment for Angular 2. This chapter uses JavaScript to create the Angular application. Of course, 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 ### Create Directory $ mkdir angular-quickstart $ cd angular-quickstart ### Load Required Libraries Here we recommend using npm as the package management tool. If you haven't installed npm or are unfamiliar with it, you can check our tutorial: (#). 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"}} 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 After successful execution, a node_modules directory will be generated under the angular-quickstart directory, which contains the modules needed for this example. * * * ### Create Angular Component Components (Component) are the foundation and core of building Angular applications. A component encapsulates a specific function, and components work together to assemble a complete application. Generally, a component is a JavaScript class used to control 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: '

My First Angular Application

'}) .Class({constructor: function(){}}); })(window.app || (window.app = {})); Next, let's analyze the above code: We created a visual component named AppComponent by chaining the Component and Class methods from the global Angular core namespace ng.core. The Component method accepts a configuration object containing 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 will be bound to the corresponding view and behavior. ### Module Angular applications are modular. ES5 does not have a built-in modular system, so third-party module systems can be used. Then we create a separate namespace app for the application. 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. If it doesn't exist, we initialize it with an empty object. Most application files output code by adding things to the app namespace. We output 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: '

My First Angular Application

'}) 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 AppComponent instance. The template property holds the component's template. * * * ## Adding NgModule Angular applications are composed of Angular modules, which contain the components and everything else needed for the Angular 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 = {})); * * * ## Starting 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().bootstrapModule function. * The application root module AppModule mentioned above. Next, create index.html with the following code: ## index.html file: Loading... index.html Analysis * 1. Load the required JavaScript libraries; * 2. Load our own JavaScript files, paying attention to the order; * 3. We add the tag inside the tag. The execution process is: When Angular calls the bootstrapModule function in main.js, it reads the AppModule metadata, finds AppComponent in the bootstrap component, finds the my-app selector, locates an element named my-app, and then 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:2 em; } Open the terminal and enter the following command: $ npm start Visit http://localhost:3000/, and the browser displays the result: !(#) Thus, our first Angular 2 application is created. The source code used in this article can be downloaded in the following way, excluding node_modules. (#)