Angular Architecture and Building Blocks
The core concepts and building blocks of Angular, are:
Components
Dependency injection, and
Modules.
Components
In Angular 1, we were using directives, controllers, and scopes to build an application. Now, in Angular 2, all those concepts are combined into Components. The Components are important building blocks. Each component has the following properties.
A component is self-describing: We define a template either writing the HTML or through templateUrl that points to a HTML file. The templates are defined within the @Component annotation. It describes how the component is going to be rendered on the web page.
A component has precise inputs and outputs: In component, we can define the inputs as well as output through annotations @Input and @Output respectively.
The lifecycle of a component is well defined: In Angular2, the component has Input and Output. When there is a change in the input properties, the component will be notified and hence the output will also vary.
Dependency Injection
What could be the idea behind dependency injection? Here is the answer. We have a component and a service. Now a component depends on this service, in such a case we do not to create the service ourselves. Instead, we may request such a service in the constructor which can be provided by the Angular 2 framework. Therefore, now we depend on the interface for service and not on the concrete type. This helps in writing a decoupled code which ultimately increases the testability and readability, reduces the code maintenance cost and makes it easy to understand and make changes in the code, etc. The Angular 2 framework has a dependency injection module, though this module is useful when the application grows bigger in scope.
Modules
Angular defines the NgModule, which differs from and complements the JavaScript (ES2015) module. An NgModule declares a compilation context for a set of components that is dedicated to an application domain, a workflow, or a closely related set of capabilities. An NgModule can associate its components with related code, such as services, to form functional units.
Every Angular app has a root module, conventionally named AppModule, which provides the bootstrap mechanism that launches the application. An app typically contains many functional modules.
Like JavaScript modules, NgModules can import functionality from other NgModules, and allow their own functionality to be exported and used by other NgModules. For example, to use the router service in your app, you import the Router NgModule.
Organizing your code into distinct functional modules helps in managing development of complex applications, and in designing for reusability. In addition, this technique lets you take advantage of lazy-loading—that is, loading modules on demand—in order to minimize the amount of code that needs to be loaded at startup.
IT Professionals, Web Developers, Web Programmers, IT students can Apply for the certification course to move ahead in their careers.
Back to Angular 4 Tutorial Main Page 
