2017-04-05 8 views
0

私は最初のアプリを開発中です。私はウェブブラウザでそれを開くと、私はこのエラーを取得:キャッチされないにReferenceError:コントローラはapp.jsで が定義されていない:app.jsで3 :15routeProviderは動作せず、angularjsを使用してコントローラが未定義です。1.5

私はapp.jsファイルを作成した後、私はこのエラーを得ました私のcontroller.jsをリンクさせようとしました。また、routeProviderはまだ動作していないようです。そして、私のプレースホルダーは仕事を止めました。以前はうまくいきました。

コードを読みやすくするためにコードを簡略化しました。私は、より多くのhtmlファイルを持っており、JQueryとCSSと組み合わせてブートストラップを使用しています。誰かがここで間違っていることを知っていますか?

app.js

(function(){ 

    var myApp = angular.module('myApp',  ['ngRoute']).controller('controller', controller) 

    .config(function($routeProvider, $locationProvider){ 
    $locationProvider.html5Mode(true); 
    $routeProvider 
     .when('/main', { 
      templateUrl: '../main.html', 
       controller: 'controller' 
     }) 
     .otherwise({redirectTo: '../main'}); 

}); 
})(); 

controller.js

 (function() { 
     angular.module('controller', ['ngRoute']) 
      .controller('controller', ['$scope', function ($scope) { 
     }]); 
    })(); 

index.htmlを

<!DOCTYPE html> 
<html data-ng-app = "myApp"> 

<head> 
<meta charset="utf-8"/> 
<title> Who Brings What </title> 
</head> 

<body> 
<div class="container"> 
    <nav class="navbar navbar-default"> 
/*more code here */ 
    </nav> 
</div> 

<div data-ng-view></div> 

<script  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"> </script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular- route.js"></script> 
<!--<script  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular- route.js"> </script>--> 
<script src = "../controller.js"></script> 
<script src = "../app.js"></script> 

</body> 

</html> 

main.htmlを

<div> 
    Main Body 
</div> 
+0

あまりにも多くのミスを使用することができ、ngRouteは二回注入されている必要はありません –

答えて

0

を使用すると、単一のファイルに分けてコントローラを定義しているので、あなたが安全に、最初のモジュールから削除することができ

(I)、あなたのコードでいくつかの問題があります。

function(){ 
var myApp = angular.module('myApp',['ngRoute']) 
myApp.config(function($routeProvider, $locationProvider){ 
    $locationProvider.html5Mode(true); 
    $routeProvider 
     .when('/main', { 
      templateUrl: './main.html', 
       controller: 'controller' 
     }) 
     .otherwise({redirectTo: '/main'}); 
}); 
})(); 

(ⅱ)あなたは、あなたはちょうどこのコードでグローバルに宣言モジュール

(function() { 
      app.controller('controller', ['$scope', function ($scope) { 
     }]); 
})(); 

DEMO

関連する問題