{"id":59577,"date":"2018-05-02T15:21:00","date_gmt":"2018-05-02T09:51:00","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=59577"},"modified":"2024-04-12T14:13:19","modified_gmt":"2024-04-12T08:43:19","slug":"angular-modules","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-modules\/","title":{"rendered":"Angular Modules"},"content":{"rendered":"

Angular Modules<\/h1>\n

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.<\/p>\n

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.<\/p>\n

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.<\/p>\n

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\u2014that is, loading modules on demand\u2014in order to minimize the amount of code that needs to be loaded at startup.<\/p>\n

 <\/p>\n

Angular apps are modular and Angular has its own modularity system called NgModules<\/em>. 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<\/em><\/a>, which is conventionally named AppModule<\/code> and resides in a file named app.module.ts<\/code>. You launch your app by bootstrapping<\/em> the root NgModule.<\/p>\n

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

NgModule metadata<\/h2>\n

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