2017-04-06 8 views
0

私は、テンプレートのURLに の にアクセスする前に、ページの識別を行うために角度を使用しています。私は何もしません!templateUrlのangularJSは関数を呼び出せません

注: 不明なエラー:[$インジェクター:modulerr]

ここ

私のコードのJS:

angular.module('training') 
 
.config(function($routeProvider){ 
 
    $routeProvider 
 
    .when('/',{ 
 
     templateUrl: 'index.html', 
 
     controller: 'mainCtrl' 
 
    }) 
 
    .when('/login',{ 
 
     templateUrl: 'login.html', 
 
     controller: 'loginCrtl' 
 
    }); 
 
}) 
 
.controller('loginCrtl',['$scope','$timeout','apiservice','$routeProvider', function($scope,$timeout,apiservice,$routeProvider){ 
 

 
$scope.ppp= function(){ 
 
    alert('ok'); 
 
} 
 

 

 
}]) 
 
.controller('mainCtrl'......
私はNG-アプリ= "MyApp]を" と呼ばれるときに、このエラーを与えます

ここで私のlogin.htmlと

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 

 
      <script src="public/jquery-1.11.2.min.js"></script> 
 
      <script src="public/jquery-ui.js"></script> 
 
\t \t \t \t \t <script src="bower_components/angular/angular.min.js"></script> 
 
\t \t \t \t \t <!-- <script src="bower_components/angular-route/angular-route.min.js"></script> --> 
 
\t \t \t \t <script src="controllers/app.js"></script> 
 
     <script src="services/apiService.js"></script> 
 
     <script src="controllers/mainCrtl.js"></script> 
 

 
</head> 
 
<body ng-controller="loginCrtl"> 
 

 
<div class="center" style="width: 500px; height: 300px; background-color: #e5e5e5;"> 
 
Veuillez authentifier:<br><br> 
 
Login: <input type="text" id="login"><br><br> 
 
Password: <input type="text" id="pass"> 
 

 

 
<br><br> 
 
<button id="ValidAccess" ng-click="ppp()">ok</button> 
 
</div> 
 

 
</body> 
 

 
<style > 
 
\t .center { 
 
    margin: auto; 
 
    width: 60%; 
 
    border: 3px solid #73AD21; 
 
    padding: 10px; 
 
} 
 
</style> 
 
</html>

私のindex.html:

<!DOCTYPE html> 
 
<html lang="fr"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Planni</title> 
 
    <link rel="stylesheet" type="text/css" href="mystyle/bootstrap-tokenfield.css"> 
 
    
 
    <link rel="stylesheet" type="text/css" href="mystyle/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="mystyle/bootstrap-datepicker.css"> 
 
    <link rel="stylesheet" href="mystyle/jquery-ui.css"> 
 
      <script src="public/jquery-1.11.2.min.js"></script> 
 
      <script src="public/jquery-ui.js"></script> 
 
      <script src="public/bootstrap-datepicker.js"></script> 
 
      <script src="node_modules/lodash/lodash.js"></script> 
 
      <script src="bower_components/angular/angular.min.js"></script> 
 
      <script src="bower_components/angular-route/angular-route.min.js"></script> 
 
      <script src="bower_components/moment/min/moment-with-locales.min.js"></script> 
 
      <script src="public/daypilot/daypilot-all.min.js"></script> 
 
      <script src="public/bootstrap-tokenfield.js"></script> 
 
      <script src="public/bootstrap.min.js"></script> 
 
      <!-- <script src="bower_components/angular-route/angular-route.js"></script> --> 
 

 
         <script src="controllers/app.js"></script> 
 
         <script src="services/apiService.js"></script> 
 
         <script src="controllers/mainCrtl.js"></script> 
 
</head> 
 
<body data-ng-app="training" data-ng-controller="mainCtrl"> 
 
.... 
 
</body> 
 
</html>

答えて

2

あなたのngのアプリ?あなたのモジュールは、モジュールを取得trainingコールあなたのng-app ='training'ないng-app='myApp' Promblemモジュールここ

angular.module('training',[])

とに設定されている、それはここでは、この

angular.module('training',['ngRoute'])

ように使用設定されていないされている

angular.module('training')

はEDIT

あなたはこの

angular.module('training',['ngRoute']) 
.controller('mainCtrl',mainCtrl) 
.controller('loginCtrl',loginCtrl) 

    function mainCtrl(){ 
    // 
    } 

    function loginCtrl(){ 
    // 
    } 

のように使用するか、別のモジュールを持っている場合は、この

angular.module('anothermodule',[]) 
    .controller('loginCtrl',loginCtrl) 

     function loginCtrl(){ 
     // 
     } 

好きなトレーニングアプリで使用loginctr含ま

angular.module('training',['ngRoute','anothermodule']) 
2
それを含めます

最初のあなたはhtmlファイルにng-appディレクティブを追加する必要があります。私のお勧めは、私はルータのためにあなたを想定してモジュールに

angular.module('training',[]) 

を空の角括弧を追加する必要があり、あなたはモジュールを初期化する際に、JSで、その後htmlタグの内部

<html ng-app="training"> 

それを追加することですngRouteを使用しています。[$インジェクタを::modulerr]その場合、あなたは私はhtmlタグでこのアプリを呼び出すときに、私は不明なエラーを発見したトレーニングモジュールでngRouteことなく、追加

angular.module('training',['ngRoute']) 
+0

あなたtrainingモジュールにルートモジュールを挿入する必要があります! !! – Fredj

+0

ngルートのインデックスhtmlにスクリプトファイルを追加しました –

+0

yes: Fredj

関連する問題