Twitter Bootstrap Question posted in

Can't figure out why angularJS module won't load – Twitter bootstrap

I’m using ui router and angular js so when I test the app, I just get a blank screen with an injector:module error. This is the link to the error:

http://errors.angularjs.org/1.3.11/$injector/modulerr?p0=myApp&p1=Error%3A%…dflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.11%2Fangular.min.js%3A17%3A350

Here is my app.js code:

var app = angular.module('myApp', ['ui.router', 'firebase']);

// Creating fireref instance
app.factory('FireRef', function($firebase){
    var ref = new Firebase('https://dablog.firebaseio.com/');
    return ref;
});

// Creating fireauth instance
app.factory('FireAuth', function($firebaseAuth){
    var ref = new Firebase('https://dablog.firebaseio.com/');
    return $firebaseAuth(ref);
});

app.config(function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise('/site/home');
    $stateProvider
    .state('site', {
        url: '/site',
        templateUrl: 'partials/site.html'
    })
    .state('site.home', {
        url: '/home',
        templateUrl: 'partials/home.html'
    })
    .state('site.about', {
        url: '/about',
        templateUrl: 'partials/about.html'
    })
    .state('site.projects', {
        url: '/projects',
        templateUrl: 'partials/projects.html'
    })
    .state('site.blog', {
        url: '/blog',
        templateUrl: 'partials/blog.html'
        // controller: 'BlogCtrl'
    })
    .state('site.login', {
        url: '/login',
        templateUrl: 'partials/login.html'
        // controller: 'LoginCtrl'
    })
    .state('site.newpost', {
        url: '/newpost',
        templateUrl: 'partials/newpost.html',
        // controller: 'NewPostCtrl'
    })
    .state('site', {
        url: '/contact',
        templateUrl: 'partials/contact.html'
    });
})

Here is my blog.js file where it says “app is not defined”:

'use strict'

app.controller('BlogCtrl', function($scope, $firebase, $firebaseArray, FireRef, $state){
    var data = $firebaseArray(FireRef);
    $scope.posts = data;

    $scope.$watch('posts', function(newValue, oldValue){
        $scope.posts = $sce.trustAsHtml(data);
    })

    $scope.login = function() {
        $state.go('site.login');
    }

    $scope.newPost = function(){
        $state.go('site.newPost');
    }
});

Here is my index.html code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset= "utf-8">

        <title>Portfolio</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Angular -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.11/angular.min.js"></script>

        <!-- Angular UI Router -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.js"></script>

        <!-- Angular Animate -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.13/angular-animate.min.js"></script>

        <!-- jQuery -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

        <!-- Bootstrap -->
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>

        <!-- Firebase -->
        <script src="https://cdn.firebase.com/js/client/2.2.0/firebase.js"></script>
        <script src="https://cdn.firebase.com/libs/angularfire/0.9.1/angularfire.min.js"></script>

        <!-- Controllers -->
        <script src="js/controllers/BlogCtrl.js"></script>
        <script src="js/controllers/LoginCtrl.js"></script>
        <script src="js/controllers/NewPostCtrl.js"></script>

        <!-- App -->
        <script src="js/app.js"></script>

        <!-- Styling -->
        <link rel="stylsheet" type="text/css" href="css/styles.css">
        <link rel="stylsheet" type="text/css" href="css/animate.css">

    </head>

    <body ng-app="myApp">
        <div ui-view></div>
    </body>
</html>
Tags:

3

Answers


  1. 0

    You have declared ‘use strict’, so the app variable is undefined. You need to add

    var app = angular.module('myApp');

    to the top of BlogCtrl.js

    Also, move <script src="js/app.js"></script> so that it’s before the controller scripts in index.html. Because you load app.js after BlogCtrl.js, the module defined in app.js is not available in BlogCtrl.js.

    Login or Signup to reply.
  2. 0

    I think you need to include this line at the top of blog.js:

    var app = angular.module('myApp');

    Edited to remove the second parameter: , [].

    Login or Signup to reply.
  3. 0

    I don’t have enough reputation to comment, but I do want to add information: do not add var app = angular.module('myApp', []) in blog.js, because the brackets initialize a new app, so Angular will think you’re creating a new app and will throw an error, since ‘myApp’ already exists. Be sure to use var app = angular.module('myApp') instead. Also be sure to link the the .js file in your index file after Angular has been loaded.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search