Angular 7 - Angular Routes


Angular Routes



Today i am going to tell you about Angular Routing and I will show you how to navigate the application with router links.Let's start learning Angular Routing.
  • The Angular Router is used to navigate from one view to the next view when users perform certain application task.
  • We normally use browser for navigation.We use browser for navigation as follows.
  1.  Enter a URL in the address bar and  navigates to a required page.
  2. Click links on the web page and navigates to a new page.
  3. Click the browser's back and forward buttons and navigates by using browser history.
  • Angular Routing also based on above browser model.It used URL as an instruction to navigate to a view. When we bind the router to links on a page and it will navigate to the appropriate application or component view when the user clicks a link.
  •  Also we can navigate users when they clicks a button. Also the router logs activities in the browser's history .Therefore we can use back and forward buttons for navigation.

How to apply routing to your application

Step 01

Angular Router is not a part of the Angular core and in its own library package, @angular/router. Therefore we have to Import router library in our app.module.ts file which is in app component to start routing.


Step 02

We should import the RouterModule.forRoot() method under the  AppModule's imports array to configure the router. Until we configure the router there are no routes in our application.



I have created my application as follows and i want to display relevant component in the empty space when i click the links on the navigation bar.


Step 03


To retrieve required view when we click on the link we needed to put router-outlet tag within needed space as below.

 
Step 04

As next step we should create route definitions in the app.module.ts file as follows.For the path you should put the word which is appeared after the "/" (root) and  empty path load the default component.As the component you should put component name correctly which is imported in the app.module.ts file.


 
Step 05

As final step we should set the link paths using routerLink within anchor tag instead of href.


After the above steps we can use our application as follows.

eg: when i clicked attendance link which is on navigation bar it loaded the attendance-overview component in the empty space .


Comments

Post a Comment

Popular posts from this blog

Angular 6 - Data Binding Part 2

Image
 Data Binding - 2 Event Binding Event binding used to build interactive angular applications with the flow of data from component to the element and from element to component . Event binding syntax will have a target event name within parentheses on the left of an equal sign, and a quoted template statement on the right. Eg 1: In this example I used a button to demonstrate the event binding. In here we are binding an onClick() event to the button element. When the user clicks on the button, event binding listens to the button's click event and calls the component's onClick() method in component.ts file. Eg:2  . In here there is  a method named "onUpdateServerName" and add an event with it.
Read more

Machine Learning

Image
Machine Learning  What is  Machine Learning? "Machine learning is the scientific study of algorithms and statistical models that computer systems use to effectively perform a specific task without using explicit instructions, relying on patterns and inference instead. It is seen as a subset of artificial intelligence." In traditional programming, we feed a set of instructions for a defined set of scenarios to the computer. Then the computer will utilize its computing capabilities to help human process the data efficiently. In machine learning, a large amount of data is input into the computer. Then computer processes all the data and comes up with a trained model(solution). After this model is used to solve the unseen problems of the real world. Applications of  Machine Learning Machine Learning has started growing fast because nowadays we have less expensive computational power and lots of data which we can use the train our models. Therefore Machin
Read more

Selenium - 1

Image
Selenium   Selenium is a very popular name in the software testing field which is known as an automation testing tool.  Mainly selenium uses to automate the testing of various web browsers. It supports many browsers such as, Chrome Mozilla Firefox Safari IE Advantages of Selenium Selenium is an open-source tool. Selenium supports various programming languages to write Test scripts such as, java C# Perl Python PHP Ruby It supports various operating systems, MS Windows Linux Macintosh Selenium uses less Hardware resources. Selenium supports Parallel Test Execution. Disadvantages of Selenium 1) No reliable Technical Support from anybody. (Since It is Open Source software nobody provides reliable technical support, if it is UFT/QTP Vendor (HP) provides Technical Support) 2) It supports Web-based applications only. (Selenium automates Web browsers only, using Selenium we can automate Computer Web Applications and Mobile Web Apps, but Selenium doesn’t support Computer Desktop Applications, M
Read more