2016-09-20 2 views
0
나는 다음과 같은 메시지가 오류를 받고 있어요

: 인수 'MainController는'여기 오류 내 컨트롤러 [AngularJS와]

을 정의되지있어 기능하지 않습니다 내 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; 
    }) 
}]); 

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; 
    }); 
}]); 
: 여기
var app = angular.module("elcomaApp", ['MainController', 'ngMaterial', 'ngRoute']); 
app.config(function($routeProvider){ 
    $routeProvider.when('/', { 
     controller: 'MainController', 
     templateUrl: 'views/timeline.html' 
    }).otherwise({ 
     redirectTo: '/' 
    }); 
}); 

내 service.js 파일입니다 내 app.js 파일입니다

그리고 내 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

왜 'MainController'가 자신의 앱에 대한 의존성으로 나열되어 있습니까? 이미'elcomaApp' 모듈에 작성하고 있습니다. –

답변

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

, MainController를 제거합니다.

그것은 이미 elcomaApp에 정의되어 있으며 DI를 사용할 필요가 없습니다. 항상 사용할 수 있습니다.

수정 : 당신의 app.js 파일에서

`

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

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

문제는 우선하는 모듈 정의입니다. 감사합니다 : D – Natanael

+0

왜 컨트롤 파일에 "[]"를 넣는 것이 맞습니까? angular.module ("elcomaApp", []). 컨트롤러 ... – Natanael

+1

새 모듈을 생성하거나 생성하려면 다음을 제공해야합니다. '[]'비어 있거나 DI의리스트.이 모듈을 얻으려면 모듈 이름 만 있으면된다. –

1

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

앱은 'MainController'모듈에 의존한다는 첫 번째 라인 이는 앱에 의존합니다. 그것은 작동하지 않습니다. 외부 모듈을 위해 앱에 의존성을 추가하기 만하면됩니다. 귀하의 모듈은 "elcomaApp"이며, 이미

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

에 줄을 당신의 "MainController '

변경을 포함 그리고 그것은 작동합니다.