使用 Angular JS $route 创建简单的 SPA 时遇到问题？

Question

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

<div ng-view></div>

我的主模块的范围应该是整个页面，因为我有这个：

<html ng-app="spa">

我在 <head>

中包含了 angular.min.js 和 angular.min.route.js

我所有的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 文件，以及在尚未定义的标签中定义控制器。 IE。 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'
            });
});

更新：

我刚刚发现您的应用程序没有按预期工作的原因之一是您没有 include controllers.js 在你的项目中有 mainController，在你的 html[=49 中 defined =].

注：

不要以分号结束对象。

例如

{redirectTo: "#/home";}

改成

{redirectTo: "/home"}

希望对您有所帮助。

Answer 2

阿尔贝托 I.N.J。发现了我的问题的答案，并发表了评论。

我没有意识到我无法在不弄乱的情况下指定空的东西。 Angular，我想，在这方面不如 HTML 宽容。

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

使用 Angular JS $route 创建简单的 SPA 时遇到问题？

Trouble creating a simple SPA with Angular JS $route?

javascript

routes

angularjs

single-page-application

ng-view