Question

我正在构建一个AngularJS应用程序。我有以下结构：

--/app
-----app.js
-----index.html
-----/css(bootstrap,app.css,...)
-----/fonts
-----/css(bootstrap,app.css,...)
-----/images
-----/partials(home.html, register.html, login.html)

这是我的app.js文件：

//configure the app : load module, configure route

var app = angular.module('app',['ngRoute','ngResource','ui.bootstrap']);

app.config(function ($routeProvider) {
    $routeProvider.when('/', {
        controller: 'HomeController',
        template: '/app/partials/home.html'
    }).when('/register', {
            controller: 'HomeController',
            templateUrl: '/app/partials/register.html'
        }).when('/login', {
            controller: 'HomeController',
            templateUrl: '/app/partials/login.html'
        }).otherwise({
            redirectTo: '/'
        });
});

app.controller('HomeController', function ($scope) {
    //nothing to do time being
});

这是index.html：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My HTML File</title>
      <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />

  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/bootstrap-theme.css">
  <link rel="stylesheet" href="css/toaster.css">
  <link rel="stylesheet" href="css/loading-bar.css">
  <link rel="stylesheet" href="css/app.css"> 
  <script src="libs/angular.js"></script>
  <script src="libs/angular-resource.js"></script>
  <script src="libs/angular-route.js"></script>
  <script src="libs/angular-animate.js"></script>
  <script src="libs/toaster.js"></script>
  <script src="libs/loading-bar.js"></script>
  <script src="libs/ui-bootstrap-0.11.0.js"></script>
  <script src="libs/ui-bootstrap-tpls-0.11.0.js"></script>
  <script src="app.js"></script>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
 <link href="favicon.ico" rel="shortcut icon" />
</head>
<body ng-app="app">
    <div id="page">
 <!--   <header class="container"> -->
            <!-- nav bar-->
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Crowd Recruitment</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li ng-class="{'active':isActive('/ourmagic')}"><a href="#/ourmagic">How it's work ?</a></li>
        <li ng-class="{'active':isActive('/register')}"><a href="#/register">Register</a></li>
        <li ng-class="{'active':isActive('/login')}"><a href="#/login">Login</a></li>
        <!--<li><button type="submit" class="btn btn-default pull-right">Login</button></li>-->
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
     <!--   </header>-->
<div ng-view></div>
</div>


</body>
</html>

我在浏览器中没有错误，但是当我加载index.html时，home.html不包括在内。我想知道为什么？ index.html只包含菜单，但ng-view无效，我的部分未加载。

补充：谢谢，我注意到模块行var app = angular.module('app',['ngRoute','ngResource','ui-bootstrap']);

的配置有误

我删除了错误的ui-bootstrap加载。所以我的代码是现在它可以工作我稍后会看到为什么我无法加载ui-bootstrap模块。感谢@Edminsson代码，您可以在Plunker上粘贴

Answer 1

您有两个ng-app声明。您应该删除html元素中的那个。你还写了＆＃34; template＆＃34;而不是＆＃34; templateUrl＆＃34;在＆＃34; home＆＃34;。

的配置中

app.config(function ($routeProvider) {
    $routeProvider.when('/', {
        controller: 'HomeController',
        templateUrl: '/app/partials/home.html'
    })
   ...
}

这是一个有效的plunker

为什么指令ng-view在我的情况下不起作用？

1 个答案: