2017-04-06 72 views
0

我正在使用angular來訪問應用程序main, 在templateUrl:login.html之前進行頁面標識,我無法做任何事情!templateUrl中的angularJS無法調用函數

注:當我叫NG-應用= 「對myApp」 將給這個錯誤: 未捕獲的錯誤:[$注射器: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'......

這裏我的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' 你問題的探析不是將其設置使用這樣

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

這裏設置一個模塊

angular.module('training',[])

,這裏是得到一個模塊

angular.module('training')

編輯

你使用這樣

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

    function mainCtrl(){ 
    // 
    } 

    function loginCtrl(){ 
    // 
    } 

,或者如果你有另一個模塊包含loginctr使用這樣

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

     function loginCtrl(){ 
     // 
     } 

而且在訓練中的應用包括它

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

第一個你需要將ng-app指令添加到你的html文件中。我的建議是增加它裏面html標籤

<html ng-app="training"> 

然後在JS,當你初始化模塊,需要空方括號添加到模塊

angular.module('training',[]) 

我承擔路由器你正在使用ngRoute。在這種情況下,你需要的路由模塊注入到你的training模塊

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

我補充說ngRoute在訓練模塊,但是當我把這個應用程序中的HTML標籤,我發現未捕獲的錯誤:[$注射器:modulerr] !! ! – Fredj

+0

您是否在索引html中添加了腳本文件ng route –

+0

yes: Fredj