2016-08-05 57 views
1

加载模块我有一个HTML文件失败的角JS

<!doctype html> 
<html lang="en" ng-app="myApp"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Angular Registration</title> 
    <meta name="viewport" content="width=device-width, user-scalable=no"> 
    <link href='https://fonts.googleapis.com/css?family=Lato:400,100,700,900' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" href="css/style.css"> 
    <script src="js/lib/angular/angular.min.js"></script> 
    <script src="js/lib/angular/angular-route.min.js"></script> 
    <script src="js/lib/angular/angular-animate.min.js"></script> 
    <script src="js/app.js"></script> 
    <script src="js/controllers/registration.js"></script> 
</head> 
<body> 
<header></header> 
<div class="page"> 
    <main class="cf" ng-view> 
    {{message}}</main> 
</div> 
</body> 
</html> 

然后,我必须在这里我实现路由提供商app.js。

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

myApp.config(['$routeProvider',function($routeProvider){ 
    $routeProvider. 
     when('/login',{ 
      templateUrl:'views/login.html', 
      controller:'RegistrationController' 
     }). 
     when('/register',{ 
      templateUrl: 'views/register.html', 
      controller: 'RegistrationController' 
     }). 
     when('/success',{ 
      templateUrl: 'views/success.html', 
      controller: 'SuccessController' 
     }). 
     otherwise({ 
      redirectTo:'/login' 
     }); 
}]); 

然后,我有一个registration.js其中I实现控制器

myApp.controller('RegistrationController',['$scope',function($scope){ 
    $scope.message="Welcome to my app"; 
}]); 

这是我指的视图文件:

<section class="card login"> 
    <form name="myform" 
    novalidate> 

    <div class="textintro"> 
     <h1>Hi there!</h1> 
     <p>Log-in to access the awesomeness!</p> 
     <p>{{message}}</p> 

    </div> 

    <fieldset> 
     <input type="email" name="email" placeholder="Email"> 
     <input type="password" name="password" placeholder="Password"> 
    </fieldset> 

    <button type="submit" class="btn">Login</button> 
    <p>or <a href="#/register">register</a></p> 
    </form> 
</section> 

的{{消息}}是显示为当我运行网站时!我检查了它说未能加载模块的控制台,这可能是我的错误,或者我该如何解决这个问题

回答

4

您的控制器与路由配置文件相同还是单独的文件?

如果是在一个额外的文件必须更换

myApp.controller('RegistrationController',['$scope',function($scope){ 

angular.module('myApp').controller('RegistrationController',['$scope',function($scope){ 

如果是在同一个文件,请张贴在这里的错误消息

+1

谢谢凯布!它的工作 –

+1

但请告诉我为什么它应该在其他文件不是myApp变量全局在这里?只是想知道它好奇 –