Work With Angular-1

Now  all of you know,how to create new Angular project. I have used my project name as 'angularExample1' here.

Then you can see following output after it run on the localhost:4200 .

In our project "angularExample1"  go through  app -------------->app.components.ts . Then you can see,
title ="angularExample1"

change it as "Angular Practicals" and see the changes as follows.

You can see here in app.component.html there is a <h1></h1> tag with welcome to {{title}}.
When you give a name as title in app.component.ts it will show trough app.component.html .
These things are given by builders  .

You can change these things going through app.component.html
 Delete everything there. see the results.
Write whatever you want using basic html .Then see the result.

Angular Components

 Angular is a framework for building SPA (Single Page Application) applications. Therefore, we are going to generate all of our pages inside one page. 


That is why we only have the index.html page .In there  all content is going to be generated inside <app-root></app-root> selector which comes from the app.component.ts file.

To practice with components create a folder called components inside app folder. Then create home  component  inside components folder.

When you create a component it will  create home.component.ts, home.component.html , home .component.css  and home.component.spec.ts files automatically.

To create home component ,  inside components folder you can use following command.
In there g presents global, c presents component  and  "components/home" presents , a component
which called home inside components folder.

In here we can see  OnInit interface  which defines function ngOnInit.  This function will execute any logic inside it as soon as the component initializes.

The constructor is intended only for injection of the service into the component. For any action that needs to be executed upon component initialization, use the ngOnInit method.

when we see inside app.module.ts file after creating home component , we can see following new things there.

 This is what can I see in app.module.ts after creating home component.

Even though one module is enough for the entire application, you still want to create more modules.

what is the reason for it ?

Because it is easier to maintain the modules and also more modules give you the advantage of the lazy content loading. That means that your application will load only content related to that specific module you are pointing to, and not the entire application.


Then I am going to talk about Angular Routing. It  enables navigation from one view to the next as users perform application tasks.