Scribd
Upload
192 views9 pages

Angular

Angular JS uses TypeScript and has several key components: templates (views), classes (with properties and methods), and metadata. Angular modules help organize applications into the root module and optional feature modules. Modules resolve namespace and organization issues in JavaScript. Angular components are classes decorated with metadata like @Component, with a selector and template. The root Angular module links components to the module and imports needed modules like BrowserModule. Templates are used within components and support interpolation and directives.

Uploaded by

bhanubtech35
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
Download as docx, pdf, or txt
192 views9 pages

Angular

Angular JS uses TypeScript and has several key components: templates (views), classes (with properties and methods), and metadata. Angular modules help organize applications into the root module and optional feature modules. Modules resolve namespace and organization issues in JavaScript. Angular components are classes decorated with metadata like @Component, with a selector and template. The root Angular module links components to the module and imports needed modules like BrowserModule. Templates are used within components and support interpolation and directives.

Uploaded by

bhanubtech35
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1/ 9

Angular JS uses Type script , it’s super set of JAVA script

It has several components : It is comprised of Template(view), class (properties, methods) and


Metadata

Angular modules help us to organize the application. Every application will have at least one module
i.e. Root Angular module.

It also has Feature angular module

Installation: Visual code, NPM

Modules:

In java script we have problems with namespace and there is no proper code organization.

Module will resolve this issue. Type script also having modules

ES 2015 Modules:

Angular Modules:

We can have multiple modules and atleast 1 module(i..e Root module) if there are extra features we
can put those in Feature module. If there are any shared module then we can put those things in
Shared Module. Each component we write is belongs to only 1 module.
Difference between ES Modules vs Angular Modules:
Components

Angular CLI will create a index.html page


Component in typescript looks like below.

First we define properties with type and the values. Property names usally follow
camelCase
Method will be define after the properties in a class body. Method names are verbs
Class is not enough to complete the component it also requires template i.e we need to
provide extra information and that can be done by metadata
A class becomes Angular component when we give the meta data. Angular needs this
meta data to know how to instantiate the component and construct the view and interact
with component.
Decorator : A function that adds meta data to class

We add these decorators above the class signature. Syntax similar to attributes in other
languages. Since decorator is a function we use ( ) and we pass Object to the Component
function with {} . Object will have many properties
If we want to use the component in any HTML we use “Selector” it defines the directive
name. When we use this directive Angular will render the that Particular component
Component should always have a template
Import statement:

We can also import from Angular


Hosting the application:
After using the directives <pm-root></pm-root> in html , angular compiler looks for this
custom html element in Angular Module. Angular module is blocks of code to organize our
application/code, and it also provides template resolution environment: when compiler see
the directive then compiler looks the component for the definition. So we defined
AppComponent in Angular module so it can find that.
Root angular module looks like below:
It has a class and a AppModule,
Metadata with a decorator @NgModule. For @NaModule decorator properties are arrays.
In Declaration array we specify the components which are linked to this module. By
convention Application root component i.e. AppComponent belongs to the root module.
In imports: We specify the external modules that we want to be available for the all the
components which are part of this module. BrowserModule needs to be added becz it
provide error handling
In bootstrap: This array specifies the startup component
Templates, Interpolation and Directives

You might also like