Things we learned so far
Today we will understand how you can create component using Angular
CLI and how you can define routing to each component.
You can run below command to generate the component using Angular CLI
CD <<folder where you want to have the component>>
Run ng g c <<component name>>
ng g c <<component name>> |
Angular
CLI will create for files and also update the app.module.ts file by adding new
entry to the import section.
Next we will create the component for home page.
ng g c home |
Modules in Angular Project |
Code in the app.module.ts file
should be as below.
Next we can define routing in app.routing.module.ts file
Update router array as below
If user type home in URL then it
will load home page and if user type any other path or word landing it will
load the landing page.
Let’s see new UIs of your
application by running ng serve command.
Home page of Angular project |
Landing page of Angular project |
You can remove all the code in your app.component.html other
than
<router-outlet></router-outlet>
Router-outlet is used to load the component to browser which
is corresponding to the defined routing path.
Good Luck! now you have created two new component and
defined the routing for them.
Comments
Post a Comment