opening angularjs app in google chrome 32 shows blank page

Обновить

December 2018

Просмотры

1.9k раз

2

I'm working on a web app for my mom's startup, and because I thought a full server-side framework would be overkill, I decided to write it using AngularJS. I've gotten the basic layout done, wrote subpages, wired up routes and wrote the controllers, but when I try and launch the app, it just shows my layout. I've tried several things to get things to work including:

  • Addressing all jshint/jslint issues.
  • Fixing all errors raised by Chrome DevTools.
  • moving the javascript file from the js/ directory to the root of the project and updating the HTML.
  • Moving the subpages from the pages/ directory to the root of the project and updating my routes.

All with no results. I'm not sure what terms to google for, so I skipped that.

Contents of 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>

Contents of 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!');
});

Я действительно потерял здесь, кто-нибудь есть идея, что бы мне точку в правильном направлении? Спасибо за ваше время и внимание.

EDIT Хорошо, что мы делаем успехи, это выглядит как проблема с инжектором.

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 ответы

1

Это, вероятно, довольно незначительная ошибка, но в противном случае в вашей маршрутизации является неправильным. В настоящее время она пытается перенаправить вас на «индекс», но вы не имеете маршрут индекса. Это, вероятно, следует перенаправить на «/».

2

В дополнение к изменениям Джейсон Ли:

Вы не должны использовать службу $ войти в .config () блока, так как те , используются для настройки поставщиков (например , $routeProviderили $logProvider).

Просто удалите нагнетаемый $logи $log.debug()( $log.debug("Setting up routes."); а $log.debug("Routes set up,");) вызовы и не больше ошибок не будут выброшены.

2

У вас есть некоторые из них. а некоторые, отделяя свои когда-х. Все они должны быть период в «цепочке» на другой, когда.

$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'
    });
3

Вы пропустили ng-app

попробуйте добавить его в <html ng-app='LifeInTheFace'>