際際滷

際際滷Share a Scribd company logo
http://angularjs.org
(AngularJS
Rounting)
What is Routing in AngularJS?
Routing means switch to multiple pages without reloading entire
application any time.
Achieving this goal you must have to use ['ngRoute'] module
樽n your application.
ngRoute module routes your application to different pages
without reloading.
You can download ngRoute library file from AngularJS website.
Download ngRoute library with matching of your AngularJS
version.
Example:
<angularjs/1.6.4/angular.min.js>
<angularjs/1.6.4/angular-route.js>
Where Does it Go?
Your application needs a container to put the content provided by the
routing.
This container is the ng-view directive
There are three different ways to include the ng-view directive in your
application:
<div ng-view></div>
<ng-view></ng-view>
<div class="ng-view"></div>
Applications can only have one ng-view directive
$routeProvider
$routeProvider you can define what page to display when a
user clicks a link.
$routeProvider you can also define a controller for each
"view".
template VS templateUrl VS otherwise
templateUrl property in the $routeProvider.when method
template property, which allows you to write HTML directly in
the property value, and not refer to a page
otherwise method, which is the default route when none of the
others get a match.
Thank you :)

More Related Content

Similar to Angularjs rounting part 04 (20)

AngularJS Introduction, how to run Angular
AngularJS Introduction, how to run AngularAngularJS Introduction, how to run Angular
AngularJS Introduction, how to run Angular
SamuelJohnpeter
Angular js 1.3 basic tutorial
Angular js 1.3 basic tutorialAngular js 1.3 basic tutorial
Angular js 1.3 basic tutorial
Al-Mutaz Bellah Salahat
Learning AngularJS - Complete coverage of AngularJS features and concepts
Learning AngularJS  - Complete coverage of AngularJS features and conceptsLearning AngularJS  - Complete coverage of AngularJS features and concepts
Learning AngularJS - Complete coverage of AngularJS features and concepts
Suresh Patidar
Getting started with angular js
Getting started with angular jsGetting started with angular js
Getting started with angular js
Maurice De Beijer [MVP]
AngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get startedAngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get started
St辿phane B辿gaudeau
Angular js
Angular jsAngular js
Angular js
Hritesh Saha
AngularJS
AngularJSAngularJS
AngularJS
Pasi Manninen
Intoduction to Angularjs
Intoduction to AngularjsIntoduction to Angularjs
Intoduction to Angularjs
Gaurav Agrawal
AngularJS
AngularJSAngularJS
AngularJS
Mahmoud Tolba
Angular js slides
Angular js slidesAngular js slides
Angular js slides
Amr Abd El Latief
Kalp Corporate Angular Js Tutorials
Kalp Corporate Angular Js TutorialsKalp Corporate Angular Js Tutorials
Kalp Corporate Angular Js Tutorials
Kalp Corporate
Angular js
Angular jsAngular js
Angular js
vu van quyet
angularjs_tutorial.docx
angularjs_tutorial.docxangularjs_tutorial.docx
angularjs_tutorial.docx
telegramvip
Angular js
Angular jsAngular js
Angular js
yogi_solanki
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
Shyjal Raazi
Angularjs
AngularjsAngularjs
Angularjs
Sabin Tamrakar
Angularjs basic part01
Angularjs basic part01Angularjs basic part01
Angularjs basic part01
Mohd Abdul Baquee
Introduction of angular js
Introduction of angular jsIntroduction of angular js
Introduction of angular js
Tamer Solieman
AngularJS = Browser applications on steroids
AngularJS = Browser applications on steroidsAngularJS = Browser applications on steroids
AngularJS = Browser applications on steroids
Maurice De Beijer [MVP]
Angular 6 Training with project in hyderabad india
Angular 6 Training with project in hyderabad indiaAngular 6 Training with project in hyderabad india
Angular 6 Training with project in hyderabad india
php2ranjan
AngularJS Introduction, how to run Angular
AngularJS Introduction, how to run AngularAngularJS Introduction, how to run Angular
AngularJS Introduction, how to run Angular
SamuelJohnpeter
Learning AngularJS - Complete coverage of AngularJS features and concepts
Learning AngularJS  - Complete coverage of AngularJS features and conceptsLearning AngularJS  - Complete coverage of AngularJS features and concepts
Learning AngularJS - Complete coverage of AngularJS features and concepts
Suresh Patidar
AngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get startedAngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get started
St辿phane B辿gaudeau
Intoduction to Angularjs
Intoduction to AngularjsIntoduction to Angularjs
Intoduction to Angularjs
Gaurav Agrawal
Kalp Corporate Angular Js Tutorials
Kalp Corporate Angular Js TutorialsKalp Corporate Angular Js Tutorials
Kalp Corporate Angular Js Tutorials
Kalp Corporate
angularjs_tutorial.docx
angularjs_tutorial.docxangularjs_tutorial.docx
angularjs_tutorial.docx
telegramvip
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
Shyjal Raazi
Introduction of angular js
Introduction of angular jsIntroduction of angular js
Introduction of angular js
Tamer Solieman
AngularJS = Browser applications on steroids
AngularJS = Browser applications on steroidsAngularJS = Browser applications on steroids
AngularJS = Browser applications on steroids
Maurice De Beijer [MVP]
Angular 6 Training with project in hyderabad india
Angular 6 Training with project in hyderabad indiaAngular 6 Training with project in hyderabad india
Angular 6 Training with project in hyderabad india
php2ranjan

More from Mohd Abdul Baquee (6)

Cursor - AI Code Editor: Revolutionizing Coding with AI-Powered Tools
Cursor - AI Code Editor: Revolutionizing Coding with AI-Powered ToolsCursor - AI Code Editor: Revolutionizing Coding with AI-Powered Tools
Cursor - AI Code Editor: Revolutionizing Coding with AI-Powered Tools
Mohd Abdul Baquee
Mastering REST APIs: A Comprehensive Guide to Building and Using REST Clients
Mastering REST APIs: A Comprehensive Guide to Building and Using REST ClientsMastering REST APIs: A Comprehensive Guide to Building and Using REST Clients
Mastering REST APIs: A Comprehensive Guide to Building and Using REST Clients
Mohd Abdul Baquee
Angularjs - custom directives part 05
Angularjs - custom directives part 05Angularjs - custom directives part 05
Angularjs - custom directives part 05
Mohd Abdul Baquee
Angularjs Services part 03
Angularjs Services part 03Angularjs Services part 03
Angularjs Services part 03
Mohd Abdul Baquee
Angularjs scope part 02
Angularjs scope part 02Angularjs scope part 02
Angularjs scope part 02
Mohd Abdul Baquee
Jquery for Beginners
Jquery for BeginnersJquery for Beginners
Jquery for Beginners
Mohd Abdul Baquee
Cursor - AI Code Editor: Revolutionizing Coding with AI-Powered Tools
Cursor - AI Code Editor: Revolutionizing Coding with AI-Powered ToolsCursor - AI Code Editor: Revolutionizing Coding with AI-Powered Tools
Cursor - AI Code Editor: Revolutionizing Coding with AI-Powered Tools
Mohd Abdul Baquee
Mastering REST APIs: A Comprehensive Guide to Building and Using REST Clients
Mastering REST APIs: A Comprehensive Guide to Building and Using REST ClientsMastering REST APIs: A Comprehensive Guide to Building and Using REST Clients
Mastering REST APIs: A Comprehensive Guide to Building and Using REST Clients
Mohd Abdul Baquee
Angularjs - custom directives part 05
Angularjs - custom directives part 05Angularjs - custom directives part 05
Angularjs - custom directives part 05
Mohd Abdul Baquee
Angularjs Services part 03
Angularjs Services part 03Angularjs Services part 03
Angularjs Services part 03
Mohd Abdul Baquee

Recently uploaded (20)

Mixed_Sinhala_Dual_Male_Names (1).pdf...
Mixed_Sinhala_Dual_Male_Names (1).pdf...Mixed_Sinhala_Dual_Male_Names (1).pdf...
Mixed_Sinhala_Dual_Male_Names (1).pdf...
keshanf79
BUSINESS QUIZ | THE QUIZ CLUB OF PSGCAS | 17TH MARCH 2025 .pptx
BUSINESS QUIZ | THE QUIZ CLUB OF PSGCAS | 17TH MARCH 2025 .pptxBUSINESS QUIZ | THE QUIZ CLUB OF PSGCAS | 17TH MARCH 2025 .pptx
BUSINESS QUIZ | THE QUIZ CLUB OF PSGCAS | 17TH MARCH 2025 .pptx
Quiz Club of PSG College of Arts & Science
Anthelmintic Agent.pptx by Mrs. Manjushri P. Dabhade
Anthelmintic Agent.pptx by Mrs. Manjushri P. DabhadeAnthelmintic Agent.pptx by Mrs. Manjushri P. Dabhade
Anthelmintic Agent.pptx by Mrs. Manjushri P. Dabhade
Dabhade madam Dabhade
BIOPHARMACEUTICS AND PHARMACOKINETICS(BP604T) - Copy (3).pptx
BIOPHARMACEUTICS AND PHARMACOKINETICS(BP604T) - Copy (3).pptxBIOPHARMACEUTICS AND PHARMACOKINETICS(BP604T) - Copy (3).pptx
BIOPHARMACEUTICS AND PHARMACOKINETICS(BP604T) - Copy (3).pptx
maniramkumar
Strategic Corporate Social Responsibility: Sustainable Value Creation Fourth
Strategic Corporate Social Responsibility: Sustainable Value Creation FourthStrategic Corporate Social Responsibility: Sustainable Value Creation Fourth
Strategic Corporate Social Responsibility: Sustainable Value Creation Fourth
keileyrazawi
Research in Physical Education by Diwakar Kashyap Sir
Research in Physical Education by Diwakar Kashyap SirResearch in Physical Education by Diwakar Kashyap Sir
Research in Physical Education by Diwakar Kashyap Sir
Diwakar Kashyap
"The Write Path: Navigating Research Writing, Publication, and Professional G...
"The Write Path: Navigating Research Writing, Publication, and Professional G..."The Write Path: Navigating Research Writing, Publication, and Professional G...
"The Write Path: Navigating Research Writing, Publication, and Professional G...
neelottama
Bioinformatics: History of Bioinformatics, Components of Bioinformatics, Geno...
Bioinformatics: History of Bioinformatics, Components of Bioinformatics, Geno...Bioinformatics: History of Bioinformatics, Components of Bioinformatics, Geno...
Bioinformatics: History of Bioinformatics, Components of Bioinformatics, Geno...
A Biodiction : A Unit of Dr. Divya Sharma
Test Bank Pharmacology 3rd Edition Brenner Stevens
Test Bank Pharmacology 3rd Edition Brenner  StevensTest Bank Pharmacology 3rd Edition Brenner  Stevens
Test Bank Pharmacology 3rd Edition Brenner Stevens
evakimworwa38
IB-Unit-4 BBA BVIMR 2022 Syllabus_watermark.pdf
IB-Unit-4 BBA BVIMR 2022 Syllabus_watermark.pdfIB-Unit-4 BBA BVIMR 2022 Syllabus_watermark.pdf
IB-Unit-4 BBA BVIMR 2022 Syllabus_watermark.pdf
Dr. Mahtab Alam
How to process Interwarehouse and Intrawarehouse transfers in Odoo
How to process Interwarehouse and Intrawarehouse transfers in OdooHow to process Interwarehouse and Intrawarehouse transfers in Odoo
How to process Interwarehouse and Intrawarehouse transfers in Odoo
Celine George
Unit No. 4 - Immunopharmacologyslides.pptx
Unit No. 4 - Immunopharmacologyslides.pptxUnit No. 4 - Immunopharmacologyslides.pptx
Unit No. 4 - Immunopharmacologyslides.pptx
Ashish Umale
Combinatorial_Chemistry.pptx by Mrs. Manjushri P. Dabhade
Combinatorial_Chemistry.pptx by Mrs. Manjushri P. DabhadeCombinatorial_Chemistry.pptx by Mrs. Manjushri P. Dabhade
Combinatorial_Chemistry.pptx by Mrs. Manjushri P. Dabhade
Dabhade madam Dabhade
Analysis of Conf File Parameters in Odoo 17
Analysis of Conf File Parameters in Odoo 17Analysis of Conf File Parameters in Odoo 17
Analysis of Conf File Parameters in Odoo 17
Celine George
Anti-Protozoal Agents.pptx by Mrs. Manjushri P. Dabhade
Anti-Protozoal Agents.pptx by Mrs. Manjushri P. DabhadeAnti-Protozoal Agents.pptx by Mrs. Manjushri P. Dabhade
Anti-Protozoal Agents.pptx by Mrs. Manjushri P. Dabhade
Dabhade madam Dabhade
MUSIC QUIZ | THE QUIZ CLUB OF PSGCAS | 12 MARCH 2025
MUSIC QUIZ | THE QUIZ CLUB OF PSGCAS | 12 MARCH 2025MUSIC QUIZ | THE QUIZ CLUB OF PSGCAS | 12 MARCH 2025
MUSIC QUIZ | THE QUIZ CLUB OF PSGCAS | 12 MARCH 2025
Quiz Club of PSG College of Arts & Science
Using GenAI for Universal Design for Learning
Using GenAI for Universal Design for LearningUsing GenAI for Universal Design for Learning
Using GenAI for Universal Design for Learning
Damian T. Gordon
Synthesis for VIth SEM 21-2-25.pptx by Mrs. Manjushri P. Dabhade
Synthesis for VIth SEM 21-2-25.pptx by Mrs. Manjushri P. DabhadeSynthesis for VIth SEM 21-2-25.pptx by Mrs. Manjushri P. Dabhade
Synthesis for VIth SEM 21-2-25.pptx by Mrs. Manjushri P. Dabhade
Dabhade madam Dabhade
technology in banking ppt FOR E-CONTENT -2.ppt
technology in banking ppt  FOR E-CONTENT -2.ppttechnology in banking ppt  FOR E-CONTENT -2.ppt
technology in banking ppt FOR E-CONTENT -2.ppt
HARIHARAN A
Conrad "Accessibility Essentials: Introductory Seminar"
Conrad "Accessibility Essentials: Introductory Seminar"Conrad "Accessibility Essentials: Introductory Seminar"
Conrad "Accessibility Essentials: Introductory Seminar"
National Information Standards Organization (NISO)
Mixed_Sinhala_Dual_Male_Names (1).pdf...
Mixed_Sinhala_Dual_Male_Names (1).pdf...Mixed_Sinhala_Dual_Male_Names (1).pdf...
Mixed_Sinhala_Dual_Male_Names (1).pdf...
keshanf79
Anthelmintic Agent.pptx by Mrs. Manjushri P. Dabhade
Anthelmintic Agent.pptx by Mrs. Manjushri P. DabhadeAnthelmintic Agent.pptx by Mrs. Manjushri P. Dabhade
Anthelmintic Agent.pptx by Mrs. Manjushri P. Dabhade
Dabhade madam Dabhade
BIOPHARMACEUTICS AND PHARMACOKINETICS(BP604T) - Copy (3).pptx
BIOPHARMACEUTICS AND PHARMACOKINETICS(BP604T) - Copy (3).pptxBIOPHARMACEUTICS AND PHARMACOKINETICS(BP604T) - Copy (3).pptx
BIOPHARMACEUTICS AND PHARMACOKINETICS(BP604T) - Copy (3).pptx
maniramkumar
Strategic Corporate Social Responsibility: Sustainable Value Creation Fourth
Strategic Corporate Social Responsibility: Sustainable Value Creation FourthStrategic Corporate Social Responsibility: Sustainable Value Creation Fourth
Strategic Corporate Social Responsibility: Sustainable Value Creation Fourth
keileyrazawi
Research in Physical Education by Diwakar Kashyap Sir
Research in Physical Education by Diwakar Kashyap SirResearch in Physical Education by Diwakar Kashyap Sir
Research in Physical Education by Diwakar Kashyap Sir
Diwakar Kashyap
"The Write Path: Navigating Research Writing, Publication, and Professional G...
"The Write Path: Navigating Research Writing, Publication, and Professional G..."The Write Path: Navigating Research Writing, Publication, and Professional G...
"The Write Path: Navigating Research Writing, Publication, and Professional G...
neelottama
Bioinformatics: History of Bioinformatics, Components of Bioinformatics, Geno...
Bioinformatics: History of Bioinformatics, Components of Bioinformatics, Geno...Bioinformatics: History of Bioinformatics, Components of Bioinformatics, Geno...
Bioinformatics: History of Bioinformatics, Components of Bioinformatics, Geno...
A Biodiction : A Unit of Dr. Divya Sharma
Test Bank Pharmacology 3rd Edition Brenner Stevens
Test Bank Pharmacology 3rd Edition Brenner  StevensTest Bank Pharmacology 3rd Edition Brenner  Stevens
Test Bank Pharmacology 3rd Edition Brenner Stevens
evakimworwa38
IB-Unit-4 BBA BVIMR 2022 Syllabus_watermark.pdf
IB-Unit-4 BBA BVIMR 2022 Syllabus_watermark.pdfIB-Unit-4 BBA BVIMR 2022 Syllabus_watermark.pdf
IB-Unit-4 BBA BVIMR 2022 Syllabus_watermark.pdf
Dr. Mahtab Alam
How to process Interwarehouse and Intrawarehouse transfers in Odoo
How to process Interwarehouse and Intrawarehouse transfers in OdooHow to process Interwarehouse and Intrawarehouse transfers in Odoo
How to process Interwarehouse and Intrawarehouse transfers in Odoo
Celine George
Unit No. 4 - Immunopharmacologyslides.pptx
Unit No. 4 - Immunopharmacologyslides.pptxUnit No. 4 - Immunopharmacologyslides.pptx
Unit No. 4 - Immunopharmacologyslides.pptx
Ashish Umale
Combinatorial_Chemistry.pptx by Mrs. Manjushri P. Dabhade
Combinatorial_Chemistry.pptx by Mrs. Manjushri P. DabhadeCombinatorial_Chemistry.pptx by Mrs. Manjushri P. Dabhade
Combinatorial_Chemistry.pptx by Mrs. Manjushri P. Dabhade
Dabhade madam Dabhade
Analysis of Conf File Parameters in Odoo 17
Analysis of Conf File Parameters in Odoo 17Analysis of Conf File Parameters in Odoo 17
Analysis of Conf File Parameters in Odoo 17
Celine George
Anti-Protozoal Agents.pptx by Mrs. Manjushri P. Dabhade
Anti-Protozoal Agents.pptx by Mrs. Manjushri P. DabhadeAnti-Protozoal Agents.pptx by Mrs. Manjushri P. Dabhade
Anti-Protozoal Agents.pptx by Mrs. Manjushri P. Dabhade
Dabhade madam Dabhade
Using GenAI for Universal Design for Learning
Using GenAI for Universal Design for LearningUsing GenAI for Universal Design for Learning
Using GenAI for Universal Design for Learning
Damian T. Gordon
Synthesis for VIth SEM 21-2-25.pptx by Mrs. Manjushri P. Dabhade
Synthesis for VIth SEM 21-2-25.pptx by Mrs. Manjushri P. DabhadeSynthesis for VIth SEM 21-2-25.pptx by Mrs. Manjushri P. Dabhade
Synthesis for VIth SEM 21-2-25.pptx by Mrs. Manjushri P. Dabhade
Dabhade madam Dabhade
technology in banking ppt FOR E-CONTENT -2.ppt
technology in banking ppt  FOR E-CONTENT -2.ppttechnology in banking ppt  FOR E-CONTENT -2.ppt
technology in banking ppt FOR E-CONTENT -2.ppt
HARIHARAN A

Angularjs rounting part 04

  • 2. What is Routing in AngularJS? Routing means switch to multiple pages without reloading entire application any time. Achieving this goal you must have to use ['ngRoute'] module 樽n your application. ngRoute module routes your application to different pages without reloading. You can download ngRoute library file from AngularJS website. Download ngRoute library with matching of your AngularJS version. Example: <angularjs/1.6.4/angular.min.js> <angularjs/1.6.4/angular-route.js>
  • 3. Where Does it Go? Your application needs a container to put the content provided by the routing. This container is the ng-view directive There are three different ways to include the ng-view directive in your application: <div ng-view></div> <ng-view></ng-view> <div class="ng-view"></div> Applications can only have one ng-view directive
  • 4. $routeProvider $routeProvider you can define what page to display when a user clicks a link. $routeProvider you can also define a controller for each "view".
  • 5. template VS templateUrl VS otherwise templateUrl property in the $routeProvider.when method template property, which allows you to write HTML directly in the property value, and not refer to a page otherwise method, which is the default route when none of the others get a match.

Editor's Notes