Question

我的index.html页面中有以下HTML代码段：

<div ng-view></div>

我的主要模块的范围应该是我所拥有的整个页面：

<html ng-app="spa">

我在angular.min.js

中加入了angular.min.route.js和<head>

我的所有JS都包括在内：

<!--JavaScript Sources-->
<script type="text/javascript" src="http://allenhundley.com/resources/angular.js"></script>
<script type="text/javascript" src="http://allenhundley.com/resources/angular-route.js"></script>
<!--End JavaScript Source-->
<!--JavaScript-->
<script type="text/javascript" src="http://allenhundley.com/js/view.js"></script>
<script type="text/javascript" src="http://allenhundley.com/js/controllers.js"></script>
<!--End JavaScript-->

spa模块的定义如下：

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

spa.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when(
    "/home", {
        templateUrl: "/partials/home.html",
    }).when(
    "/about", {
        templateUrl: "/partials/about.html",
    }).when(
    "/skills", {
        templateUrl: "/partials/skills.html",
    }).when(
    "/experience", {
        templateUrl: "/partials/experience.html",
    }).when(
    "/resume", {
        templateUrl: "/partials/resume.html",
    }).when(
    "/contact", {
        templateUrl: "/partials/contact.html",
    }).otherwise({
        redirectTo: "#/home";
    });
}]);

partials是与index.html相同的文件夹中的导演，与js目录一样。我刚刚完成了CodeSchool Angular JS系列，我职业生涯的大部分时间都花在了PHP上。 CodeSchool没有提及routes所以我不确定这是否正确，或者为什么它不起作用。

我在这里做错了什么？

修改

我还有一个包含的JS文件，它没有被创建，也没有定义尚未定义的标签中的控制器。 I.E. controllers.js和mainController。

Answer 1

尝试更改：

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

spa.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when(
    "/home", {
        templateUrl: "/partials/home.html",
    }).when(
    "/about", {
        templateUrl: "/partials/about.html",
    }).when(
    "/skills", {
        templateUrl: "/partials/skills.html",
    }).when(
    "/experience", {
        templateUrl: "/partials/experience.html",
    }).when(
    "/resume", {
        templateUrl: "/partials/resume.html",
    }).when(
    "/contact", {
        templateUrl: "/partials/contact.html",
    }).otherwise({
        redirectTo: "#/home";
    });
}]);

要

var spa = angular.module('spa', ['ngRoute']); spa.config(function($routeProvider) { $routeProvider .when('/home', { templateUrl: '/partials/home.html' }) .when('/about', { templateUrl: '/partials/about.html' }) .when('/skills', { templateUrl: '/partials/skills.html' }) .when('/experience', { templateUrl: '/partials/experience.html' }) .when('/resume', { templateUrl: '/partials/resume.html' }) .when('/contact', { templateUrl: '/partials/contact.html' }) .otherwise({ redirectTo: '/home' }); });

<强>更新

我刚刚发现您的应用程序没有按预期运行的原因之一是您没有包含 controllers.js html 中已定义的项目中的> mainController 。

注意：

请勿使用分号结束对象。

<强> E.g。

{redirectTo: "#/home";}

将其更改为

{redirectTo: "/home"}

希望它有所帮助。

Answer 2

Alberto I.N.J.发现了我的问题的答案，并评论道。

我没有意识到我不能指出那些空洞的东西而不会弄乱东西。我想，Angular在这方面并不像HTML一样宽容。

在我的问题中我没有提到的是我包含的一个JS文件controllers.js是空的。正如我之前提到的，因为我在标签中定义了实际不存在的控制器，所以我抛出了一个错误。

无法使用Angular JS $ route创建简单的SPA？

2 个答案: