在谷歌浏览器32中打开angularjs应用程序显示空白页面

时间：2014-04-14 12:10:26

标签： javascript html5 angularjs google-chrome

我正在为我母亲的创业公司开发一个网络应用程序，因为我认为一个完整的服务器端框架会过度，我决定使用AngularJS编写它。我已完成基本布局，编写子页面，连线路线并编写控制器，但当我尝试启动应用程序时，它只显示我的布局。我已经尝试了几件事情来开展工作，包括：

  • 解决所有jshint / jslint问题。
  • 修复Chrome DevTools引发的所有错误。
  • 将javascript文件中的javascript文件移动到项目的根目录并更新HTML。
  • 将子页面从pages /目录移动到项目的根目录并更新我的路由。

一切都没有结果。我不确定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

4 个答案:

答案 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;。

相关问题
最新问题