Question

我学习AngularJS路由并且似乎无法弄清楚为什么$ routeProvider上的第二个when（）不起作用。

的index.html

<html lang="en" ng-app="myApp" class="no-js"> 
<head>
    <meta charset="utf-8">
    <title>My AngularJS App</title>
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
</head>
<body>
<div>
    <ng-view></ng-view>
</div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>

app.js

'use strict';

// Declare app level module which depends on views, and components
var app = angular.module('myApp', [
    'ngRoute'
]);
app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
        when('/', {templateUrl: 'partials/li.html', controller: 'MainCtrl'}).
        when('/new', {templateUrl: 'partials/edit.html'}).
        otherwise({redirectTo: "/"})
}]);

app.controller('MainCtrl', ['$scope', 'persons', function ($scope, persons) {
    $scope.persons = persons
}]);


app.factory('persons', [function () {
    var persons = [
        {fname: "Dave", lname: "Thomas"},
        {fname: "John", lname: "Smith"},
        {fname: "Jason", lname: "Doe"},
        {fname: "Stupid", lname: "Guy"},
    ];
    return persons;
}]);

li.html（出于某种原因，我无法将其保存为WebStorm中的list.html）

<table class="table table-striped" style="width: auto" >
    <thead>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <td><a href="/new"><span class="glyphicon glyphicon-plus"></span></a></td>
    </tr>
    </thead>
    <tbody ng-repeat="person in persons">
    <tr >
        <td>{{person.fname}}</td>
        <td>{{person.lname}}</td>
        <td><a href="/edit"><span class="glyphicon glyphicon-edit"></span ></a></td>
    </tr>
    </tbody>
</table>

每当我点击加号图标时，它都会抛出404错误。即使在IDE中，app.js中的第二个颜色与第一个颜色不同，否则为（）。

编辑：还帮我解决$ locationProvider在添加到app.config（）时抛出此错误 - 错误：[$ location：nobase] $ HTML5模式下的$ location需要标记存在！

Answer 1

您需要从

更新

href="/new"

到

href="#/new"

routeProvider - 第二次（）不工作时

1 个答案: