CODEWITHSUNDEEP
javascriptangularjs
Belal Othman
Belal Othman

Reputation: 231

Controller is not aNaNunction, got undefined

I did an login page redirect to home page and now I need to add menuBar to my home page I followed this example http://www.tutorialspoint.com/angular_material/angular_material_menubar.htm

when I tried to add the menuBar to my angularjs application I get an error

I saw many of same posts with same problem in internet but I couldn't find soluation to this error

my app.js

'use strict';
// declare modules
angular.module('Authentication', []);
angular.module('Home', []);
angular.module('menuBar',[]);

angular.module('BasicHttpAuthExample', [
    'Authentication',
    'Home',
    'ngRoute',
    'ngCookies'
])
.config(['$routeProvider', function ($routeProvider) {

    $routeProvider
        .when('/login', {
            controller: 'LoginController',
            templateUrl: 'login'
        })

        .when('/', {
            controller: 'HomeController',
            templateUrl: 'home'
        })

        .otherwise({ redirectTo: '/login' });
}])
.run(['$rootScope', '$location', '$cookieStore', '$http',
    function ($rootScope, $location, $cookieStore, $http) {
        // keep user logged in after page refresh
        $rootScope.globals = $cookieStore.get('globals') || {};
        if ($rootScope.globals.currentUser) {
            $http.defaults.headers.common['Authorization'] = 'Basic ' + $rootScope.globals.currentUser.authdata; // jshint ignore:line
        }

        $rootScope.$on('$locationChangeStart', function (event, next, current) {
            // redirect to login page if not logged in
            if ($location.path() !== '/login' && !$rootScope.globals.currentUser) {
                $location.path('/login');
            }
        });
    }]);

and my controller is here

'use strict';
angular.module('menuBar',

[ 'ngMaterial' ]).controller(
        'menubarController',
        function menubarController($scope, $mdDialog) {
            this.sampleAction = function(name, ev) {
                $mdDialog.show($mdDialog.alert().title(name).textContent(
                        'Start learning "' + name + '!').ok('OK').targetEvent(
                        ev));
            };
        });

and my view:

<div id="menubarContainer" ng-controller="menubarController"
        layout="row" ng-cloak>
        <md-toolbar class="md-menu-toolbar">
        <div layout="row">
            <div>
                <md-menu-bar> <md-menu>
                <button ng-click="$mdOpenMenu()">Tutorials</button>
                <md-menu-content> <md-menu-item> <md-button
                    ng-click="ctrl.sampleAction('share', $event)">Share...</md-button>
                </md-menu-item> <md-menu-divider></md-menu-divider> <md-menu-item> <md-menu>
                <md-button ng-click="$mdOpenMenu()">Learn</md-button> <md-menu-content>
                <md-menu-item> <md-button
                    ng-click="ctrl.sampleAction('HTML5', $event)">HTML5</md-button></md-menu-item> <md-menu-item>
                <md-button ng-click="ctrl.sampleAction('jQuery', $event)">jQuery</md-button></md-menu-item>
                <md-menu-item> <md-button
                    ng-click="ctrl.sampleAction('AngularJS', $event)">AngularJS
                </md-button></md-menu-item> <md-menu-item> <md-button disabled="disabled"
                    ng-click="ctrl.sampleAction('AngularJS 2.0', $event)">AngularJS
                2.0</md-button></md-menu-item> <md-menu-divider></md-menu-divider> <md-menu-item>
                <md-button ng-click="ctrl.sampleAction('CSS', $event)">CSS</md-button></md-menu-item>
                </md-menu-content> </md-menu> </md-menu-item> </md-menu-content> </md-menu> </md-menu-bar>
            </div>
        </div>
        </md-toolbar>
    </div>

and this is my index.jsp

<!DOCTYPE html>
<html ng-app="BasicHttpAuthExample">
<head>
    <meta charset="utf-8" />
    <title>Master Protection</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

    <div class="jumbotron">
        <div class="container">
            <div class="col-xs-offset-2 col-xs-8">
                <div ng-view></div>
            </div>
        </div>
    </div>
    <div class="credits text-center">
        <p>
            <a href="http://jasonwatmore.com/post/2014/05/26/AngularJS-Basic-HTTP-Authentication-Example.aspx">Master Protection Company</a>
        </p>
        <p>
            <a href="http://jasonwatmore.com">Eurnet.com</a>
        </p>
    </div>

    <script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="//code.angularjs.org/1.4.8/angular.min.js"></script>
      <script src="//code.angularjs.org/1.4.8/angular-animate.min.js"></script>
      <script src="//code.angularjs.org/1.4.8/angular-aria.min.js"></script>
      <script src="//code.angularjs.org/1.4.8/angular-messages.min.js"></script>
      <script src="//code.angularjs.org/1.4.8/angular-route.js"></script>
      <script src="//code.angularjs.org/1.4.8/angular-cookies.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>

    <script src="js/app.js"></script>
    <script src="js/modules/authentication/services.js"></script>
    <script src="js/modules/authentication/controllers.js"></script>
    <script src="js/modules/home/controllers.js"></script>
    <script src="js/shared/menu/controllers.js"></script>
</body>
</html>

Upvotes: 1

Views: 867

Answers (3)

Belal Othman
Belal Othman

Reputation: 231

I found the problem I forget to add my module ('menuBar') to the app

angular.module('mb', [ 'Authentication', 'Home', 'ngRoute', 'ngCookies', 'menuBar' ])

Upvotes: 1

gyc
gyc

Reputation: 4360

Change the controller code to

angular.module('menuBar').controller(
        'menubarController',
        function menubarController($scope, $mdDialog) {
            this.sampleAction = function(name, ev) {
                $mdDialog.show($mdDialog.alert().title(name).textContent(
                        'Start learning "' + name + '!').ok('OK').targetEvent(
                        ev));
            };
        });

You inject dependency for your module inside the setter only.

When you create controllers, directives...etc you GET the module and there's no dependency there.

Upvotes: 0

rejo
rejo

Reputation: 3350

Remove code 'angular.module('menuBar',[]);' from app.js.

Upvotes: 0

Related Questions