Question

我以角度构建了以下路线。

路线

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

'$routeProvider', '$locationProvider',
function($routeProvider,$locationProvider) {
    $locationProvider.html5Mode(true);

    $routeProvider
        .when('/items/', {
            templateUrl: '/app/items/index.html',
            controller: 'ItemsController'
        })
        .when('/', {
            templateUrl: '/app/home/index.html',
            controller: 'HomeController'
        })

}
]);

每条路线都有自己的模板和控制器。

TEMPLATES

项/ index.html中

<h2>Items</h2>

<div ng-repeat ="item in items">
  {{item}}
</div>

家/ index.html中

<h2>Home</h2>

<p>{{message}}</p>

的index.html

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <title>Configuration and Routing</title>
    <link rel = "stylesheet" href ="bootstrap.min.css">

    <base href="/" />

  </head>
  <body>
    <div class ="container">
        <h1>Configuration and Routing</h1>
        <div class = "navbar">
            <ul class ="nav navbar-nav">
                <li><a href="/">Home</a></li>
                <li><a href="/items">Items</a></li>
            </ul>
        </div>
        <div ng-view>
            <h4>{{ message }}</h4>

        </div>

    </div>
    <script src = "angular.min.js"></script>
    <script src="angular-route.min.js"></script>
    <script src ="./app/app.js"></script>


  </body >

 </html>

控制器

上述ItemsController

app.controller('ItemsController',[
   '$scope',
   function($scope) {

      $scope.items = ['First','Second','Third']
   }
])

的HomeController

app.controller('HomeController', [
  '$scope',
  function($scope) {
    $scope.message = 'Welcome!';

  }
]);

我遇到的问题是浏览器只显示部分模板，但不显示来自控制器的数据（即“消息”和“项目”），它应该在具有ng-view属性的div下显示。我也得到了来自浏览器“Argument'HomeController'和ItemsController的以下错误不是未定义的函数”。

我该如何解决这个问题？

模板不会从角度控制器渲染数据

0 个答案: