我正在尝试创建一个单页网站，该网站根据 Bootstrap 导航栏上单击的按钮加载 View 。但是，home.html 的内容不显示。谁能告诉我出了什么问题吗？
好的，我有这个index.html:
<!DOCTYPE html>
<!-- define angular app -->
<html ng-app="scotchApp">
<head>
<!-- SCROLLS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="app.js"></script>
<script src="controllers/mainController.js"></script>
<script src="utils/basicUtils.js"></script>
</head>
<!-- define angular controller -->
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-home"></i> User</a></li>
<li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
<li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
</ul>
</div>
</nav>
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
这个app.js:
console.log("abouy to call the /home page and the maincontroller");
angular.module('scotchApp', ['ngRoute', 'basicUtils']).config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
});
});
还有这个 home.html:
<div>
<form ng-submit = "add(USERID)">
User ID:<br>
<input type = "text" name = "USERID" ng-model = "USERID"><br>
<input type = "submit" value = "Submit">
</form>
<table border="1">
<tr>
<td>{{returnName}}</td>
<td>{{AID}}</td>
</tr>
</table>
</div>
这个 Controller :
angular.module('scotchApp', ['ngRoute', 'basicUtils']).controller('mainController', ['$scope', '$route', '$http', 'AuthTokenService', function($scope, $route, $http, AuthTokenService){
// create a message to display in our view
var userurl = '';
$scope.add = function(USERID) {
userurl = 'http://dev.hypr.com:8080/DevAPI/rest/uafstats/user/'+USERID; //+USERID;
var url = 'http://dev.hypr.com:8080/DevAPI/rest/login';
var data = {userId: USERID};
var userdata = {userid: USERID};
var config =
{
headers: {
'API_KEY': '864d9a941f0520653e51eae4935f6a640256f2f85610d0b281fa26a9dd',
'Content-Type': 'application/json'
}
};
var authToken = AuthTokenService.getAuthToken(url, data, config);
var userconfig =
{
headers: {
'AUTH_TOKEN': authToken,
'Content-Type': 'application/json'
}
};
var userPostRequest = $.get(userurl, userdata, userconfig);
var userjson = '{\"USER_DATA_RETRIEVED\" : \"fail\"}';
userPostRequest.done(function (userdata) {
userjson = JSON.stringify(userdata);
console.log("userjson :: " + userjson);
var postResponse = jQuery.parseJSON(userjson);
$scope.returnName = postResponse['username'];
$scope.AID = postResponse['appId']
});
};
}]);
最佳答案
来自 Angular 文档: 使用 angular.module('myModule', []) 将创建模块 myModule 并覆盖任何名为 myModule 的现有模块。使用 angular.module('myModule') 检索现有模块。
当您声明 Controller 时，您在模块调用中指定了第二个参数，您将重新声明模块并丢失路由配置。
省略第二个参数
angular.module('scotchApp', ['ngRoute', 'basicUtils']).controller('mainController')
应该是angular.module('scotchApp').controller('mainController')
仅使用依赖项声明模块一次，并在添加 Controller 或配置时使用不带依赖项数组的模块调用。
如果不是这样，它可能是您的模板的路径，如果是这种情况，加载应用程序时控制台中将会出现错误。
关于javascript - AngularJS 与 Bootstrap 导航栏一起用于单页应用程序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37793593/