opening angularjs app in google chrome 32 shows blank page

Refresh

December 2018

Views

1.9k time

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

I'm really lost here, does anyone have an idea that would point me in the right direction? Thank you for your time and consideration.

EDIT Okay, we're making progress, it looks like a problem with the injector.

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 answers

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