Table data is normally repeatable by nature. ng-repeat directive can be used to draw table easily. Following example states the use of ng-repeat directive to draw a table. <table> <tr> <th> Name </th> <th> Marks </th> </tr> <tr ng-repeat = "subject in student.subjects" > <td> {{ subject.name }} </td> <td> {{ subject.marks }} </td> </tr> </table> Table can be styled using CSS Styling. <style> table , th , td { border : 1px solid grey ; border - collapse : collapse ; padding : 5px ; } table tr : nth - child ( odd ) { background - color : #f2f2f2; } table tr : nth - child ( even ) { background - color : #ffffff; } </style> Example Following example will showcase all the above mentioned directive. <html> <head> <
AngularJS User Service (A user service designed to interact with a RESTful web service to manage users within the system)
(function () {
'use strict';
angular
.module('app')
.factory('UserService', UserService);
UserService.$inject = ['$http'];
function UserService($http) {
var service = {};
service.GetAll = GetAll;
service.GetById = GetById;
service.GetByUsername = GetByUsername;
service.Create = Create;
service.Update = Update;
service.Delete = Delete;
return service;
function GetAll() {
return $http.get('/api/users').then(handleSuccess, handleError('Error getting all users'));
}
function GetById(id) {
return $http.get('/api/users/' + id).then(handleSuccess, handleError('Error getting user by id'));
}
function GetByUsername(username) {
return $http.get('/api/users/' + username).then(handleSuccess, handleError('Error getting user by username'));
}
function Create(user) {
return $http.post('/api/users', user).then(handleSuccess, handleError('Error creating user'));
}
function Update(user) {
return $http.put('/api/users/' + user.id, user).then(handleSuccess, handleError('Error updating user'));
}
function Delete(id) {
return $http.delete('/api/users/' + id).then(handleSuccess, handleError('Error deleting user'));
}
// private functions
function handleSuccess(res) {
return res.data;
}
function handleError(error) {
return function () {
return { success: false, message: error };
};
}
}
})();
'use strict';
angular
.module('app')
.factory('UserService', UserService);
UserService.$inject = ['$http'];
function UserService($http) {
var service = {};
service.GetAll = GetAll;
service.GetById = GetById;
service.GetByUsername = GetByUsername;
service.Create = Create;
service.Update = Update;
service.Delete = Delete;
return service;
function GetAll() {
return $http.get('/api/users').then(handleSuccess, handleError('Error getting all users'));
}
function GetById(id) {
return $http.get('/api/users/' + id).then(handleSuccess, handleError('Error getting user by id'));
}
function GetByUsername(username) {
return $http.get('/api/users/' + username).then(handleSuccess, handleError('Error getting user by username'));
}
function Create(user) {
return $http.post('/api/users', user).then(handleSuccess, handleError('Error creating user'));
}
function Update(user) {
return $http.put('/api/users/' + user.id, user).then(handleSuccess, handleError('Error updating user'));
}
function Delete(id) {
return $http.delete('/api/users/' + id).then(handleSuccess, handleError('Error deleting user'));
}
// private functions
function handleSuccess(res) {
return res.data;
}
function handleError(error) {
return function () {
return { success: false, message: error };
};
}
}
})();
Comments
Post a Comment
Comment