Search code examples
javascriptangularjsurl-routing

Angular Views aren't functioning properly


I have no idea why, but the JavaScript doesn't work.

The views don't get loaded when I click on the links

<html ng-app>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
        <script type="text/javascript">
        var app = angular.module("app");
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'views/default.html',
controller: 'default'
});
$routeProvider.when('/menu', {
templateUrl: 'views/menu.html',
controller: 'menu'
});
$routeProvider.otherwise({ redirectTo: '/' });
});
app.service( 'api', function($http)
{
this.get_id=function (js_data,success_fn) {
                $http({
                url: '/get_id',
                method: "POST",
                data: js_data,
                headers: {'Content-Type': 'application/json'}
            }).success(function (json) {var data=angular.fromJson(json);success_fn(data);});
            };

});
app.controller("default", function ($scope, $location) {
    $scope.test = "default";
});
app.controller("menu", function ($scope, api) {
    $scope.username = "UserName";
    $scope.get_id=function() {
        api.get_id(
                $scope.username,
                function (data)
                {alert(data);}
                    );
    }
});
        </script>
    </head>
    <body>
        <div >
            <a href="#/">home</a><br />
            <a href="#/menu">menu</a><br />
        </div>
        <div ng-view>
        </div>
    </body>
</html>

Solution

  • The route provider is an external dependency in the 1.2 branch. You'll need to add:

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.min.js"></script>
    

    You'll also need to add the ngRoute dependency:

    ie. angular.module('ngViewExample', ['ngRoute'])

    http://docs.angularjs.org/api/ngRoute.$routeProvider

    Dependencies Requires the ngRoute module to be installed.