AngularJS使用bootstrap navbar处理单页应用程序

我正在尝试创建一个单页面网站，它可以根据单击在引导栏上的按钮加载视图。但是，home.html的内容没有显示出来。谁能告诉我发生了什么问题？AngularJS使用bootstrap navbar处理单页应用程序

好了，所以我有这样的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'] 
     }); 
    }; 
}]);

来源

2016-06-13 James Falter

你也可以发布你的mainController代码吗？ – pparas

当然@pparas我加了控制器 –

postResponse的值是多少？ – Deep

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

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

省略第二个参数

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

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

与依赖性声明的模块只有一次，并添加控制器或配置时所使用的模块呼叫的没有依赖关系的数组。

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

来源

2016-06-13 16:49:41 marton

AngularJS使用bootstrap navbar处理单页应用程序

回答

相关问题