My Technical Notes

Friday, 9 October 2015

Angular Simple Routing Example (Inline Templates)


<!DOCTYPE html>
<html>
<head>
    <title>Angular simple routing</title>
</head>
<body>
    <div ng-app="app">
        <script type="text/ng-template" id="templateOne.html">
            this is template one!
        </script>
        <script type="text/ng-template" id="templateTwo.html">
            this is template two!
        </script>

        <div>
            <div ng-view></div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-route.js"></script>
    <script>
        var app = angular.module('app', ['ngRoute']);

        app.config(function ($routeProvider) {
            $routeProvider
                .when('/pathOne', { templateUrl: 'templateOne.html', controller: 'pathOneCtrl' })
                .when('/pathTwo', { templateUrl: 'templateTwo.html', controller: 'pathTwoCtrl' })
                .otherwise({ redirectTo: '/pathOne' });
        });

        app.controller('pathOneCtrl', function ($scope) {
        });

        app.controller('pathTwoCtrl', function ($scope) {
        });
    </script>
</body>
</html>

See also Angular Simple Routing (External Templates).

No comments: