Routing in angularJS
Two files are required to implement routing -
AngularJS Code
- Angular File - https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js
- Angular Route File - https://code.angularjs.org/1.6.4/angular-route.min.js
Click here to download Source Code
Layout - Index.html
<head>
<title></title>
<base href="/Routing/">
<script src="Scripts/angular.1.4.8.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
</head>
<body ng-app="MyRouteApp">
<div style="background-color:#ddd; padding:10px;">
<a href="Home/">Home</a> |
<a href="About/">About</a> |
<a href="Contact/">Contact Us</a>
</div>
<div>
<ng-view></ng-view>
</div>
</body>
<script src="Scripts/Application.js"></script>
AngularJS Code
/// <reference path="angular.1.4.8.min.js" />
var ngApp = angular.module("MyRouteApp", ["ngRoute"]);
ngApp.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl: "Templates/Home.html",
controller: "HomeCntrl"
})
.when("/Home", {
templateUrl: "Templates/Home.html",
controller: "HomeCntrl"
})
.when("/Contact", {
templateUrl: "Templates/Contact.html",
controller: "ContactCntrl"
})
.when("/About", {
templateUrl: "Templates/About.html",
controller: "AboutCntrl"
})
.otherwise({
templateUrl: "Templates/About.html",
controller: "AboutCntrl"
})
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
ngApp.controller("HomeCntrl", function ($scope) {
$scope.Message = "This Home Page";
});
ngApp.controller("ContactCntrl", function ($scope) {
$scope.Message = "This Contact Page";
});
ngApp.controller("AboutCntrl", function ($scope) {
$scope.Message = "This About Page";
});
Home.html
<h1>{{Message}}</h1>
Contact.Html
<h1>{{Message}}</h1>
About.html
<h1>{{Message}}</h1>
Click here to download Source Code
![CORS - Access-control-allow-origin header not present [SOLVED]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tnR7Ji7hcP2V5Oy0qt2YHf9KOcV-6RfAGsjEx7RoOTfsqMpADk4OcrruvnFWwWNdJzY9ccqKO4NYYxUZgivN4Xk7KCQtJDMdMTZsY)
No comments