我现在正在学习 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
*/
})();