Question

我是Angular.js的新手，我无法弄清楚为什么我的部分模板没有绑定到ng-view div。当我尝试用firebug检查它时，ng-view就不存在了。这是我的代码： html标题和正文：

<html lang="en" ng-app="BPMNApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<!-- External Libraries -->
    <script src="js/external/jquery-1.10.2.min.js"></script>
    <script src="js/external/modernizr-2.6.2.min.js"></script>
    <script src="js/external/angular.js"></script>
    <script src="js/external/angular-resource.js"></script>
    <script src="js/external/angular-route.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
   <script src="js/services.js"></script>


   </head>
  <!-- General Navigation Bar --> 
<nav>Simple Bootstrap nav
</nav>
<div><h1>View Should be right under here</h1></div>
<div id='contentcontainer'>
    <div class='container' ng-view></div>
  </div>

App：

'use strict';

/* App Module */

var BPMNApp = angular.module('BPMNApp', [
  'ngRoute',
  'BPMNControllers',
  'BPMNServices'
]);

BPMNApp.config(['$routeProvider','$resourceProvider','$locationProvider',
  function($routeProvider,$resourceProvider,$locationProvider) {
    $routeProvider.
      when('/landing', {
        templareUrl: 'partials/landing.html',
        controller : 'LandingCtrl'
  }).
  when('/process-definitions', {
    templateUrl: 'partials/process-definitions.html',
    controller: 'ProcessDefinitonCtrl'
  }).
  when('/process-definitions/:definitionId', {
    templateUrl: 'partials/definition-detail.html',
    controller: 'DefinitionDetailCtrl'
  }).
  otherwise({
    redirectTo: '/landing'
  });
//$locationProvider.html5Mode(true);
}]);

控制器：

var BPMNControllers = angular.module('BPMNControllers', []);

BPMNControllers.controller('LandingCtrl',['$scope',
  function($scope){
    $scope.welcome = 'BPMN - Rest Interface';
  }])


BPMNControllers.controller('ProcessDefinitionCtrl', ['$scope', 'ProcessDefinitions',
  function($scope, ProcessDefinitons) {
   $scope.defs = ProcessDefintions.query();
  }]);

BPMNControllers.controller('DefinitionDetailCtrl',      ['$scope','$routeParams','ProcessDefinitions',
  function($scope,$routeParams, ProcessDefinitions) {
    $scope.def = ProcessDefinitions.get({id : $routeParams.definitionId})

 }]);

和模板： process-definitions.html：

<div class="container-fluid">
<div class="row" ng-repeat="def in defs">
    <a href="/process-definitons/{{def.id}}"><div class="col-md-1">{{def.name}}    </div></a>
    <a href="/process-definitons/{{def.id}}"><div class="col-md-1">{{def.id}}    </div></a>
    <a href="/process-definitons/{{def.id}}"><div class="col-md-1">{{def.version}}</div></a>
</div>

landing.html：

<h1>{{welcome}}<h1>

即使是简单的landing.html也没有正确显示，我无法弄清楚原因。谢谢你的帮助。

Answer 1

<a href="/process-definitons/{{def.id}}">

你需要在网址前加#

<a href="#/process-definitons/{{def.id}}">

Answer 2

when（'/ landing'，{ templareUrl：'partials / landing.html'，控制器：'LandingCtrl' }）

我看到一个错字。将templareUrl更改为templateUrl。

ng-view不绑定partials，angularjs

2 个答案: