Pulse7
9/9/2017 - 10:23 AM

Routing basics example

home.html
content_copyfile_download
<div>
    <h1>Welcome Home!</h1>
    <h2>{{message}}</h2>
    <a href="#!/about">About</a>
    <a href="#!/home">Home</a>
</div>
index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.js"></script>
    <script src="app.js"></script>
</head>
<body ng-app="App">
    <div ng-view></div>
</body>
</html>
app.js
content_copyfile_download
(function () {
    let app=angular.module("App", ["ngRoute"]);
    app.config(function($routeProvider){
        $routeProvider.when("/home",{
            templateUrl:"home.html",
            controller:"HomeController"
        })
        .when("/about",{
            templateUrl:"home.html",
            controller:"AboutController"
        })
        .otherwise({
            redirectTo:"/home"
        })
    })
    var HomeController = function($scope){
        $scope.message="ViewBag";
    }
    var AboutController = function($scope){
        $scope.message="About";
    }
    app.controller("HomeController",HomeController)
    app.controller("AboutController",AboutController)
})();