控制器出错[AngularJs]

时间:2016-09-20 18:10:25

标签: javascript angularjs angular-material

我收到以下消息错误:参数' MainController'不是一个功能,未定义

这是我的mainController.js文件:

angular.module("elcomaApp", []).controller('MainController', ['$scope',     'ElcomaService', function($scope, ElcomaService){
    $scope.name = 'Natanael Santos';
    console.log($scope.name);
    ElcomaService.sucess(function(data){
        $scope.elcomaData = data;
    })
}]);

这是我的app.js文件:

var app = angular.module("elcomaApp", ['MainController', 'ngMaterial', 'ngRoute']);
app.config(function($routeProvider){
    $routeProvider.when('/', {
        controller: 'MainController',
        templateUrl: 'views/timeline.html'
    }).otherwise({
        redirectTo: '/'
    });
});

这是我的service.js文件:

angular.module("elcomaApp", []).factory('ElcomaService', ['$http', function($http){
    return $http.get('http://vagalumewifi.com.br/timeline.json')
    .success(function(data){

    })
    .error(function(err){
        return err;
    });
}]);

我的index.html文件:

    <!DOCTYPE html />
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Angular Material style sheet -->
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>

<body ng-app="elcomaApp" ng-controller="MainController" ng-cloak>


    <md-toolbar class="md-hue-2">
      <div class="md-toolbar-tools">
        <md-button class="md-icon-button" aria-label="Settings" ng-disabled="true">
          <md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
        </md-button>
        <h2>
          <span>{{ name }}</span>
        </h2>
        <span flex></span>
        <md-button class="md-icon-button" aria-label="Favorite">
          <md-icon md-svg-icon="img/icons/favorite.svg" style="color: greenyellow;"></md-icon>
        </md-button>
        <md-button class="md-icon-button" aria-label="More">
          <md-icon md-svg-icon="img/icons/more_vert.svg"></md-icon>
        </md-button>
      </div>
    </md-toolbar>

    <div ng-view></div>




  <!-- Angular Material requires Angular.js Libraries -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>

  <script src="app.js"></script>
  <script src="controllers/mainController.js"></script>
  <script src="services/elcomaService.js"></script>

</body>
</html>

2 个答案:

答案 0 :(得分:1)

var app = angular.module("elcomaApp", ['MainController', 'ngMaterial', 'ngRoute']);

在此声明中,删除MainController

它已在elcomaApp上定义,无需DI。它始终可用。

更正:

`

angular.module("elcomaApp", []).factory`  // will override the module defination

`angular.module("elcomaApp").factory('`  //correct way

答案 1 :(得分:1)

在你的app.js文件中,第一行

var app = angular.module("elcomaApp", ['MainController', 'ngMaterial', 'ngRoute']);

说您的应用依赖于&#39; MainController&#39;模块,它依赖于您的应用程序。它不会起作用。您只需要在应用程序中为外部模块添加依赖项。您的模块是&#34; elcomaApp&#34;,已经包含您的主控制器&#39;

将该行更改为

var app = angular.module("elcomaApp", ['ngMaterial', 'ngRoute']);

它应该有用。