Question

我有一个html文件

<!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，我实现了控制器

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>

我运行网站时显示{{message}}！我检查了控制台，说它无法加载模块，这可能是我的错误，或者我该如何解决这个问题

Answer 1

您的控制器与路由配置位于同一文件中，还是单独的文件？

如果它在一个额外的文件中，你必须替换

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

与

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

如果它在同一个文件中，请在此处发布错误消息

无法在Angular JS中加载模块

1 个答案: