Question

我是角度JS的新手，而ng-view无效。

以下是AngularFormsApp.js的代码

var angularFormsApp = angular.module('angularFormsApp', ["ngRoute"]);

angularFormsApp.config(function ($routeProvider) {
$routeProvider
.when("/home", {
    templateUrl: "app/Home.html",
    controller: "HomeController"

})
.when("/newEOIForm", {

    templateUrl: "app/EOIForm/eoifTemplate.html",
    controller: "eoifController"

})
.otherwise({

    redirectTo: "/Home"
});
});

angularFormsApp.controller("HomeController",
function ($scope, $location) {
    $scope.addNewEOI = function () {
        $location.path('/newEOIForm');

    };
});

下面是html代码。

<!DOCTYPE html>
<html ng-app="angularFormsApp">
<head>
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="app/AngularFormsApp.js"></script>
<script src="app/EOIForm/eoifController.js"></script>
<script src="app/EOIForm/eoifDirective.js"></script>
<script src="app/EOIForm/eoifService.js"></script>


</head>
 <body ng-controller="eoifController" class="container">

<div class="container">
<div class="row">
<div class="col-sm-12">
  <div class="nav">
    <a href="#home" class="button">Home</a>
    <a href="#about" class="button">About</a>
    <a href="#detail" class="button">Detail</a>
   </div>
   </div>
   </div>
   </div>

  <div class="container">
   <div ng-view=""></div>
  </div>

  </body>
  </html>

以下是我的根结构。

DEMO HERE

为什么ng-view不起作用，我也无法调试代码。

Answer 1

小心$routeProvider.otherwise({redirectTo: '/Home'})。

应该是：

$routeProvider.otherwise({redirectTo: '/home'})

Answer 2

请将index.html中的href链接为：

<a href="#home/" class="button">Home</a>
<a href="#about/" class="button">About</a>
<a href="#detail/" class="button">Detail</a>

在你的配置中：

angularFormsApp.config(function ($routeProvider) {
$locationProvider.hashPrefix('');

// Rest of the code

ng-View在AngularJS中不起作用

2 个答案: