Trouble creating a simple SPA with Angular JS $route?

Question

Trouble creating a simple SPA with Angular JS $route?

134 views Asked by Allenph At 20 August 2024 at 14:32

I have the following HTML snippet inside my index.html page:

<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>

All of my JS is included like this:

<!--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:

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. I've just finished the CodeSchool Angular JS series, and most of my short career has been spent in PHP. CodeSchool didn't mention routes so I'm unsure if this is correct, or why it's not working.

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. I.E. controllers.js and mainController.

Original Q&A

There are 2 answers

Allenph On 29 June 2015 at 04:51

Alberto I.N.J. discovered the answer to my question, and commented.

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.

What I didn't mention in my question is that one of the JS files I had included, controllers.js was empty. As I mentioned before, because I had controllers defined in tags that were not actually there, I threw an error.

**Alberto I.N.J.** · Accepted Answer · 2015-06-29 04:30:58

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.

Note:

Do not end an object with semi-colon.

E.g.

{redirectTo: "#/home";}

Change it to

{redirectTo: "/home"}

Hope it helps.

TechQA.

Trouble creating a simple SPA with Angular JS $route?

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in ANGULARJS

Related Questions in ROUTES

Related Questions in SINGLE-PAGE-APPLICATION

Related Questions in NG-VIEW

Popular Questions

Popular Tags

Trending Questions