2015-06-15 7 views
1

Я изучаю маршрутизацию AngularJS и не могу понять, почему второй, когда() на $ routeProvider не работает.routeProvider - секунда, когда() не работает

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 (по какой-то причине, я не могу сохранить это как list.html в WebStorm)

<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 имеет другой цвет, чем 1-й, и в противном случае().

EDIT: Также помогите мне с $ locationProvider, который выдает эту ошибку при добавлении в app.config() - Ошибка: [$ location: nobase] $ location в режиме HTML5 требует наличия тега!

ответ

1

Вам нужно обновить с

href="/new" 

в

href="#/new" 
+0

ли хак или это, как предполагается, будет написано? Потому что я следовал учебнику, в котором человек раньше не использовал #. Но используется $ locationProvider для установки html5Mode (true). Но когда я пытаюсь это сделать, он выдает ошибку - Ошибка: [$ location: nobase] $ location в режиме HTML5 требует наличия тега ! – v1shnu

+0

Это не взломать. Это по дизайну. Тот, о котором вы говорите, является другим способом реализации вещи. Если вы хотите, я тоже могу добавить детали для этого. – nikhil

+0

PLS добавить их тоже nikhil. Это будет очень полезно для меня. – v1shnu

Смежные вопросы