AngularJS Routing, TutorialsPoint, AngularJS Routing Tutorial

AngularJS Routing

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 :

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>

Output :

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>

Output :

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

angularjs_1.html

AngularJS Tutorial