{"id":59698,"date":"2018-05-02T17:22:21","date_gmt":"2018-05-02T11:52:21","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=59698"},"modified":"2024-04-12T14:20:45","modified_gmt":"2024-04-12T08:50:45","slug":"angular-module-basics","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-module-basics\/","title":{"rendered":"Angular Module Basics"},"content":{"rendered":"

Angular Module Basics<\/h1>\n

Angular apps are modular and Angular has its own modularity system called NgModules. An NgModule is a container for a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities. It can contain components, service providers, and other code files whose scope is defined by the containing NgModule. It can import functionality that is exported from other NgModules, and export selected functionality for use by other NgModules.<\/p>\n

Every Angular app has at least one NgModule class, the root module, which is conventionally named AppModule and resides in a file named app.module.ts. You launch your app by bootstrapping the root NgModule.<\/p>\n

While a small application might have only one NgModule, most apps have many more feature modules. The root NgModule for an app is so named because it can include child NgModules in a hierarchy of any depth.
\nNgModule metadata<\/p>\n

An NgModule is defined as a class decorated with @NgModule. The @NgModule decorator is a function that takes a single metadata object, whose properties describe the module. The most important properties are as follows.<\/p>\n

declarations\u2014The components, directives, and pipes that belong to this NgModule.<\/p>\n

exports\u2014The subset of declarations that should be visible and usable in the component templates of other NgModules.<\/p>\n

imports\u2014Other modules whose exported classes are needed by component templates declared in this NgModule.<\/p>\n

providers\u2014Creators of services that this NgModule contributes to the global collection of services; they become accessible in all parts of the app. (You can also specify providers at the component level, which is often preferred.)<\/p>\n

bootstrap\u2014The main application view, called the root component, which hosts all other app views. Only the root NgModule should set this bootstrap property.<\/p>\n

Here’s a simple root NgModule definition:
\nsrc\/app\/app.module.ts<\/p>\n

import { NgModule } from ‘@angular\/core’;
\nimport { BrowserModule } from ‘@angular\/platform-browser’;
\n@NgModule({
\nimports: [ BrowserModule ],
\nproviders: [ Logger ],
\ndeclarations: [ AppComponent ],
\nexports: [ AppComponent ],
\nbootstrap: [ AppComponent ]\n})
\nexport class AppModule { }<\/p>\n

IT Professionals, Web Developers, Web Programmers, IT students can Apply for the certification course to move ahead in their careers.<\/strong><\/p>\n

\"\"<\/a><\/p>\n