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
