Question

我没有收到任何错误消息，因此我不确定错误是什么，但我的部分内容并没有加载到＆＃34;主要部分＆＃34;当我点击链接到他们。我不完全确定我的控制器和我的路由提供者是否应该在单独的js文件夹中，但我看到很多控制器和路由提供者的例子在同一个文件中，所以我想我是试试看。我正在运行SimpleHTTPServer来检查这一点。有什么想法吗？

HTML：

<html ng-init ng-app="vegApp">
<head>
<link rel="stylesheet" text="text/css" href="css/bootstrap.css">
<link rel="stylesheet" text="text/css" href="css/style.css">
<script type="text/javascript" src="angular/js/angular.js"></script>
<script src="text/javascript" src="angular/js/angular-route.js"></script>   
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="app/app.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">  </script>

</head>
<body ng-controller='itemListController'>  
 <div class="sidebar">
 <h3> <a href="#/login">log in</a></h3>
<h3> <a href="#/moreinfo">more info</a></h3>
<h3> <a href="#/recipes">recipes</a></h3>
 </div>

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

 </div>

</body>
</html>

APP.JS：

var vegApp = angular.module("vegApp", ["ngRoute", "itemListController"]);
var itemListController = angular.module("itemListController", []);

vegApp.config(['$routeProvider', function($routeProvider){

    $routeProvider
    .when('/', {
        templateUrl: 'partials/itemlist.html',
        controller: 'itemListController'
    })
    .when('/login', {
        templateUrl: 'partials/login.html',
        controller: 'itemListController'
    })
    .when('/moreinfo', {
        templateUrl: 'partials/moreinfo.html',
        controller: 'itemListController'
    })
    .when('/recipes', {
        templateUrl: 'partials/recipes.html',
        controller: 'itemListController'
    })
    .otherwise({
        redirectTo: '/login'
    });
}
]);

var vegApp = angular.module('vegApp', [])
.controller('itemListController', function ($scope){
$scope.new_item = {};

$scope.items = [
        {imageurl: 'images/strawberry.png', type: 'strawberry', name: 'Herbert Strawberry', occupation: 'dogwalker', superpower: 'power-C boost'},
        {imageurl: 'images/blueberry.png', type: 'blueberry', name: 'Ulysses Blueberry', occupation: 'construction worker', superpower: 'super strength' },
    ];

});

Answer 1

请查看更新后的代码，如果有效，请尝试此操作＆＃34;

var vegApp = angular.module('vegApp',["ngRoute"])
.controller('itemListController', function ($scope){
$scope.new_item = {};

$scope.items = [
    {imageurl: 'images/strawberry.png', type: 'strawberry', name: 'Herbert Strawberry', occupation: 'dogwalker', superpower: 'power-C boost'},
    {imageurl: 'images/blueberry.png', type: 'blueberry', name: 'Ulysses Blueberry', occupation: 'construction worker', superpower: 'super strength' },
];

});

vegApp.config(['$routeProvider', function($routeProvider){

$routeProvider
.when('/', {
    templateUrl: 'partials/itemlist.html',
    controller: 'itemListController'
})
.when('/login', {
    templateUrl: 'partials/login.html',
    controller: 'itemListController'
})
.when('/moreinfo', {
    templateUrl: 'partials/moreinfo.html',
    controller: 'itemListController'
})
.when('/recipes', {
    templateUrl: 'partials/recipes.html',
    controller: 'itemListController'
})
.otherwise({
    redirectTo: '/login'
});
 }
 ]);

Answer 2

尝试

<div ng-view></div>

取代

<ng-view=" "></ng-view>

index.html中的

Answer 3

您正在使用href：

<div class="sidebar">
   <h3> <a href="#/login">log in</a></h3>
   <h3> <a href="#/moreinfo">more info</a></h3>
   <h3> <a href="#/recipes">recipes</a></h3>
</div>

您应该使用以下内容：

<div class="sidebar">
   <h3> <a href="#login">log in</a></h3>
   <h3> <a href="#moreinfo">more info</a></h3>
   <h3> <a href="#recipes">recipes</a></h3>
</div>

'/'会使路由提供商无法找到该页面。

Answer 4

您正在app.js中重新定义模块。您通过重新定义vegApp来覆盖路由逻辑。

模块重定义在Angular中无声地失败：https://github.com/angular/angular.js/issues/1779

按如下方式重新运行您的app.js：

    var vegApp = angular.module("vegApp", ["ngRoute", "itemListController"]);
    var itemListController = angular.module("itemListController", []);

    vegApp.config(['$routeProvider', function($routeProvider){

$routeProvider
.when('/', {
    templateUrl: 'partials/itemlist.html',
    controller: 'itemListController'
})
.when('/login', {
    templateUrl: 'partials/login.html',
    controller: 'itemListController'
})
.when('/moreinfo', {
    templateUrl: 'partials/moreinfo.html',
    controller: 'itemListController'
})
.when('/recipes', {
    templateUrl: 'partials/recipes.html',
    controller: 'itemListController'
})
.otherwise({
    redirectTo: '/login'
});
}
    ]);

    vegApp.controller('itemListController', function ($scope){
    $scope.new_item = {};

    $scope.items = [
    {imageurl: 'images/strawberry.png', type: 'strawberry', name: 'Herbert Strawberry', occupation: 'dogwalker', superpower: 'power-C boost'},
    {imageurl: 'images/blueberry.png', type: 'blueberry', name: 'Ulysses Blueberry', occupation: 'construction worker', superpower: 'super strength' },
];

});

ngRoute不工作/不加载

4 个答案: