Angularjs ng-view 没有响应

Question

我正在玩 angularjs，我找不到 ng-view 不起作用的原因。我做错了什么？

var app = angular.module('Demo', ['ngRoute'])
.config(function ($routeProvider) {
    $routeProvider.when('#/about', {
        templateUrl: 'about.html',
        controller: 'homeController'
    });
    $routeProvider.when('#/contacts', {
        template: 'contacts.html',
        controller: 'contactsController'
    });
});
app.controller('homeController', function ($scope) {
    alert('homeController');
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src=""//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js""></script>
<body ng-app>
<div class="menu">
    <ul>
        <li><a href="#/about">About</a></li>
        <li><a href="#/contacts">Contacts</a></li>
    </ul>
</div>

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

<template id="about.html">
  about
</template>

<template id="contacts.html">
  contacts
</template>
  </body>

Answer 1

这里有一些问题：

您的 angular-route 脚本源在 HTML 部分不正确。
您的 $routeProvider.when 行不需要“#”，所以我删除了它们。
您的一个模板使用了不正确的 templateUrl。它应该只是模板：因为你没有调用 URL.

这是一个有效的插件： https://plnkr.co/edit/GSoJ4sAxM8joH6zmrxjf?p=preview

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

// URLs should not have # in them
.config(function ($routeProvider) {
    $routeProvider.when('/about', {
        template: 'about.html',
        controller: 'homeController'
    });
    $routeProvider.when('/contacts', {
        template: 'contacts.html',
        controller: 'contactsController'
    });
});

app.controller('homeController', function ($scope) {
    alert('homeController');
});

app.controller('contactsController', function ($scope) {
    alert('contactsController');
});

Angularjs ng-view 没有响应

Angularjs ng-view does not respond

javascript

dom-events

angularjs