Html 为什么指令ng视图在我的案例中不起作用？_Html_Angularjs_Ng View

Html 为什么指令ng视图在我的案例中不起作用？

html angularjs

Html 为什么指令ng视图在我的案例中不起作用？,html,angularjs,ng-view,Html,Angularjs,Ng View,我正在构建一个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

我正在构建一个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>


我的HTML文件
切换导航

我在浏览器中没有错误，但是当我加载

index.html

时，不包括

home.html

。我想知道为什么？

index.html

仅包含菜单，但

ng视图

不起作用，我的部分未加载

增加：谢谢，我注意到我在模块行的配置上有一个错误，

var-app=angular.module（'app'，['ngRoute'，'ngResource'，'ui-bootstrap']）
我删除了错误的ui引导加载。所以我的代码是
现在它工作了，我稍后将看到为什么我不能加载ui引导模块。感谢@Edminsson为您在Plunker粘贴的代码您有两个ng应用程序声明。您应该删除html元素中的一个。
在“home”的配置中，您还编写了“template”而不是“templateUrl”
这是一个有效的
它是否适用于任何其他路由？请查看在浏览器开发人员工具中发出的ajax请求，以了解发出请求的位置。我会尝试删除templateUrl中的/app/，我已经删除了templateUrl中的/app/并进行了测试。很抱歉，它不起作用问题不是templateUrl:“/app/partials/home.html”中的应用程序。它是中的空ng应用程序。删除此ng应用程序。您在body元素中有另一个ng应用程序。您应该只有一个ng应用程序声明。
app.config(function ($routeProvider) {
    $routeProvider.when('/', {
        controller: 'HomeController',
        templateUrl: '/app/partials/home.html'
    })
   ...
}