Question

我在访问应用程序主页之前使用angular来进行页面识别，在templateUrl：login.html我什么都做不了！

注意：当我拨打ng-app =＆＃34; myApp＆＃34;会给出这个错误：未捕获的错误：[$ injector：modulerr]

这里是我的代码JS：

＆＃13;

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'......

＆＃13;

这是我的login.html

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title></title>

           <script src="public/jquery-1.11.2.min.js"></script> 
           <script src="public/jquery-ui.js"></script>
					<script src="bower_components/angular/angular.min.js"></script>
					<!-- <script src="bower_components/angular-route/angular-route.min.js"></script> -->
				  <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 >
	.center {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>
</html>

＆＃13;

我的index.html：

＆＃13;

<!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>

＆＃13;

Answer 1

你的ng-app在哪里？你的模块是training来电ng-app ='training'而不是ng-app='myApp' 你的Promblem并没有像这样设置它

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'])

Answer 2

首先，您需要将ng-app指令添加到您的html文件中。我的建议是将其添加到html标记

中

<html ng-app="training">

然后在js中，当你初始化模块时，需要在模块中添加空方括号

angular.module('training',[])

我假设您正在使用ngRoute的路由器。在这种情况下，您需要将路由模块注入training模块

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

templateUrl中的angularJS无法调用函数

2 个答案: