Question

我正在尝试创建一个单页网站，根据点击引导导航栏上的按钮加载视图。但是，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>

这个控制器：

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']
        });
    };
}]);

Answer 1

来自angular docs：使用angular.module（'myModule'，[]）将创建模块myModule并覆盖任何名为myModule的现有模块。使用angular.module（'myModule'）来检索现有模块。

声明控制器时，在模块调用中指定第二个参数，即可重新声明模块并丢失路由配置。

省略第二个参数

angular.module('scotchApp', ['ngRoute', 'basicUtils']).controller('mainController')

应为angular.module('scotchApp').controller('mainController')

仅使用依赖项声明模块一次，并在添加控制器或配置时使用不带依赖项数组的模块调用。

如果不是这样，它可能是模板的路径，那么在加载应用程序时控制台中会出现错误（如果是这种情况）。

AngularJS使用bootstrap导航栏为单页应用程序

1 个答案: