I want to know what needs to improve with my application. Maybe there is a better way instead of what I am using currently.
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
<meta http-equiv="x-ua-compatible" content="IE=9" charset="UTF-8"/>
<title>Angular JS</title>
<script src="lib/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="lib/JSON3.min.js" type="text/javascript"></script>
<script src="lib/angular/angular.js" type="text/javascript"></script>
<script src="lib/angular/angular-route.min.js" type="text/javascript"></script>
<script src="lib/angular/app.js" type="text/javascript"></script>
<script src="lib/angular/controllers.js" type="text/javascript"></script>
</head>
<body>
<div>
<h1>My App </h1>
</div>
<div ng-view>
</div>
</body>
</html>
list.html:
<section>
<a href="#/new">New</a>
</section>
<section>
<select ng-model="orderRecord">
<option value="Id">Id</option>
<option value="LastName">LastName</option>
</select>
<label>Ascending</label>
<input type="radio" ng-model="direction" name="direction" checked/>
<label>Descending</label>
<input type="radio" ng-model="direction" name="direction" value="reverse"/>
<input type="text" ng-model="query"/>
</section>
<section>
<table>
<tr ng-repeat="item in logs | filter: query | orderBy: orderRecord:direction">
<td>{{item.Id}}</td>
<td>{{item.FirstName}}</td>
<td>{{item.LastName}}</td>
<td>{{item.Mi}}</td>
<td><a href="#/details/{{logs.indexOf(item)}}">Edit</a></td>
</tr>
</table>
</section>
details.html:
<section>
<table>
<tr>
<td>Id: <input type="text" ng-model="log.Id" readonly /></td>
</tr>
<tr>
<td>FirstName: <input type="text" ng-model="log.FirstName" /></td>
</tr>
<tr>
<td>LastName: <input type="text" ng-model="log.LastName" /></td>
</tr>
<tr>
<td>Mi: <input type="text" ng-model="log.Mi" /></td>
</tr>
</table>
</section>
<section>
<input type="button" value="Update" ng-click="Update(log)"/>
<input type="button" value="Delete" ng-click="Delete(log.Id)"/>
</section>
new.html:
<section>
<table ng-controller="NewController">
<tr>
<td>FirstName: <input type="text" ng-model="FirstName" /></td>
</tr>
<tr>
<td>LastName: <input type="text" ng-model="LastName" /></td>
</tr>
<tr>
<td>Mi: <input type="text" ng-model="Mi" /></td>
</tr>
<tr>
<td><input type="button" ng-click="Create()" value="Create "/></td>
</tr>
</table>
</section>
app.js:
var myApp = angular.module('MyApp', [
'ngRoute',
'logController'
]);
myApp.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/list', {
templateUrl: 'partials/list.html',
controller: 'ListController'
}).
when('/details/:itemId', {
templateUrl: 'partials/details.html',
controller: 'DetailsController'
}).
when('/new', {
templateUrl: 'partials/new.html',
controller: 'NewController'
}).
otherwise({
redirectTo: '/list'
});
}]);
controller.js:
var logController = angular.module('logController', []);
var logData = null;
logController.controller('ListController', ['$scope', '$http', function ($scope, $http) {
$http.post('testws.asmx/GetUsers', {
headers: { 'Content-Type': 'application/json; charset=utf-8' }
}).success(function (data) {
$scope.logs = data.d;
$scope.orderRecord = 'Id';
logData = $scope.logs;
})
} ]);
logController.controller('DetailsController', ['$scope', '$http', '$routeParams', '$location', function ($scope, $http, $routeParams, $location) {
$scope.logs = logData;
$scope.log = logData[$routeParams.itemId];
$scope.Update = function (log) {
$http.post('testws.asmx/UpdateUser', JSON.stringify({ Id: log.Id, FirstName: log.FirstName, LastName: log.LastName, Mi: log.Mi }), {
headers: { 'Content-Type': 'application/json; charset=utf-8' }
}).success(function (data) {
$location.path("/list");
}).error(function (err) {
alert(err.Message);
});
};
$scope.Delete = function (id) {
$http.post('testws.asmx/DeleteUser', JSON.stringify({ Id: id }), {
headers: { 'Content-Type': 'application/json; charset=utf-8' }
}).success(function (data) {
$location.path("/list");
}).error(function (err) {
alert(err.Message);
});
}
} ]);
logController.controller('NewController', ['$scope', '$http', '$location', function ($scope, $http, $location) {
$scope.Create = function () {
var user = {
FirstName: $scope.FirstName,
LastName: $scope.LastName,
Mi: $scope.Mi
};
$http.post('testws.asmx/AddUser', JSON.stringify(user), {
headers: { 'Content-Type': 'application/json; charset=utf-8' }
}).success(function (data) {
$location.path("/list");
}).error(function (err) {
alert(err.Message);
});
}
} ]);
