Scribd
Upload
7 views4 pages

Angular Basics 5

Uploaded by

vishalwdv
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7 views4 pages

Angular Basics 5

Uploaded by

vishalwdv
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

Angular:

Requirements of a web application


----------------------------------
less loading time
show more inf
user friendly

WebApplication Approaches
-------------------------
MPA vs SPA
------------
MPA-Multi Page Application
--------------------------
traditional way of developing web applications.
The web app which consists of multiple pages.
Evry time new content is displayed on a new fresh page
[full page refreshment]
But if UI is over complex---->page loading time will be more--->degrade user
experience

SPA-Single Page Application


---------------------------
Here the entire webapplication is integrated in to a single page
only a part of the web page will change as per user reqmt

partial page refreshment

initially AJAX was used to develop SPA,but ajax added too much complex code to the
webpage
It added a lot of complexity

eg:-
Google,gmail,Facebook,Twitter,GitHub,Netflix,YouTube,etc

solution:-
developed using javascript frameworks like Angular,Cycle,Backbone,Vue

What is Angular
----------------
-Angular is a clientside framework used to develop SPA using HTML & Typescript

-Angular is component-based ???

-An Angular application comprises of Modules[nonvisual] & components[visual


element]
refer to the diagram

Angular Component
------------------
-Component is the basic building block of an Angular UI
-you can see the component[it is a visual element]

-Component is made up of 4 files


*.component.html [content]--what you see
*.component.css[appearance]--how
*.component.ts[logic]
*.component.spec.ts[for testing purpose]-optional

-ts file holds the component class which is decorated using


@Component({}) decorator (In java , it is equvalent to Annotation, .net call it
attribute)

-@Component({}) decorator provides the metadata about a component

-component is identified using the selector name we specify in ts file

{{ }} is interpolation used to fetch value from ts file into the html file

eg:- creating a HelloComponent


hello.component.html [Template]
---------------------
<h1>{{message}}</h1>

hello.component.css
---------------------
h1{color:blue;font-size:25px;}

hello.component.ts
---------------------
@Component({
selector:'hello-comp',
templateUrl:'./hello.component.html',
styleUrls:['./hello.component.css']
})
export class HelloComp{
message:string="Hello from SEED!!";
}

Lab1 in hand: Create a footer component for the same page.


Write the code for all files and post it. Footer component should have message
developed by your Name

index.html
--------------
<header-comp/>
<article-comp/>
<categories-comp/>
<comments-comp/>
<news-comp/>
<footer-comp/>

steps for creating an Angular component'


----------------------------------------
1)create 3 files
*.component.html/css/ts

2)In the ts file write component class decorated with


@Component({}) where we specify
selector--->used to idetify component
templateUrl--->path to html file
styleUrls --->array holding path to css files
3)register the component with the Root Module [app.module.ts] declarations array

4)use the selector of the component in the bootstrap component[app.component.html]

_________________________________________________________
Angular Module
---------------
-In ANgular,Module is a group of related components,directives,pipes & services

-Every Angular appln has a root module[AppModule] defined in app.module.ts

-Root module acts as an entry point & helps to assemble & link all parts of an
angular appln

eg:-create a module AppModule

app.module.ts
-------------
@NgModule{(
declarations:[AppComponent,HeaderComponent,
HelloComp,FooterComponent,ProductComponent,LoginComponent],

imports:[list of user-defined/library modules],

providers:[],

bootstrap:[AppComponent]

)}
export class AppMOdule{}
-we can also create our userdefined modules
___________________________________________________________
app.component.html
------------------
<header-comp></header-comp>
<login-comp></login-comp>
<footer-comp></footer-comp>
<hello-comp></hello-comp>

index.html
-----------
<app-comp></app-comp>

create a ShoppingApp holding following components

ProductComponent
BillComponent
CartComponent
CatalogComponent
HomeComponent which is the bootstrap component
___________________________________________________________

index.html---->only selector of bootstrap component


bootstrap comp-----> selector of other components
___________________________________________________________

When you run angular page which page runs?


WHat is written in index.html?
What is called in bootstrap component?

You might also like