我正在为我母亲的创业公司开发一个网络应用程序,因为我认为一个完整的服务器端框架会过度,我决定使用AngularJS编写它。我已完成基本布局,编写子页面,连线路线并编写控制器,但当我尝试启动应用程序时,它只显示我的布局。我已经尝试了几件事情来开展工作,包括:
一切都没有结果。我不确定google的条款,所以我跳过了。
index.html的内容
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<title>{{ Page.title() }}</title>
<meta charset="utf-8">
<meta name="description" content="Life in the face of an emergency base template.">
<meta name="keywords" content="emergency, life, presentation" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Levi Campbell">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="author" href="humans.txt">
<link rel="Shortcut Icon" type="image/ico" href="img/favicon.png">
<link rel="canonical" href="http://www.lifeintheface.com/" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen,projection">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-resource.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.0.0-rc13.min.js"></script>
<script src="js/html5.js"></script>
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-49712370-1', 'lifeintheface.com');
ga('send', 'pageview');
</script>
</head>
<body>
<div id="wrap">
<header>
<div itemscope>
<h1 itemprop="logo">
<img src="img/banner.png" />
</h1>
</div>
<nav role="navigation">
<!-- Add navigation here -->
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact me</a>
</nav>
</header>
<div id="content">
<div ng-view></div>
</div>
<footer>
<p>Copyright 2014 Life In the Face of an Emergency.</p>
</footer>
</div>
<script src="js/custom.js"></script>
</body>
</html>
js / custom.js的内容:
$(document).ready(function () {
});
AWS.config.update({accessKeyId: 'akid', secretAccessKey: 'secret'});
var app = angular.module('LifeInTheFace', ['ngRoute']);
app.config(function($routeProvider, $locationProvider, $log) {
$log.debug("Setting up routes.");
$routeProvider.
when('/', {
templateUrl: 'pages/home.html',
controller: "IndexCtrl"
}).
when('/about', {
templateUrl: 'pages/about.html',
controller: "AboutCtrl"
}).
when('/faqs', {
templateUrl: 'pages/faqs.html',
controller: "FaqsCtrl"
}).
when('/contact', {
templateUrl: 'pages/contact.html',
controller: "ContactCtrl"
}),
when('/thanks', {
templateUrl: "pages/thanks.html",
controller: "ThanksCtrl",
}),
otherwise({
redirectTo: 'index'
});
$locationProvider.html5Mode(true);
$log.debug("Routes set up,");
});
app.controller('IndexCtrl', function ($scope, $route, $routeParams, $location, $log, Page) {
$log.debug("Now entering the index controller.")
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
$scope.page = Page;
Page.setTitle('Introduction');
});
app.controller("AboutCtrl", function ($scope, $route, $routeParams, $location, Page) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
$scope.page = Page;
Page.setTitle('About us');
});
app.controller("faqsCtrl", function ($scope, $route, $routeParams, $location, Page) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
$scope.page = Page;
Page.setTitle('Frequently Asked Questions');
});
app.controller("FaqsCtrl", function ($scope, $route, $routeParams, $location, Page) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
$scope.page = Page;
Page.setTitle('Frequently Asked Questions');
});
app.controller("ContactCtrl", function ($scope, $route, $routeParams, $location, Page) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
$scope.page = Page;
Page.setTitle('Contact me');
});
app.controller("FormCtrl", function ($scope, $route, $routeParams, $location, contact) {
var ses = new AWS.SES();
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
$scope.master = {};
$scope.send = function (contact) {
$scope.master = angular.copy(contact);
var message = {};
message.Destination.ToAddresses = [$scope.master.email];
message.Message.Body.Text.Data = $scope.master.message;
message.Message.Body.Text.Charset = "utf-8";
message.Message.Subject.Data = $scope.master.subject;
message.ReturnPath = $scope.master.email;
ses.sendEmail(message, function (err, data) {
if (err) $log.debug(err, err.stack);
else $log.info(data);
});
};
});
app.controller("ThanksCtrl", function ($scope, $route, $routeParams, $location, Page) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
$scope.page = Page;
Page.setTitle('Thank you!');
});
我真的迷失在这里,有没有人有一个能让我指向正确方向的想法?感谢您的时间和考虑。
编辑好的,我们正在取得进展,这似乎是注射器的一个问题。
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.15/$injector/modulerr?p0=LifeInTheFace&p1=E…arjs.org%2F1.2.15%2F%24injector%2Funpr%3Fp0%3D%2524log%0A%20%20%20%20at%20...<omitted>...8) angular.js:3710
答案 0 :(得分:3)
您错过了ng-app
尝试将其添加到<html ng-app='LifeInTheFace'>
答案 1 :(得分:2)
你有一些。和一些,分开你的时间。它们都应该是#&#34;链&#34;在另一个时候。
$routeProvider.
when('/', {
templateUrl: 'pages/home.html',
controller: "IndexCtrl"
}).
when('/about', {
templateUrl: 'pages/about.html',
controller: "AboutCtrl"
}).
when('/faqs', {
templateUrl: 'pages/faqs.html',
controller: "FaqsCtrl"
}).
when('/contact', {
templateUrl: 'pages/contact.html',
controller: "ContactCtrl"
}),
when('/thanks', {
templateUrl: "pages/thanks.html",
controller: "ThanksCtrl",
}),
otherwise({
redirectTo: 'index'
});
答案 2 :(得分:2)
除了Jason Lee的改变:
您不能在.config()块中使用$ log服务,因为这些服务用于配置您的提供商(例如$routeProvider
或$logProvider
)。
只需删除已注入的$log
和$log.debug()
($log.debug("Setting up routes."
);和$log.debug("Routes set up,");
)调用,不会再引发错误。
答案 3 :(得分:1)
这可能是一个非常小的错误,但在您的路由中的其他错误。它目前正试图将您重定向到索引&#39;但你没有索引路线。它可能应该重定向到&#39; /&#39;。