I'm confused as to why the JavaScript isn't functioning properly.
Whenever I click on the links, the views fail to load.
<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>