2016-08-05 71 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變量全局在這裏?只是想知道它好奇 –