Learning Angular for .NET Developers

Rajesh Gunasundaram

• Publisher: Packt Publishing
• Year: 2017
• ISBN:
  9781785881145
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming in JavaScript
• Index: Computer Science

Build efficient web apps and deliver great results by integrating Angular and the.NET frameworkAbout This Book• Become a more productive developer and learn to use frameworks that implement good development practices• Achieve advanced autocompletion, navigation, and refactoring in Angular using Typescript• Follow a gradual introduction to the concepts with a lot of examples and explore the evolution of a production-ready applicationWho This Book Is ForIf you are a.NET developer who now wants to efficiently build single-page applications using the new features that Angular 4 has to offer, then this book is for you. Familiarity of HTML, CSS, and JavaScript is assumed to get the most from this book.What You Will Learn• Create a standalone Angular application to prototype user interfaces• Validate complex forms with Angular version 4 and use Bootstrap to style them• Build RESTful web services that work well with single-page applications• Use Gulp and Bower in Visual Studio to run tasks and manage JavaScript packages• Implement automatic validation for web service requests to reduce your boilerplate code• Use web services with Angular version 4 to offload and secure your application logic• Test your Angular version 4 and web service code to improve the quality of your software deliverablesIn DetailAre you are looking for a better, more efficient, and more powerful way of building front-end web applications? Well, look no further, you have come to the right place!This book comprehensively integrates Angular version 4 into your tool belt, then runs you through all the new options you now have on hand for your web apps without bogging you down. The frameworks, tools, and libraries mentioned here will make your work productive and minimize the friction usually associated with building server-side web applications.Starting off with building blocks of Angular version 4, we gradually move into integrating TypeScript and ES6. You will get confident in building single page applications and using Angular for prototyping components. You will then move on to building web services and full-stack web application using ASP.NET WebAPI. Finally, you will learn the development process focused on rapid delivery and testability for all application layers.Style and approachThis book covers everything there is to know about getting well-acquainted with Angular 4 and.NET without bogging you down. Everything is neatly laid out under clear headings for quick consultation, offering you the information required to understand a concept immediately, with short, relevant examples of each feature.

Angular Building Blocks - Part 1

This chapter gives you a detailed walk through the core building blocks of the Angular architecture.

In this chapter, we will cover the following topics:

• Modules
• Components
• Decorators and metadata
• Templates
• Bindings
• Directives
• Dependency injection

Modules (NgModules)

A module is a single unit of implementation of distinct functionalities. Collections of such modules will be used to implement complex applications. Implementing module patterns helps you avoid global collisions of variables and methods. JavaScript encapsulates both private and public methods under a single object by implementing a modular pattern. The modular pattern achieves encapsulation using closure in JavaScript. JavaScript doesn't support access modifiers; however, the same effect can be achieved using function scopes. All Angular applications are modular in nature. We develop Angular applications by creating many modules. We develop modules to encapsulate functionalities that are independent and have one responsibility. A module exports the classes available in that module. Angular modules are called as NgModules. At least one Angular module will be present in any Angular application: a root module, which will represented as AppModule. AppModule is a class decorated with @NgModule.

The following code snippet shows an AppModule class:

 import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
@NgModule({ 
 imports: [ BrowserModule ], 
 providers: [ Logger ], 
 declarations: [ AppComponent ], 
 exports: [ AppComponent ], 
 bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

In the preceding code, an NgModule imported from @angular/core is decorated to the AppModule class. Note that NgModule has some important properties, such as imports, exports, providers, declarations, and bootstrap.

The metadata declarations should be assigned with view classes such as components, directives, and pipes that belong to this module. The metadata exports will be assigned with the components, directives, or pipes that are usable in the component templates. The metadata imports should be assigned with the exported classes that are used by component templates. The metadata providers will be assigned with the services that are used or accessed in the entire application. It creates the instance of services assigned and adds to the global collection of services so that the services will be ready to be consumed across the Angular application. The metadata bootstrap is assigned with the root component that is responsible to render the main view of the application.

The Angular module

A sample AppComponent class is shown as follows. The export statement exposes the component, and the AppComponent class is accessible to other modules in the application:

 export class AppComponent { } 

A class is a template that contains definitions of methods and variables of an object. An object is an instance of the class, so it can hold the real value of the variables, and the methods can perform actions against the actual values. Note that the current version of JavaScript doesn't support classes. It's a class-free language. In JavaScript, everything is an object, and functions are used to mimic classes. ECMAScript 6 introduces syntactic sugar over JavaScript prototype-based inheritance by introducing classes to JavaScript.

Here, we leverage the power of TypeScript as a superset of JavaScript. The export keyword in the statement says that we are exporting or exposing an AppComponent class to other modules of the application.

Let's consider that we have saved this component in a file named app.component.ts. In order to access or reference the AppComponent class that is exposed, we need to import it in the file we will access. The following statement does this:

 import {AppComponent} from './app.component'; 

Here, the import keyword in the statement means that we are importing a class that is exposed: AppComponent. The from keyword represents or refers to the file or module where the importing component exists. For example, it is app.component.ts in our case. A module name is the filename of the component without the extension; so, here the module name is app.component. We start the module's filename with the relative file path (./), and it represents the same folder.

Modules can also have a collection of other modules and such modules are known as library modules. Angular itself has many library modules. Some library modules are core, common, router, and so on. We import Component from the @angular/core library module, which is the primary module that we use for most things:

 import {Component} from '@angular/core'; 

All Angular library modules will be mentioned without any relative file path in the from clause.

Components

AngularJS has controllers, scopes, and directives to deal with views, bind data, and respond to events by updating changes to data. In Angular, Components replaced controllers, scopes, and directives from AngularJS.

Angular, introduced components that support the object-oriented component model to write cleaner code. A component is a simple class that holds the logic of managing the associated template or view. A simple component class is given as follows:

 Class FirstComponent { 
} 

In a component class, we will expose properties and methods to a template or view. Component properties can provide data for a template or view and allow the user to modify property values. Component methods can be called according to user actions over the view.

The Angular component FirstComponent

As you can see, the preceding code creates a simple JavaScript class named FirstComponent. You may be wondering how a JavaScript plain class can be treated as a component and how a template can be wired up to this class. In order to achieve this, Angular leverages the syntax of TypeScript to annotate the FirstComponent class as per ES6 specification 2015. The following code shows the component class with an annotation that declares the class as a component and wires up the template with the markup identifier in the selector:

 import { Component } from '@angular/core';
@Component({
 selector: 'first-component',
 template: `<h1>{{getGreetingPhrase()}} {{name}}</h1>`,
})
export class FirstComponent {
 name: string;
 constructor() {
 this.name = 'Rajesh Gunasundaram';
}
getGreetingPhrase() {
 return 'Hello Author,';
}
} 

There is also another metadata named template that defines the inline template that has the HTML snippet for the view or template. The inline markup will access the properties and methods defined in the component. So here, the inline view will access the getGreetingPhrase() function to fetch and display the phrase to greet, and it will also access the name property to display the name. The @Component() preceding the FirstComponent class is the annotation that denotes this class is a Component, and the markup identifier first component for this component is assigned to the metadata of @Component named selector.

You might be surprised to see that we have not used $scope to expose the property and method of FirstComponent. Here, our ...