By this point, we're already familiar with the core building blocks that Angular provides for the development of single-page applications and the relations between them. However, we've touched only the surface by introducing the general idea behind Angular's concepts and the basic syntax used for their definition. In this chapter, we'll take a deep dive into Angular's components and directives.
In the following sections, we will cover these topics:
- Enforced separation of concerns of the building blocks that Angular provides for developing applications.
- The appropriate use of directives or components when interacting with the DOM.
- Built-in directives and developing custom ones.
- An in-depth look at components and their templates.
- Content projection.
- View children versus content children.
- The component's life cycle.
- Using template references.
- Configuring Angular's change detection.
Now, let's build our first "Hello world!" application in Angular. In order to get everything up and running as easy and quickly as possible, for our first application, we will use the ECMAScript 5 syntax with the transpiled bundle of Angular. First, create the index.html file with the following content:
<!-- ch4/es5/hello-world/index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script src="https://unpkg.com/[email protected]/dist/zone.js"></script> <script src="https://unpkg.com/[email protected]/Reflect.js"></script> <script src="https://unpkg.com/[email protected]/bundles/Rx.js"></script> <script src="https://unpkg.com/@angular/[email protected]/bundles/core.umd.js"></script> <script src="https://unpkg.com/@angular/[email protected]/bundles/common.umd.js"></script> <script src="https://unpkg.com/@angular/[email protected]/bundles/compiler.umd.js"></script> <script src="https://unpkg.com/@angular/[email protected]/bundles/platform-browser.umd.js"></script> <script src="https://unpkg.com/@angular/[email protected]/bundles/platform-browser-dynamic.umd.js"></script> <script src="./app.js"></script> </body> </html>
Note
Note that the examples in this book are built with Angular 2.2.0. In case you're using a newer version of the framework there might be slight differences. For further information take a look at the changelog at https://github.com/angular/angular/blob/master/CHANGELOG.md.
The preceding HTML file defines the basic structure of our page. Just before closing the body tag, we have references to a few script files: polyfills (zone.js and reflect-metadata) required by the framework, RxJS, the ES5 bundles of different packages of Angular, and the file that contains the application we're going to build.
Note
RxJS is used by Angular's core in order to allow us to empower the reactive programming paradigm in our applications. In the following content, we will take only a shallow look at how we can take advantage of observables. For further information, you can visit the RxJS GitHub repository at https://github.com/ReactiveX/rxjs .
In the same directory where your index.html resides, create a file called app.js and enter the following content inside it:
// ch4/es5/hello-world/app.js
var App = ng.core.Component({
selector: 'my-app',
template: '<h1>Hello {{target}}!</h1>'
})
.Class({
constructor: function () {
this.target = 'world';
}
});
var AppModule = ng.core.NgModule({
imports: [ng.platformBrowser.BrowserModule],
declarations: [App],
bootstrap: [App]
})
.Class({
constructor: function () {}
});
ng.platformBrowserDynamic
.platformBrowserDynamic()
.bootstrapModule(AppModule);
In the preceding snippet, we defined a component called App with an my-app selector. The component has the following template:
'<h1>Hello {{target}}!</h1>'
This syntax should already be familiar to you from AngularJS. When compiled in the context of the given component, the preceding snippet will interpolate the template with the result of the expression inside the curly brackets. In our case, the expression is simply the target variable.
To Class, we pass an object literal, which has a single method called constructor. This DSL (domain-specific language) provides an alternative way to define classes in ECMAScript 5. In the body of the constructor function, we add a property called target with a value of the "world" string. Right after that, we define our AppModule class. Note that every component on our application must be associated with a module. Inside the module, as explained in Chapter 2, The Building Blocks of an Angular Application, we define the declarations, imports, and the bootstrap component.
At the last line of the snippet, we invoke the bootstrapModule method of the object returned by the invocation of ng.platformBrowserDynamic(). As argument of bootstrapModule, we pass the AppModule we just defined.
Note that bootstrapModule is under the ng.platformBrowserDynamic namespace. This is due to the fact that the framework is built with different platforms in mind, such as the browser, NativeScript, and so on. By placing the bootstrap methods used by the different platforms under a separate namespace, Angular can implement different logic to initialize the application.
Now, if you open index.html with your browser, you should see some errors, as shown in the following screenshot:
Figure 1
This happened because we missed something quite important. We didn't use the root component anywhere inside index.html. In order to finish the application, add the following HTML element after the open tag of the body element:
<my-app></my-app>
Now, you can refresh your browser to see the following result:
Figure 2