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

【问题标题】：Trouble creating a simple SPA with Angular JS $route?使用 Angular JS $route 创建简单的 SPA 时遇到问题？
【发布时间】：2015-09-15 10:35:46
【问题描述】：

我的index.html 页面中有以下 HTML sn-p：

<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 文件，以及在尚未定义的标签中定义控制器。 IE。 controllers.js 和 mainController。

【问题讨论】：

你能比“不工作”更具描述性吗？您的 HTML 中的 <ng-view> 在哪里？
无论路线如何，都不会显示任何内容，而不是 <div。我知道home.html 包含内容，我已经进入浏览器中的目录。
我认为redirectTo 不能与# 一起使用。
控制台有错误吗？控制台中的网络请求选项卡是否显示对模板页面的任何请求？
导航到http://example.com/#/home 是否返回您的预期结果？

标签： javascript angularjs routes single-page-application ng-view

【解决方案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 >mainController 在您的 html 中定义。

注意：

不要以分号结束对象。

例如

{redirectTo: "#/home";}

改成

{redirectTo: "/home"}

希望对你有帮助。

【讨论】：

控制台的输出是什么？有错误吗？
尝试将您的脚本放在正文元素中。
错误：[ng:areq] errors.angularjs.org/1.3.16/ng/… at Error (native) at allenhundley.com/resources/angular.js:6:417 Sb (allenhundley.com/resources/angular.js:19:510) La (allenhundley.com/resources/angular.js:20:78) at $get (allenhundley.com/resources/angular.js:75:465)
我刚刚访问了您的网站。控制台有很多错误。 controllers.js 似乎不存在。尝试包括它。 mainController 也不存在，因为您的 controllers.js 丢失了。
是的，没错。此外，不要以分号结束对象。例如。 {redirectTo: "#/home";} 将其更改为 {redirectTo: "/home"}。如果你用分号结束它会抛出一个错误。

【解决方案2】：

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

我没有意识到我不能在不搞砸的情况下指定空的东西。我想 Angular 在这方面不像 HTML 那样宽容。

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

【讨论】：