Angular.js：未捕获的对象线 36 ng 路由答案

【问题标题】：Angular.js: Uncaught object line 36 ng routingAngular.js：未捕获的对象线 36 ng 路由
【发布时间】：2014-07-13 00:10:40
【问题描述】：

我现在正在学习 AngularJS 来构建自己的网站。 kevhong.com 我正在尝试使用 ng-route 来制作导航栏。我按照http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/中的例子进行

但控制台在第 36 行一直显示“未捕获的对象”。我在线搜索但仍然无法修复错误。也许我错过了什么，但我不知道。

我正在使用 Angular 1.2.19

这是我的 html 文件：

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

还有我的 JS 文件：

/* 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;。教育和课程变量最初来自哪里？如果它们从未被初始化，它们就不能附加值。
可能缺少编码，但控制器中的代码是做什么的？你的意思是 $scope.educations = ...？
控制器中的所有变量都被省略了。如果你们愿意，我可以穿上它们。
36 行是什么？如果您遗漏了一些变量，我们如何猜测问题的根源？
我强烈建议ui-router。谷歌一下，你会发现很多理由让你选择它而不是 Angular 的默认路由系统。

标签： javascript html angularjs ngroute

【解决方案1】：

问题是您试图引用这些控制器范围内不存在的东西。由于您是 Angular 新手，让我解释一下。因此，您用来传递给 EducationController 的函数是一个回调；你不能像经典 javascript 那样真正传递参数。控制器不是像经典函数那样接受数据的东西，它是控制数据访问的东西。我邀请您阅读这篇文章：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;
    });

【讨论】：

感谢您的回答！