0

I have no idea what I am doing wrong, the controller is not being called.

index.html:

<!DOCTYPE html>
<html ng-app="myApp" ng-contoller="mainCtrl">
    <head>
        <!--Import Google Icon Font-->
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link rel="stylesheet" href="css/bootstrap.css">
        <!--Import materialize.css-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
        <link rel="stylesheet" href="css/custom.css">
        <!--Let browser know website is optimized for mobile-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

        <!--http://materializecss.com/-->

    </head>

    <body>

        HERE: {{test}}

        <nav>
            <div class="nav-wrapper topNavBar">
                <a href="#" class="brand-logo right"><img class="responsive-img circle profile_logo" src="images/img2.jpg"></a>
                <ul id="nav-mobile" class="left">
                    <li class="topLeftNavBtn" data-activates="slide-out"><a><i class="material-icons">reorder</i></a></li>
                    <li><a href="#!/home" class="yellowFont"><img src="images/omitted.png"> &nbsp; | &nbsp; Albums</a></li>
                </ul>
            </div>
        </nav>

        <div ng-view></div>

        <!-- ///////////////////////////////// side collapsible nav /////////////////////////////////////////////// -->
        <ul id="slide-out" class="side-nav">
            <li>
                <div class="left_nav_header">
                    <a href="badges.html" class="yellowFont"><img src="images/omitted.png"> &nbsp; | &nbsp; Albums</a></li>
                </div>
            </li>    
            <li><a class="waves-effect" href="#!"><i class="material-icons leftSlidingMenuItemIcon homeLink">home</i>Home</a></li>
            <li><a class="waves-effect" href="#!"><i class="material-icons leftSlidingMenuItemIcon linked_cameraLink">linked_camera</i>Albums</a></li>
            <li><a class="waves-effect" href="#!"><i class="material-icons leftSlidingMenuItemIcon person_addLink">person_add</i>Shared with me</a></li>
            <li><a class="waves-effect" href="#!"><i class="material-icons leftSlidingMenuItemIcon roomLink">room</i>Centres</a></li>
            <li><a class="waves-effect" href="#!"><i class="material-icons leftSlidingMenuItemIcon live_helpLink">live_help</i>Help</a></li>
        </ul>
        <!--<a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>-->

        <!--Import jQuery before materialize.js-->
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>

        <script type="text/javascript">
            $(".topLeftNavBtn").sideNav();
        </script>

        <!-- Bower components -->
        <script src="bower_components/angular/angular.js"></script>       
        <script src="bower_components/angular-route/angular-route.js"></script>
        <script src="bower_components/firebase/firebase.js"></script>
        <script src="bower_components/angularfire/dist/angularfire.js"></script>
        <script src="bower_components/angular-local-storage/dist/angular-local-storage.js"></script>


        <!-- Angular modules -->
        <script src="app.js"></script>
        <script src="modules/home/home.js"></script>
        <script src="modules/login/login.js"></script>
        <script src="modules/albums/albums.js"></script>
    </body>
</html>

And here's the app.js file:

'use strict';

// Declare app level module which depends on views, and components
angular.module('myApp', [
  'ngRoute',
  'firebase',
  'LocalStorageModule',
  'myApp.home',
  'myApp.login',
  'myApp.albums'
])
// Configuring routing
.config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
  $locationProvider.hashPrefix('!');
  $routeProvider.otherwise({redirectTo: '/home'});
}])
// Configuring localstorage
.config(['localStorageServiceProvider', function(localStorageServiceProvider) {
    localStorageServiceProvider
        .setPrefix('tribees')
        .setStorageType('sessionStorage');
}])
// Main Ctrl
.controller('mainCtrl',['$scope','$location','localStorageServiceProvider',
    function($scope,$location,localStorageServiceProvider){

        $scope.test = "REACH"; // THIS IS NOT COMING UP
        console.info("REAACH"); // THIS IS ALSO NOT COMING UP

        if(!localStorageServiceProvider.isSupported) {
            console.warn('LocalStorage is not supported');  
        } else {
            console.info('good to go');
        }

        $scope.showNav = function() {
        console.info("REACH");
            // Only show header if the user is not at login screen
            return !$location.path().endsWith('/login');
        }
}]);

You'll notice that I have a console.info in there, and a $scope.test but they are not being set, so the function is not being called. What am i doing wrong?

Improve this question
5
  • Any errors in Browser console? Commented Mar 6, 2017 at 12:20
  • Why do you have multiple config Commented Mar 6, 2017 at 12:26
  • @Sangharsh there were no errors on the browser, the js in the controller just didn't work. Commented Mar 6, 2017 at 21:43
  • @digit just to be more organised, should i not do that? Commented Mar 6, 2017 at 21:44
  • It's ok with that but usually it is used if the app have multiple module. For the same module just use one config only. Commented Mar 6, 2017 at 23:02

1 Answer 1

Reset to default
3

You have typo actually.

Change 

 ng-contoller="mainCtrl"

to

 ng-controller="mainCtrl"
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks I spent a few hours on that and was tearing my hair out.