This chapter is from the book
This chapter is from the book
This chapter is from the book
Understanding Angular
Angular is a JavaScript framework, which means it provides a number of APIs and structure that helps you quickly and easily create complex client-side code. Angular does a great job at providing not only features but also a basic framework and programming model to create client applications. The following sections describe the most important aspects of the Angular framework and how they contribute to make Angular a great JavaScript framework.
Modules
In general, Angular apps use a modular design. While not required, modules are highly recommended because they allow you to separate your code into separate files. This helps you keep your code files short and manageable while still allowing you to access the functionality from each one.
Unlike how you use modules with TypeScript, with Angular you import external modules at the top of a file and export the functionality you need at the bottom. You do this by using the key terms import and export, with the following syntax:
Import {Component} from 'angular2/core';
Export class App{}
Directives
Directives are JavaScript classes with metadata that defines the structure and behavior. Directives provide the majority of UI functionality for Angular applications. There are three major types of directives:
Components: A component directive is a directive that incorporates an HTML template with JavaScript functionality to create a self-contained UI element that can be added to an Angular application as a custom HTML element. Components are likely to be the directives you use the most in Angular.
Structural: You use structural directives when you need to manipulate the DOM. Structural directives allow you to create and destroy elements and components from a view.
Attribute: An attribute directive changes the appearance and behavior of HTML elements by using HTML attributes.
Data Binding
One of the best features of Angular is the built-in data binding—the process of linking data from a component with what is displayed in a web page. Angular provides a very clean interface to link model data to elements in a web page.
When data is changed on a web page, the model is updated, and when data is changed in the model, the web page is automatically updated. This way, the model is always the only source for data represented to the user, and the view is just a projection of the model.
Dependency Injection
Dependency injection is a process in which a component defines dependencies on other components. When the code is initialized, the dependent component is made available for access within the component. Angular applications make heavy use of dependency injection.
A common use for dependency injection is consuming services. For example, if you are defining a component that requires access to a web server via HTTP requests, you can inject the HTTP services into the component, and the functionality is available in the component code. In addition, one Angular component consumes the functionality of another via dependency.
Services
Services are the major workhorses in the Angular environment. Services are singleton classes that provide functionality for a web app. For example, a common task of web applications is to perform AJAX requests to a web server. Angular provides an HTTP service that houses all the functionality to access a web server.
The service functionality is completely independent of context or state, so it can be easily consumed from the components of an application. Angular provides a lot of built-in service components for basic uses, such as HTTP requests, logging, parsing, and animation. You can also create your own services and reuse them throughout your code.