The AngularJS route (ngRoute
) module is a Single Page Application (SPA). It is a web app that loads a single HTML page and dynamically updates that page as the user interacts with the web app.
AngularJS supports SPA using routing module ngRoute
. This routing module acts based on the url. When a user requests a specific url, the routing engine captures that url and renders the view based on the defined routing rules.
Are you create routing application, first include the AngularJS route module :
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
Then you must add the ngRoute as a dependency in the application module :
var app = angular.module("myApp", ["ngRoute"]);
$routeProvider Example
The AngularJS $routeProvider
you can define what page to display when a user clicks a link.
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Routing Application</title>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript" src="../js/angular-route.js"></script>
</head>
<body ng-app="myApp">
<a href="#!html">HTML</a>
<a href="#!css">CSS</a>
<a href="#!bootstrap">Bootstrap</a>
<a href="#!angularjs">AngularJS</a>
<a href="#!javascript">JavaScript</a>
<div ng-view>
</div>
<h2>www.freetimelearning.com</h2>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/html", {
templateUrl : "html.html"
})
.when("/css", {
templateUrl : "css.html"
})
.when("/bootstrap", {
templateUrl : "bootstrap.html"
})
.when("/angularjs", {
templateUrl : "angularjs.html"
})
.when("/javascript", {
templateUrl : "javascript.html"
});
});
</script>
</body>
</html>
Includeing files in your routing application :
html.html
<h2>HTML</h2>
<p>Hyper Text Markup Language (HTML) was invented by "Tim Berner Lee".He was a British Computer Scientist. The first web page was created at CERN by Tim Berners-Lee on August 6, 1991. You can visit and browse the first website and first web page at the http://info.cern.ch/ address. </p>
css.html
<h2>CSS</h2>
<p>CSS is the acronym for "Cascading Style Sheet". Tutorial provides basic and advanced concepts of CSS technology. Our CSS tutorial is developed for beginners and professionals.</p>
Bootstrap.html
<h2>Bootstrap</h2>
<p>Bootstrap is the most popular HTML, CSS and JavaScript framework for developing responsive, mobile-first web sites. Bootstrap is faster and easier web development.</p>
angularJS.html
<h2>AngularJS</h2>
<p>Angular JS is an JavaScript-based open-source front-end web application framework mainly maintained by Google. AngularJS is based on the MVC pattern (Model View Control), it's mainly used in Single Page Application (SPA) projects. </p>
JavaScript.html
<h2>Java Script</h2>
<p>JavaScript is the programming language of the Web. Javascript Most commonly used websites this is client-side script to interact with the user and make dynamic pages. All modern web browsers on desktops, tablets, and smart phones are using JavaScript. </p>
Controllers
The AngularJS $routeProvider
you can also define a controller for each "view".
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AngularJS Routing Controller</title>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript" src="../js/angular-route.js"></script>
</head>
<body ng-app="myApp">
<a href="#!bootstrap_1">Bootstrap</a>
<a href="#!javascript_1">Javascript</a>
<a href="#!angularjs_1">AngularJS</a>
<div ng-view></div>
<h2>www.freetimelearning.com</h2>
<script type="text/javascript">
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/bootstrap_1", {
templateUrl : "bootstrap_1.html",
controller : "bootstrapCtrl"
})
.when("/javascript_1", {
templateUrl : "javascript_1.html",
controller : "javascriptCtrl"
})
.when("/angularjs_1", {
templateUrl : "angularjs_1.html",
controller : "angularJsCtrl"
});
});
app.controller("bootstrapCtrl", function ($scope) {
$scope.msg = "This is a Bootstrap Controller in FTL (www.freetimelearning).";
});
app.controller("javascriptCtrl", function ($scope) {
$scope.msg = "This is a Javascript Controller in FTL (www.freetimelearning).";
});
app.controller("angularJsCtrl", function ($scope) {
$scope.msg = "This is a Bootstrap Controller in FTL (www.freetimelearning).";
});
</script>
</body>
</html>
Includeing files in your route controller application :
bootstrap_1.html
<h2>Bootstrap</h2>
<p>Bootstrap is the most popular HTML, CSS and JavaScript framework for developing responsive, mobile-first web sites. Bootstrap is faster and easier web development.</p>
<p> {{msg}} </p>
javascript_1.html
<h2>Java Script</h2>
<p>JavaScript is the programming language of the Web. Javascript Most commonly used websites this is client-side script to interact with the user and make dynamic pages. All modern web browsers on desktops, tablets, and smart phones are using JavaScript. </p>
<p> {{msg}} </p>
angularjs_1.html
<h2>AngularJS</h2>
<p>Angular JS is an JavaScript-based open-source front-end web application framework mainly maintained by Google. AngularJS is based on the MVC pattern (Model View Control), it's mainly used in Single Page Application (SPA) projects. </p>
<p> {{msg}} </p>