使用Angular JS $ route创建一个简单的SPA遇到麻烦了吗？

Question

I have the following HTML snippet inside my index.html page: 我的index.html页面内有以下HTML代码段：

<div ng-view></div>

The scope of my main module should be the entire pages as I have this: 我的主模块的范围应该是整个页面，因为我有这个：

<html ng-app="spa">

I have included angular.min.js and angular.min.route.js in the <head> 我在<head>包含了angular.min.js和angular.min.route.js

All of my JS is included like this: 我所有的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-->

The spa module is defined like this: 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 is a directors in the same folder as index.html as is the js directory. partials与js目录位于与index.html相同的文件夹中。 I've just finished the CodeSchool Angular JS series, and most of my short career has been spent in PHP. 我刚刚完成了CodeSchool Angular JS系列，并且我大部分的短期职业都花在了PHP上。 CodeSchool didn't mention routes so I'm unsure if this is correct, or why it's not working. CodeSchool没有提到routes所以我不确定这是否正确，或者为什么不起作用。

What am I doing wrong here? 我在这里做错了什么？

EDIT 编辑

I also had an included JS file which hadn't been created as well as defining controllers in tags which had not been defined yet. 我还拥有一个尚未创建的包含JS文件，以及在尚未定义的标签中定义控制器。 IE controllers.js and mainController . IE controllers.js和mainController 。

Answer 1

Try changing : 尝试更改：

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";
    });
}]);

To: 至：

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'
            });
});

Update: 更新：

I just found out that one of the reasons that your application didn't working as expected is that you didn't include the controllers.js that has mainController in your project which is defined in your html . 我刚刚发现，您的应用程序无法按预期运行的原因之一是您没有在html中 定义的项目中包含具有mainController的controllers.js 。

Note: 注意：

Do not end an object with semi-colon . 不要用分号结束对象。

Eg 例如

{redirectTo: "#/home";}

Change it to 更改为

{redirectTo: "/home"}

Hope it helps. 希望能帮助到你。

Answer 2

Alberto INJ discovered the answer to my question, and commented. Alberto INJ找到了我问题的答案，并发表了评论。

I didn't realize that I could not specify things that were empty without messing things up. 我没有意识到，如果不弄乱东西，就无法指定空的东西。 Angular, I suppose, is not as forgiving as HTML in that respect. 我想，Angular在这方面没有HTML宽容。

What I didn't mention in my question is that one of the JS files I had included, controllers.js was empty. 我没有在问题中提到的是，我包含的一个JS文件controllers.js是空的。 As I mentioned before, because I had controllers defined in tags that were not actually there, I threw an error. 如前所述，由于我在实际上不存在的标记中定义了控制器，所以引发了错误。

使用Angular JS $ route创建一个简单的SPA遇到麻烦了吗？

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-06-29 04:30:58

解决方案2
0 2015-06-29 04:51:58

使用Angular JS $ route创建一个简单的SPA遇到麻烦了吗？

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-06-29 04:30:58

解决方案2 0 2015-06-29 04:51:58

解决方案1
1 已采纳 2015-06-29 04:30:58

解决方案2
0 2015-06-29 04:51:58