Question

出于某种原因，我似乎无法前往add屏幕。我究竟做错了什么？这是我的app.js

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

moviesApp.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'partials/home.html',
            controller: 'MoviesController'
        })
        .when('/add', {
            templateUrl: 'partials/add.html',
            controller: 'MoviesController'
        })
        .when('/edit', {
            templateUrl: 'partials/edit.html',
            controller: 'MoviesController'
        });
});

这里是锚标记：

<a href="#add">Add Movie</a>

我home.html模板中包含的内容是index.html的一部分。

应用程序没有崩溃......它只是没有做任何事情。

对我做错了什么的想法？

Answer 1

可能是因为angularjs版本1.6中的默认哈希前缀发生了变化。你所写的内容在给定的上下文中起作用：Proof

您可以通过更改：

来确认这种情况

<a href="#add">Add Movie</a>

为：

<a href="#!add">Add Movie</a>

如果有效，请查看可能的解决方案：

AngularJS: ngRoute Not Working

如果你想让我表现得像你期望的那样（版本1.5），你可以从链接中选择灵魂3：

第3。从1.5 - 手动设置哈希前缀

返回旧行为

app.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);

Answer 2

设置路线启动事件以帮助调试问题

.run(function ($rootScope) {
    $rootScope.$on('$routeChangeStart', function (event, next, current) {
        console.log(event);
        console.log(current);
        console.log(next);
        console.log('$routeChangeStart: ' + next.originalPath)
    });
});

只需将此添加到路径配置

的末尾即可

作为旁注，我会在路由提供商上使用州提供商。状态提供程序允许您定义层次结构。使用它有点困难但更灵活。

简单的AngularJS路由无法正常工作

2 个答案: