Angular Routing Tutorial | AngularJS vs Angular Router | Angular Training | Edureka

EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js
Agenda
Why Routers?
1
What is Routers?
2
AngularJS Routers
3
Angular Router
4
Demo
6
Diff b/w AngularJS and
Angular Routers
5

Why we need Routers?

Navigation Bar
Side Bar Course List
While navigating through a Single Page Application…
Navbar Component
Side Bar Component Course List Component

Navigation Bar
Side Bar
Course1
Course3
Course4
Course2
If you reload a part (Course List), it only renders that component without fetching the
whole page (i.e. Navigation Bar & Side Bar) from server

Navigation Bar
Side Bar
Course 2 Description:
… … …
… … …
Similarly, if you select a course, it only renders Course Description instead of reloading
the whole page

For a real-time example

In Gmail inbox while clicking on a mail…

It only reloads the concerned section, without interfering the rest of the part …

Without reloading the whole page we can navigate
between components
Thanks to Routers!!!

What is Router?

What is Router?
Routing is used for navigating among different components in your SPA (Single Page Application)
Component
1
Component
3
Component
6
Component
4
Component
5
Component
2

AngularJS Routers

AngularJS Routers
NgRoute
UI-Router
UI-Router is a contributed module which is overcome the problems of ngRoute.
Mainly Nested/Complex views.
ngRoute is a angular core module which is good for basic scenarios
• Non official router
• Created by the community
• Used by 99.9% of devs
• More popular than ngRoute
• Mainly used in Nested/Complex views
ANGULARJS
UI-ROUTER

UI Route over ng-Route

AngularJS Routers
UI-Route over NgRoute
UI-Router allows for nested
views and multiple views
UI-Router allows for you to have
strong-type linking between states
based on state names
You can easily pass information
between states
Change the url in one place will update
every link to that state when you build
your links with ui-sref
States allow you to map and access
different information about different
states
Concept of the decorator in UI-Router,
allows your routes to be dynamically
created based on the URL

UI-Router vs NgRoute
Parameters UI-Router NgRoute
Module name (dependent module) ui.router
angular.module('app', ['ui.router']);
ngRoute
angular.module('app', ['ngRoute']);
Router provider $stateProvider
$urlRouterProvider
$routeProvider
Simple Syntax $stateProvider.state('customersState', {
url: '/customers', template: 'My
Customers' })
$routeProvider.when('/customers', {
template: 'My Customers' });
Template view directive ui-view ng-view
Template named view directive ui-view="customers" ---
Link directive ui-sref=""
a ui-sref="customersState"> Customers
</a>
href=""
<a href="#/customers"> Customers
</a>

Getting Params (as a service) $state
(eg) $state.params.id
$stateParams
(eg) $stateParams.id
$route
(eg) $route.current.params.id
$routeParams
(eg) $routeParams.id
Router start event $stateChangeStart $routeChangeStart
Router success event $stateChangeSuccess $routeChangeSuccess
Router error event $stateChangeError $routeChangeError
Router update event --- $routeUpdate
Router not found event $stateNotFound ---

Default View $urlRouterProvider.otherwise('/custom
ers');
$routeProvider.otherwise({redirectTo:
'/customers'});
One view to another view $state.go('customersState'); $location.path( "/customers" );
One view to another view with params $state.go('customersState', {id:'123'}); $location.path( "/customer/123" );

Angular Router

Angular Router
• Official Angular Router
• Inspired by the UI-Router
• Complete rewrite as compared to ng-
Route
• Introduction of Route in place of State
ANGULAR
ROUTER
Component
1
Component
3
Component
6
Component
4
Component
5
Component
2

Router
A router allows us to navigate across components in a Web App
Navbar Component
About Component
Movies Component
Home Component
Home Page View of
the App
It contains the About
section
It shows the list of top 250
movies
Responsible for
navigation among
components

A Closer Look at Router

Router
Path Declaration for different
components
Passing Declared Paths Array to
RouterModule

routerLink
Navigation from Movies List Component to Move
Details Component
MoviesComponent MoviesDetailsComponent
[ routerLink ] = “ [ ‘ < path >’ ] ”

<router-outlet>
Allows to navigate to a Component
by pasting its path in Browser Address Bar

<router-outlet>
Home Page Movies List
Add ‘/movies’ to Browser Address Bar

Angular Router vs UI-Router

UI-Router vs Angular Router
UI ROUTER ANGULAR ROUTER
• A Route in Angular Router
• A Route is the association of a name, a path and
a component
• A State in UI Router
• A State is the association of a name, a url, a
template and a controller
AngularJS Angular

UI-Router vs Angular Router
• A Route in Angular Router
• A Route is the association of a name, a path and
a component
• A State in UI Router
• A State is the association of a name, a url, a
template and a controller
AngularJS Angular

Nested Views
Navigation Bar
Side Bar
Course1
Course3
Course4
Course2
View inside a view  Course List inside Root Component

Nested Views
AngularJS Angular

Built-in Router Directives
routerLink directive for Angular routerui-sref directive for UI router
AngularJS Angular

URL Data
Get the id from /course-details/:id
id of every course

URL Data
Get the id from /course-details/:id
RouteParams service for Angular2 Router$stateParams service for UI-Router
id of every course
AngularJS Angular

Angular Router Demo

Demo
Navbar Component
About Component
Course Component
Home Component
Home Page View of
the App
It contains the About
section
It shows the list Edureka
courses
Responsible for navigation
among components

Demo
Add ‘/course’ to Browser Address Bar
Navigating to Course Detail Component

Demo
Course Component
(Displays the list of courses)
Navbar Component
Course
Component
About
Component
Course Component
Navbar Component
Course
Component
About
Component
Firebase
Service
Course Details Component
(Displays the details of course selected)

Thank You …
Questions/Queries/Feedback

Angular Routing Tutorial | AngularJS vs Angular Router | Angular Training | Edureka

More Related Content

What's hot (20)

Similar to Angular Routing Tutorial | AngularJS vs Angular Router | Angular Training | Edureka (20)

More from Edureka! (20)

Recently uploaded (20)

Angular Routing Tutorial | AngularJS vs Angular Router | Angular Training | Edureka