Question

我将登录页面重定向到主页，现在我需要将menuBar添加到我的主页我按照这个例子 http://www.tutorialspoint.com/angular_material/angular_material_menubar.htm

当我尝试将menuBar添加到我的angularjs应用程序时，我收到错误

我在互联网上看到很多相同的帖子有同样的问题，但我找不到这个错误的解决方法

我的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');
            }
        });
    }]);

我的控制器在这里

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

和我的观点：

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

这是我的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>

Answer 1

我发现了问题我忘记将我的模块（＆＃39; menuBar＆＃39;）添加到应用

angular.module（＆＃39; mb＆＃39;，[ ＆＃39;验证＆＃39 ;, ＆＃39;首页＆＃39 ;, ＆＃39; ngRoute＆＃39 ;, ＆＃39; ngCookies＆＃39 ;, ＆＃39;菜单栏＆＃39; ]）

Answer 2

从app.js中删除代码“angular.module('menuBar',[]);”。

Answer 3

将控制器代码更改为

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

只在setter中为模块注入依赖项。

当您创建控制器，指令等时，您需要获取模块，并且那里没有依赖。

控制器不是aNaNunction，未定义

3 个答案: