Question

我几个月来一直在努力弄清楚我的角度路线出了什么问题。有人可以快速看看这个插件并告诉我为什么ng-view不起作用？ $ scope.name无法正常显示，ng-view似乎无法正常工作。 http://plnkr.co/edit/7vtgxmvqI0eiDALIW7G8

的script.js

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

app.config(function($routeProvider) {

    $routeProvider.when('about.html', {
        templateURL: "about.html",
        controller: 'AboutController'
    })     
});

app.controller('AboutController', function($scope) {
    $scope.name = "marcus";
});

的index.html

<!DOCTYPE html>
<html ng-app="blog">

  <head>
    <script src="https://code.angularjs.org/1.2.2/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.2.2/angular-route.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <a href="about.html">Notes</a>

    <h1>Click the Link ^</h1>
    <h2>{{2+2}}</h2>

    <div ng-view>

      <p>ng-view should be loading data from about.html right here but it's not working</p>

    </div>
  </body>
</html>

about.html

<html>
  <body>
    <h1>Hello</h1>

    <h2>{{name}}</h2>
  </body>
</html>

Answer 1

index.html中的

更改href，如下所示：

<a href="#/about.html">Notes</a>

也在script.js中：

$routeProvider.when('/about.html', {
    templateUrl: "about.html",
    controller: 'AboutController'
  })

这些更改使您的代码为我工作。据我所知，问题在于路由。

Answer 2

问题

使用预览模式，然后您会在页面Plunker - Angular Login App的标签中看到标题。 http://embed.plnkr.co/ZVVArcJlb8QeGUaFNgBu/preview

问题

此外，Javascript是一种区分大小写的语言。

使用模板网址代替模板网址：

templateUrl: "about.html",

http://plnkr.co/edit/9c5JKpxRnskBY6EegFGF?p=preview

我使用Angular 1.4.6进行测试

我无法让ng-view正常工作

2 个答案: