CODEWITHSUNDEEP
angularjs
Akshay Bhat
Akshay Bhat

Reputation: 236

Failed to load module in Angular JS

I have a html file

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

Then I have app.js where i implement route providers.

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

Then I have a registration.js where I implement the controller

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

this is the view file I am referring to:

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

The {{message}} is displayed as it is when I run the website !! I checked the console it says failed to load the module, what might be my mistake here or how can I solve this

Upvotes: 1

Views: 361

Answers (1)

Cabe Skuriles
Cabe Skuriles

Reputation: 524

Is your controller in the same file as the route config or it is separate file?

If it is in an extra file you have to replace

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

with

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

If it is in the same file, please post the error message here

Upvotes: 4

Related Questions