My Technical Notes

Friday, 9 October 2015

Angular Simple Routing Example (External Templates)

This example works in Firefox, but not in Chrome.

partials/templateOne.html


<div>
    this is template one!
</div>

partials/templateTwo.html


<div>
    this is template two!
</div>

index.html


<!DOCTYPE html>
<html>
<head>
    <title>Angular simple routing</title>
</head>
<body>
    <div ng-app="app">
        <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: 'partials/templateOne.html', controller: 'pathOneCtrl' })
                .when('/pathTwo', { templateUrl: 'partials/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 (Inline Templates).

No comments: