Angular.js: Uncaught object line 36 ng routing

Question

I am learning AngularJS right now to build my own website. kevhong.com I'm trying to use ng-route to make a nav bar. I follow the example in http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/

But the console keep showing "Uncaught object" at line 36. I search online but still cant fix the error. Maybe I miss something but I didn't know.

I'm using Angular 1.2.19

Here's my html file:

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script scr="index/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="index/index.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="index/index.css">
<link href='http://fonts.googleapis.com/css?family=Arvo:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

</head>
<body ng-app="indexPage">   
<header>
    <ul class="nav nav-tabs">           
        <li><a href="#about-me"> About Me </a></li>
        <li><a href="#education"> Education </a></li>
        <li><a href="#skillAndProject"> Skills & Projects </a></li>
        <li><a href="#experience"> Experience </a></li>
    </ul>
</header> 
<div class="container">
    <div class="content" style="padding-left:15px; padding-right:15px;">
        <br>    
        <div class="ng-view"></div>
    </div>
</div>
</body>
</html>

And my JS file:

/* angularJS implement */
(function(){
 var app = angular.module('indexPage',['ngRoute']);

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/about-me', {
        templateUrl: 'templates/about_me.html',
        controller: 'AboutMeController'
      }).
      when('/education', {
        templateUrl: 'templates/education.html',
        controller: 'EducationController'
      }).
      when('/skillAndProject', {
        templateUrl: 'templates/skillAndProject.html',
        controller: 'SkillAndProjectController'
      }).
      when('/experience', {
        templateUrl: 'templates/experience.html',
        controller: 'ExperienceController'
      }).
      otherwise({
        redirectTo: '/about-me'
      });
  }]);

//Controllers 
app.controller('IndexController', function(){
 });
app.controller('AboutMeController', function(){
});
app.controller('EducationController', function(){
    this.educations = educations;
    this.courses = courses;
});
app.controller('SkillAndProjectController', function(){
    this.skills = skills;
});
app.controller('ExperienceController', function(){
    this.experiences = experiences;
});

/*
JSON String Stores here
*/

})();

`this.educations = educations;this.courses = courses;`. Where does the educations and courses variables come from initially? If they never get initialized they can't have a value attached to them. — Jordan, Jul 13 '14 at 00:16
Maybe there is coding missing, but what does the code in the controllers do? Do you mean $scope.educations = ...? — Arthur Frankel, Jul 13 '14 at 00:18
All the variables in the controller have been left out. I can put them on if you guys want. — CocoHot, Jul 13 '14 at 00:58
What is in 36 line? How we can guess source of problem if you have left some variables out? — Krzysztof Safjanowski, Jul 13 '14 at 01:31
I strongly suggest [ui-router](https://github.com/angular-ui/ui-router). Google it and you'll find plenty of reasons on why you should choose it over Angular's default routing system. — Christian Bonato, Jul 13 '14 at 01:31
the var is only some JSON string which I test it before there's no problem with it. I'll take a look into ui-router. thanks for the suggestion — CocoHot, Jul 13 '14 at 03:07
@Bonatoc thanks for the advice! ui-router is so much easier to understand and I like the way it thinks. — CocoHot, Jul 21 '14 at 18:03

score 0 · Accepted Answer · answered Jul 13 '14 at 05:41

The problem is that you are trying to reference something that doesn't exist in in the scope of these controllers. Since you are new at angular, let me explain. The function you are using to pass into EducationController, is a callback, therefore; you cannot really pass it parameters in the same way that classic javascript works. A controller isn't something that accepts data like a classic function, its something that controls the access of data. I invite you to read this article: http://viralpatel.net/blogs/angularjs-controller-tutorial/

    // Doesn't work because you didn't inject anything into this controller
    app.controller('EducationController', function(){
        this.educations = educations;
        this.courses = courses;
    });
    // This would work if you had an educations, or courses module to inject.
    app.controller('EducationController', function(educations, courses){
        this.educations = educations;
        this.courses = courses;
    });

Angular.js: Uncaught object line 36 ng routing

1 Answers1