hello i have a problem with angular im benninger to this framework but i have some knowledge about it . Yesterday i faced a problem when i wanted to change controller from a global function(in this case all is OK) to controller by module i recive blank page here is my code
angular.module('myApp', ['ngRoute', 'membersService']).config(
['$httpProvider', '$routeProvider', function ($httpProvider, $routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'partials/home.html',
controller: MembersCtrl
}).otherwise({
redirectTo: '/home'
});
}]);
var myApp = angular.module('myApp');
myApp.controller('MembersCtrl',['$scope','$http', 'MembersSrv',function ($scope, $http, MembersSrv) {
$scope.refresh = function () {
return MembersSrv.getAllPersons().then(function (data) {
$scope.persons = data.data;
});
};
$scope.clearMessages = function () {
$scope.successMessages = '';
$scope.errorMessages = '';
$scope.errors = {};
};
$scope.reset = function () {
if ($scope.regForm) {
$scope.regForm.$setPristine();
}
$scope.newPerson = {name: "", lname: "", phoneNumber: ""};
$scope.clearMessages();
};
$scope.register = function () {
$scope.clearMessages();
MembersSrv.save($scope.newPerson, function (data) {
$scope.refresh();
$scope.reset();
$scope.successMessages = ['Member Registered'];
}, function (result) {
if ((result.status == 409) || (result.status == 400)) {
$scope.errors = result.data;
} else {
$scope.errorMessages = ['Unknown server error'];
}
});
};
$scope.refresh();
$scope.reset();
$scope.orderBy = 'name';
}]);
angular.module('membersService', []).service('MembersSrv', [
'$http', function ($http) {
this.getAllPersons = function () {
var url = "http://localhost:8080/gadziksy-web/rest/person";
var req = {
method: 'GET',
url: url,
};
return $http(req);
}
}]);
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>myApp</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- Disable phone number detection on iOS. -->
<meta name="format-detection" content="telephone=no"/>
<link rel="stylesheet" href="css/screen.css" type="text/css"/>
<!-- Load angularjs -->
<script src="js/libs/angular.js"></script>
<!-- Load angularjs-route, which allows us to use multiple views displayed through application routes -->
<script src="js/libs/angular-route.js"></script>
<!-- Load angularjs-resource, which allows us to interact with REST resources as high level services -->
<script src="js/libs/angular-resource.js"></script>
<!-- Load the controllers for our app -->
<script src="js/controllers/MemberCtrl.js"></script>
<!-- Load the application wide JS, such as route definitions -->
<script src="js/app.js"></script>
<!-- Load the services we have defined for the application, particularly the REST services -->
<script src="js/services/MemberSrv.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html><?xml version="1.0" encoding="UTF-8"?>
<div ng-controller="MembersCtrl">
<h1 align="center">International Bank Application</h1>
<div>
<p>You have successfully connected to the Application.</p>
</div>
<form name="regForm" ng-submit="register()">
<h2>Member Registration</h2>
<fieldset>
<legend>Register a member:</legend>
<div>
<label for="name">Name:</label>
<input type="text" name="name" id="name" ng-model="newPerson.name" placeholder="Your Name" required
autofocus/>
</div>
<div>
<label for="lname">Lname:</label>
<input type="text" name="lname" id="lname" ng-model="newPerson.lname" placeholder="Your Lastname"
required/>
</div>
<div>
<label for="dob">Date</label>
<input type="date" name="dob" id="dob" ng-model="newPerson.dob" placeholder="Your Date" required/>
</div>
<ul ng-hide="!successMessages" class="success">
<li ng-repeat="message in successMessages">{{message}}</li>
</ul>
<ul ng-hide="!errorMessages" class="error">
<li ng-repeat="message in errorMessages">{{message}}</li>
</ul>
<div>
<input type="submit" ng-disabled="regForm.$invalid" id="register" value="Register"/>
<input type="button" ng-click="reset()" name="cancel"
id="cancel" value="Cancel"/>
</div>
</fieldset>
</form>
<h2>Persons</h2>
<em ng-show="persons.length == 0">No registered members.</em>
<table ng-hide="persons.length == 0" class="simpletablestyle">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Lname</th>
<th>Date</th>
<th>REST URL</th>
</tr>
</thead>
<tr ng-repeat="person in persons | orderBy:orderBy">
<td>{{person.id}}</td>
<td>{{person.name}}</td>
<td>{{person.lname}}</td>
<td>{{person.dob}}</td>
<td><a href="rest/person/{{person.id}}">details-{{person.id}}</a>
</td>
</table>
<div>
REST URL for all members: <a href="rest/members">/rest/members</a>
</div>
<div>
<input type="button" ng-click="refresh()" name="refresh"
id="refresh" value="Refresh"/>
</div>
</div>
js/controllers/MemberCtrl.jsafterapp.js