Forgive me for my novelty with Angular but I can't find what the problem to this seemingly simple program. Instead of the $scope displaying "Jonathan" which is defined LoginController, it displays {{logins.username}} in login.html. If I move the controller in the index.html, it works fine. When I move it to app.js file, it does not work. Any help or direction would be greatly appreciated. Focusing on LoginController, below is my code:
Index.html
<!DOCTYPE html>
<html ng-app="millersFormalsApp">
<head>
<meta charset="UTF-8" />
<!-- This add the Angular JS to the program -->
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/app.js"></script>
<!-- load the logo -->
<img src="img/millers_icon.png">
</head>
<body>
<h2> AngularJS Project</h2>
<div class="container">
<div id="menu">
<a href="Views/home.html" class="btn">Home</a>
<a href="Views/login.html" class="btn">Login</a>
<a href="Views/register.html" class="btn">Register</a>
</div>
<div ng-view=""></div>
</div>
</body>
</html>
login.html
<h2> Login Page</h2>
Username:
<input type="text" placeholder="Username" ng-model="logins.username"
<br />
Password:
<input type="text" placeholder="Password" ng-model="logins.password"
<h2>Your Username is {{ logins.username }} </h2>
app.js
var millersFormalsApp = angular.module('millersFormalsApp', ['ngRoute']);
//** Route Provider takes care of routing functionality based
//** upon what has been selected
millersFormalsApp.config(function ($routeProvider){
$routeProvider
.when('/',
{
controller: 'HomeController',
templateUrl: 'Views/home.html'
})
.when('/login',
{
controller: 'LoginController',
templateUrl: 'Views/login.html'
})
.when('/register',
{
controller: 'RegisterController',
templateUrl: 'Views/register.html'
})
.otherwise({redirectTo: 'home.html'});
});
//** Controllers are called by the Route Provider to specifically execute
//** the selected item
millersFormalsApp.controller('HomeController', function ($scope)
{
$scope.homePage = "This is Miller's Home Page";
});
millersFormalsApp.controller('LoginController', function ($scope)
{
$scope.logins = {username: "Jonathan", password: ""};
console.log($scope);
});
millersFormalsApp.controller('RegisterController', function ($scope) {
$scope.register = { firstname: "", lastname: "" };
console.log($scope);
});
Aucun commentaire:
Enregistrer un commentaire