Scribd
Upload
24 views7 pages

Unit 4

Uploaded by

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

Unit 4

Uploaded by

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

UNIT-4

Questions
A)Explain about routing in angular with suitable example?
1
B)Describe about $routeProvider with suitable example.
2 A)How to create routes in angular? Describe it with an example.
A)Explain about route redirect with suitable example.
3
B)How to identify active route? Explain it with suitable example.
A)How to configure child routes in angular? Describe it with an example.
4
B)What are Route Parameters? Explain.
A) How to navigate for routes in angular? Explain it with an example.
5
B)How to setup wildcards? Explain it with an example.
A)Explain Router Query Parameters with example.
6
A)How to build a single-page application using Angular routes?
7
B) Describe in detail about the Angular CLI?
A)How to add Routing to an Existing Angular Project explain with example?
8
B)Explain the Router configuration in the application module with relevant example?

A)Discuss about ngroute module with a suitable example.


9 B)Describe the process that how child route component can access the parent route's
parameters?
A)Describe the functionality of AppRouting Module? Explain it with suitable
10
example?

1) A) Explain about routing in angular with suitable example?

Ans)

In a single-page app, you change what the user sees by showing or hiding portions of the
display that correspond to particular components, rather than going out to the server to get a
new page. As users perform application tasks, they need to move between the
different views that you have defined.
To handle the navigation from one view to the next, you use the Angular Router.
The Router enables navigation by interpreting a browser URL as an instruction to change the
view.
Routing Example

We will be building an application, which will display a login page when a user requests
for base url - http://localhost/. Once the user logs in successfully, we will redirect it to
student page http://localhost/student/{username} where username would be logged in
user's name.
In our example, we will have one layout page - index.html, and two HTML templates -
login.html and student.html.

1. Index.html - layout view


2. login.html - template
3. student.html – template
0. <!DOCTYPE html>
1. <html>
2. <head>
3. <title></title>
4. <script src="Scripts/angular.js"></script>
5. <script src="Scripts/angular-route.js"></script>
6. <link href="Content/bootstrap.css" rel="stylesheet"
/>
7. </head>
8. <body ng-app="ngRoutingDemo">
9. <h1>Angular Routing Demo</h1>
10.
11. <div ng-view>
12.
13. </div>
14. <script>
15. var app = angular.module('ngRoutingDemo',
['ngRoute']);
16.
17. app.config(function ($routeProvider) {
18.
19. $routeProvider.when('/', {
20. templateUrl: '/login.html',
21. controller: 'loginController'
22. }).when('/student/:username', {
23. templateUrl: '/student.html',
24. controller: 'studentController'
25. }).otherwise({
26. redirectTo: "/"
27. });
28.
29. app.controller("loginController", function ($scope,
$location) {
30.
31. $scope.authenticate = function (username)
{
32. // write authentication code here..
33.
34. $location.path('/student/' + username)
35. };
36.
37. });
38.
39. app.controller("studentController", function
($scope, $routeParams) {
40. $scope.username = $routeParams.username;
41. });
42.
43. });
44. </script>
45. </body>
46. </html>

Let's understand the above example step-by-step:

1. The first step is to include angular.js, angular-route.js, and bootstrap.css in the


index.html. The angular-route.js includes necessary functions for routing.
2. Apply ng-app directive.
3. Apply ng-view directive to <div> or other elements where you want to inject another
child view. AngularJS routing module uses ng-view directive to inject another child
view where it is defined. Therefore, Angular will inject login.html or student.html
inside this div element.
4. Now, create an application module and specify 'ngRoute' as a dependency module.
5. Now, we need to configure the routing rules that need to compile before any other
module of an application. So, use config() method to configure the routing rules
using $routingProvider object.
6. Use $routeProvider.when(path, route) method to configure routing rules, where the
first parameter is request URL and the second parameter is an object which contains
controller, template, or other properties. In the above example, we specified that if
user request for "/" URL, meaning the base url then inject login.html and
loginController. In the same way, if a user requests for "/student/:username" url then
inject student.html and studentController. The :username would be url parameter.
7. Use otherwise() method to redirect to base url if user request for the URL other than
configured rules.
8. Now, define loginController which attaches authenticate() funtion to the $scope. The
authenticate() method redirects to "/student/username/" using $location service.
9. Define studentController which attaches username property to $scope, to display user
name in the view. Notice that $routeParams is used to get the value of url parameter
supplied from login view.
1) B) Describe about $routeProvider with suitable example ?

Ans)

Routing is allows us create Single Page Applications. To do this, we use ng-view and ng-
template directives, and $routeProvider services.
We use $routeProvider to configure the routes.
The config() takes a function which takes the $routeProvider as parameter and the routing
configuration goes inside the function.
$routeProvider is a simple API which which accepts either when() or otherwise() method.

 $routeProvider is a function under config (mainApp module) using the key as


‘$routeProvider’.
 $routeProvider.when defines the URL “/addStudent”.
 The default view is set by “otherwise”.
 “controller” is used for the view.

How To Configure The $routeprovider?

The $routeProvider is creates the $route service.

By configuring the $routeProvider before the $route service we can set routes in HTML
templates which will be displayed.

The $routeProvider is configured with the help of calls to the when() and otherwise()
functions.

when() function takes route path and a JavaScript object as parameters.

otherwise() takes a JavaScript object as parameters.

Syntax to configure the routes in AngularJS:


var app = angular.module("appName", ['ngRoute']);

app.config(function($routeProvider) {
$routeProvider
.when('/1stview', {
templateUrl: '1stview.html',
controller: 'Controller1'
})
.when('/view2', {
templateUrl: '2ndview.html',
controller: 'Controller2'
})
.otherwise({
redirectTo: '/1stview'
});
});

Path is the URL after the hash(#) symbol.

Route contains two properties:

1. templateUrl
2. controller

The $routeProvider can be used to define the page when the user clicks the link.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js ">
</script>
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js ">
</script>
<body ng-app="myApp">
<p><a href="#/!"> GFG</a></p>
<p>Click on the links below.</p>

<a href="#!C">Code 1</a>


<a href="#!C++">Code 2</a>

<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "main.htm",
})
.when("/C", {
templateUrl: "C.htm",
})
.when("/C++", {
templateUrl: "C++.htm",
});
});
</script>
</body>
</html>

2) How to create routes in angular? Describe it with an example.


Ans)

Routing in Angular allows the users to create a single-page application with multiple views
and allows navigation between them. Users can switch between these views without losing
the application state and properties.
Approach:
 Create an Angular app that to be used.
 Create the navigation links inside the app component and then provide
the “routerLink” directive to each route and pass the route value
to “routerLink” directive.
 Then add the routes to the routing.module.ts file and then import the
routing.module.ts into the app.module.ts file.

File Name: app-routing.module.ts

import { NgModule } from '@angular/core';


import { RouterModule, Routes } from '@angular/router';

import { DashboardComponent } from './dashboard/dashboard.component';


import { HeroesComponent } from './heroes/heroes.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';

const routes: Routes = [


{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'detail/:id', component: HeroDetailComponent },
{ path: 'heroes', component: HeroesComponent }
];

@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}

You might also like