Angularjs Route Description: Define a routing rule (routeprovider) and then, through a different URL, tell (Ng-app) which page (HTML) to load and then render to (Ng-app) view (Ng-view).
Main interface index.html
<! DOCTYPE html>
<body>
<div ng-app= "Routeapp" >
<div ng-view></div><!--template will be added to this div--
</div>
<script src= "js/angular.min.js" ></script><!--load Angularjs Library--
<script src= "js/app.js" ></script><!--load App.js Library, define routing rules here--
<script src= "Js/main.js" ></script><!--define controller--
</body>
Defining Routing Rules app.js
var routeapp=angular.module ("Routeapp", []);
Routeapp.config (["$routeProvider", function ($routeProvider) {
$routeProvider. When ("/temp1", {
Templateurl:temp1/template1.html,
Controller: "MYCTRL1"
})
. When ("Temp2", {
Templateurl:temp2/template2.html,
Controller: "MyCtrl2"
}).
Otherwise ({
Redirectto: "/TEMP1";
});
}]);
Defining the Controller Main.js
Routeapp.controller ("MyCtrl1", ["$scope", function ($scope) {
Code
}])
. Controller ("MyCtrl2", ["$scope", function ($scope) {
Code
}]);
Defining Templates template1.html, template2.html
Angularjs Routing $routeProvider