Category Archives: AngularJS

AngularJS User Registration Login Authentication Example

User authentication is very common in modern web application. User authentication is a security mechanism that is used to identify whether a user is someone who he claimed to be and to restrict unauthorized access to member only areas in a web application. In this tutorial we’ll show you how to create simple user registration and login system using angularjs. In our previous articles we have demonstrated you how to create simple user login in angularjs and how to create simple user registration in angularjs.

In this tutorial, we’ll guide you through the complete process of creating a user registration system where users can create an account by providing username, email and password, login and logout using Angularjs. We’ll also show you how you can make some pages accessible only to logged-in users. In this tutorial we will first create user registration form in angularjs, and then we’ll create user authentication or login form in angularjs, as well as a welcome page and a logout script.

Project’s Directory Structure :-

angularjs-user-authentication-registration-login-1

AngularJS Application Layout

Before starting with this tutorial we will create base layout i.e. index.html file where all our application views will be loaded. Let’s create index.html file and put the following code in it –

index.html

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS User Registration Login Example - W3Adda</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="jumbotron">
<div class="container">
<div class="header">AngularJS User Registration Login Example - W3Adda</div>
<div class="col-sm-8 col-sm-offset-2">
<div ng-view></div>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="//code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="//code.angularjs.org/1.6.9/angular-route.min.js"></script>
<script src="//code.angularjs.org/1.6.9/angular-cookies.min.js"></script>
<script src="app.js"></script>
<script src="homeController.js"></script>
<script src="loginController.js"></script>
<script src="registerController.js"></script>
<script src="userService.svc.js"></script>
<script src="authenticationService.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>AngularJS User Registration Login Example - W3Adda</title>

</head>

<body>

<div class="header">AngularJS User Registration Login Example - W3Adda</div>

</div>

</body>

</html>

AngularJS Application

Every angular application starts from creating a angular module. Module is a container that holds the different parts of your application such as controllers, service, etc. In this step we will create a main javascript file app.js that will hold all the required configuration to run an angularjs application. We will also configure application routes in this file using AngularJS UI Router module. Let’s create app.js file and put the following code in it –

app.js

(
function () {
'use strict';
angular
.module('app', ['ngRoute', 'ngCookies'])
.config(config)
.run(run);
config.$inject = ['$routeProvider', '$locationProvider'];
function config($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
controller: 'LoginController',
templateUrl: 'login.html',
controllerAs: 'vm'
})
.when('/home', {
controller: 'HomeController',
templateUrl: 'home.html',
controllerAs: 'vm',
})            
.when('/register', {
controller: 'RegisterController',
templateUrl: 'register.html',
controllerAs: 'vm'
})
.otherwise({ redirectTo: '/login' });
}    
run.$inject = ['$rootScope'];
function run(){
console.clear();
}
})();

(

function () {

'use strict';

angular

.module('app', ['ngRoute', 'ngCookies'])

.config(config)

.run(run);

config.$inject = ['$routeProvider', '$locationProvider'];

function config($routeProvider, $locationProvider) {

$routeProvider

.when('/', {

controller: 'LoginController',

templateUrl: 'login.html',

controllerAs: 'vm'

})

.when('/home', {

controller: 'HomeController',

templateUrl: 'home.html',

controllerAs: 'vm',

})

.when('/register', {

controller: 'RegisterController',

templateUrl: 'register.html',

controllerAs: 'vm'

})

.otherwise({ redirectTo: '/login' });

}

run.$inject = ['$rootScope'];

function run(){

console.clear();

}

})();

The app variable is initialized as angular module, notice that we have used ng-app directive in index.html file to bind the angular application to a container in base layout file. Now, we have created an app module and added ngRoute and ngCookies module for application routing and for storing user information in cookies. Here, we are using $routeProvider in config() function to configure our application routing. In routing configuration, every route you specify have a template file and a controller attached to it.

AngularJS Template and Controller

As you can see in routing configuration, every route you specify have a template and controller attached to it. Angularjs Template file holds all html that is being used to display route specific page. The angularjs controller hold the actual business logic attached with the route. In this step we will create separate template and controller files for user registration, login and home page respectively.

User Registration :-

In this step we’ll create a registration form that allows users to create a new account by filling out a web form. User Registration form will have First Name, Last Name, Username and Password along with Register and Cancel buttons. Let’s create a register.html file in your project’s root directory and put the following code in it –

register.html

<div class="col-md-6 col-md-offset-3">
<h4 style="text-align:center;color:blue">Register</h4>
<form name="form" ng-submit="vm.register()" role="form">
<div class="form-group" ng-class="{ 'has-error': form.firstName.$dirty && form.firstName.$error.required }">
<label for="username">First name</label>
<input type="text" name="firstName" id="firstName" class="form-control" ng-model="vm.user.firstName" required />
<span ng-show="form.firstName.$dirty && form.firstName.$error.required" class="help-block">First name is required</span>
</div>
<div class="form-group" ng-class="{ 'has-error': form.lastName.$dirty && form.lastName.$error.required }">
<label for="username">Last name</label>
<input type="text" name="lastName" id="Text1" class="form-control" ng-model="vm.user.lastName" required />
<span ng-show="form.lastName.$dirty && form.lastName.$error.required" class="help-block">Last name is required</span>
</div>
<div class="form-group" ng-class="{ 'has-error': form.username.$dirty && form.username.$error.required }">
<label for="username">Username</label>
<input type="text" name="username" id="username" class="form-control" ng-model="vm.user.username" required />
<span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is required</span>
</div>
<div class="form-group" ng-class="{ 'has-error': form.password.$dirty && form.password.$error.required }">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control" ng-model="vm.user.password" required />
<span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span>
</div>
<div class="form-actions">
<button type="submit" ng-disabled="form.$invalid || vm.dataLoading" class="btn btn-primary">Register</button>
<img ng-if="vm.dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgA" /> <!-- truncated line -->
<a href="#!/" class="btn btn-link">Cancel</a>
</div>
</form>
</div>

<h4 style="text-align:center;color:blue">Register</h4>

<label for="username">First name</label>

<span ng-show="form.firstName.$dirty && form.firstName.$error.required" class="help-block">First name is required</span>

</div>

<span ng-show="form.lastName.$dirty && form.lastName.$error.required" class="help-block">Last name is required</span>

</div>

<label for="username">Username</label>

<span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is required</span>

</div>

<label for="password">Password</label>

<span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span>

</div>

<button type="submit" ng-disabled="form.$invalid || vm.dataLoading" class="btn btn-primary">Register</button>

<a href="#!/" class="btn btn-link">Cancel</a>

</div>

</form>

</div>

Now, we’ll create registerController.js file and define our registration controller. Let’s create registerController.js file and put the following code in it –

registerController.js

//registerController.js
(function () {
'use strict';
angular
.module('app')
.controller('RegisterController', RegisterController);
RegisterController.$inject = ['UserService', '$location'];
function RegisterController(UserService, $location) {
var vm = this;
vm.dataLoading = false;
vm.register = register;
function register() {
vm.dataLoading = true;
UserService.create(vm.user)
.then(function (response) {
if (response.success) {
alert('Registration successful');
$location.path('/');
} else {
alert(response.message);
vm.dataLoading = false;
}
});
}
}
})();

//registerController.js

(function () {

'use strict';

angular

.module('app')

.controller('RegisterController', RegisterController);

RegisterController.$inject = ['UserService', '$location'];

function RegisterController(UserService, $location) {

var vm = this;

vm.dataLoading = false;

vm.register = register;

function register() {

vm.dataLoading = true;

UserService.create(vm.user)

.then(function (response) {

if (response.success) {

alert('Registration successful');

$location.path('/');

} else {

alert(response.message);

vm.dataLoading = false;

}

});

}

})();

Here, register() function is invoked when Register button is clicked. The register() function takes the user input and pass it to create() function in UserService. UserService will process the user input and respond back with either success or failure.

User Login :-

In this step we’ll create a simple login form having two input fields ( UserName and Password) along with a login button. Here, user will input their username and password and submit the login form using login button. As the login form is submitted it will call login() function from our login controller(loginController.js) which will further use Authentication Service(AuthenticationService.js) to authenticate user. if the user is authenticated successfully they will be redirected to a user home page using $location service. If authentication fails, the user is notified with an error message.

login.html

In this step we’ll create a simple login form that allows users login using their username and password. Let’s create a login.html file in your project’s root directory and put the following code in it –

<!--login.html-->
<div class="col-md-6 col-md-offset-3">
<h4 style="text-align:center;color:blue">Login</h4>
<form name="form" ng-submit="vm.login()" role="form">
<div class="form-group" ng-class="{ 'has-error': form.username.$dirty && form.username.$error.required }">
<label for="username">Username</label>
<input type="text" name="username" id="username" class="form-control" ng-model="vm.username" required />
<span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is required</span>
</div>
<div class="form-group" ng-class="{ 'has-error': form.password.$dirty && form.password.$error.required }">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control" ng-model="vm.password" required />
<span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span>
</div>
<div class="form-actions" layout="row">
<button type="submit" ng-disabled="form.$invalid || vm.dataLoading" class="btn btn-primary">Login</button>
<img ng-if="vm.dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///" /> <!-- truncated line -->
<span style="float:right">Not a member?<a href="#!/register" class="btn btn-link">Register</a></span>
</div>
</form>
</div>

<h4 style="text-align:center;color:blue">Login</h4>

<label for="username">Username</label>

<span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is required</span>

</div>

<label for="password">Password</label>

<span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span>

</div>

<button type="submit" ng-disabled="form.$invalid || vm.dataLoading" class="btn btn-primary">Login</button>

<span style="float:right">Not a member?<a href="#!/register" class="btn btn-link">Register</a></span>

</div>

</form>

</div>

Now, we’ll create loginController.js file and define our login controller. Let’s create loginController.js file and put the following code in it –

loginController.js

//loginController.js
(function () {
'use strict';
angular
.module('app')
.controller('LoginController', LoginController);
LoginController.$inject = ['$location','AuthenticationService'];
function LoginController( $location, AuthenticationService) {
var vm = this;
vm.login = login;
(function initController() {
// reset login status
AuthenticationService.ClearCredentials();
})();
function login() {
console.log("login method executing");
vm.dataLoading = true;
AuthenticationService.Login(vm.username, vm.password, function (response) {
if (response.success) {
AuthenticationService.SetCredentials(vm.username, vm.password);
$location.path('/home');
} else {
alert(response.message);
vm.dataLoading = false;
}
});
}
}
})();

//loginController.js

(function () {

'use strict';

angular

.module('app')

.controller('LoginController', LoginController);

LoginController.$inject = ['$location','AuthenticationService'];

function LoginController( $location, AuthenticationService) {

var vm = this;

vm.login = login;

(function initController() {

// reset login status

AuthenticationService.ClearCredentials();

})();

function login() {

console.log("login method executing");

vm.dataLoading = true;

AuthenticationService.Login(vm.username, vm.password, function (response) {

if (response.success) {

AuthenticationService.SetCredentials(vm.username, vm.password);

$location.path('/home');

} else {

alert(response.message);

vm.dataLoading = false;

}

});

}

})();

User Home :-

Once a user is successfully logged in the home page (home.html) will be loaded. Here, we have simple welcome message along with a list of registered users. Let’s create a home.html file in your project’s root directory and put the following code in it –

home.html

<!--home.html-->
<div class="col-md-6 col-md-offset-3">
<h2 style="text-align:center;color:blue">Home</h2>
<div align="right"><a href="#!/">Logout</a></div>
<h3>Hi {{vm.currentUser.firstName + " " + vm.currentUser.lastName}}</h3>
<div>Welcome.. You're logged in successfuly!!
<br/>To view all the users please click on below link.</div>
<div align="right">
<a href="" ng-click="vm.showUsers = !vm.showUsers">View Users</a>
</div>
<div ng-if="vm.showUsers">
<h4>Registered Users:</h4>
<table class = "table table-striped table-bordered table-hover">
<thead>
<tr class = "info">
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr ng-repeat = "user in vm.allUsers track by $index">
<td>{{ user.firstName }}</td>
<td>{{ user.lastName }}</td>
<td>{{ user.username }}</td>
</tr>
</tbody>
</table>
</div>
</div>

<div align="right"><a href="#!/">Logout</a></div>

<h3>Hi {{vm.currentUser.firstName + " " + vm.currentUser.lastName}}</h3>

<div>Welcome.. You're logged in successfuly!!

<br/>To view all the users please click on below link.</div>

<a href="" ng-click="vm.showUsers = !vm.showUsers">View Users</a>

</div>

<h4>Registered Users:</h4>

<thead>

<th>First Name</th>

<th>Username</th>

</tr>

</thead>

<tbody>

<td>{{ user.firstName }}</td>

<td>{{ user.lastName }}</td>

<td>{{ user.username }}</td>

</tr>

</tbody>

</table>

</div>

Now, we’ll create homeController.js file and define our home page controller. Let’s create homeController.js file and put the following code in it –

homeController.js

(function () {
'use strict';
angular
.module('app')
.controller('HomeController', HomeController);
HomeController.$inject = ['UserService', '$rootScope'];
function HomeController(UserService, $rootScope) {
var vm = this;
vm.showUsers = false;
vm.currentUser = null;
vm.allUsers = [];
initController();
function initController() {
loadCurrentUser();
loadAllUsers();
}
function loadCurrentUser() {
UserService.getByUsername($rootScope.globals.currentUser.username)
.then(function (user) {
vm.currentUser = user;
});
}
function loadAllUsers() {
UserService.get()
.then(function (users) {
vm.allUsers = users;
});
}
}
})();

(function () {

'use strict';

angular

.module('app')

.controller('HomeController', HomeController);

HomeController.$inject = ['UserService', '$rootScope'];

function HomeController(UserService, $rootScope) {

var vm = this;

vm.showUsers = false;

vm.currentUser = null;

vm.allUsers = [];

initController();

function initController() {

loadCurrentUser();

loadAllUsers();

}

function loadCurrentUser() {

UserService.getByUsername($rootScope.globals.currentUser.username)

.then(function (user) {

vm.currentUser = user;

});

}

function loadAllUsers() {

UserService.get()

.then(function (users) {

vm.allUsers = users;

});

}

})();

This will have loadCurrentUser() and loadAllUsers() functions to display currently logged in user details and to to display a list of all the registered users.

AngularJS Services

In this step, we will define angualrjs service for user authentication and to store and fetch user information form local storage.

Authentication Service :-

Here, we will create a authentication service(authenticationService.js) that will be used to authenticate user with login credentials provided and to set and clear user credentials from angularjs rootScope object. Let’s create authenticationService.js file and put the following code in it –

authenticationService.js

//authenticationService.js
(function () {
'use strict';
angular
.module('app')
.factory('AuthenticationService', AuthenticationService);
AuthenticationService.$inject = ['$http', '$cookies', '$rootScope', '$timeout', 'UserService'];
function AuthenticationService($http, $cookies, $rootScope, $timeout, UserService) {
var service = {};
service.Login = Login;
service.SetCredentials = SetCredentials;
service.ClearCredentials = ClearCredentials;
return service;
function Login(username, password, callback) {
/* Dummy authentication for testing, uses $timeout to simulate api call
----------------------------------------------*/
$timeout(function () {
var response;
UserService.getByUsername(username)
.then(function (user) {
if (user !== null && user.password === password) {
response = { success: true };
} else {
response = { success: false, message: 'Username or password is incorrect' };
}
callback(response);
});
}, 1000);
/* Use this for real authentication
----------------------------------------------*/
//$http.post('/api/authenticate', { username: username, password: password })
//    .success(function (response) {
//        callback(response);
//    });
}
function SetCredentials(username, password) {
var authdata = Base64.encode(username + ':' + password);
$rootScope.globals = {
currentUser: {
username: username,
authdata: authdata
}
};
// set default auth header for http requests
$http.defaults.headers.common['Authorization'] = 'Basic ' + authdata;
// store user details in globals cookie that keeps user logged in for 1 week (or until they logout)
var cookieExp = new Date();
cookieExp.setDate(cookieExp.getDate() + 7);
$cookies.putObject('globals', $rootScope.globals, { expires: cookieExp });
}
function ClearCredentials() {
$rootScope.globals = {};
$cookies.remove('globals');
$http.defaults.headers.common.Authorization = 'Basic';
}
}
// Base64 encoding service used by AuthenticationService
var Base64 = {
keyStr: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=',
encode: function (input) {
var output = "";
var chr1, chr2, chr3 = "";
var enc1, enc2, enc3, enc4 = "";
var i = 0;
do {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output = output +
this.keyStr.charAt(enc1) +
this.keyStr.charAt(enc2) +
this.keyStr.charAt(enc3) +
this.keyStr.charAt(enc4);
chr1 = chr2 = chr3 = "";
enc1 = enc2 = enc3 = enc4 = "";
} while (i < input.length);
return output;
},
decode: function (input) {
var output = "";
var chr1, chr2, chr3 = "";
var enc1, enc2, enc3, enc4 = "";
var i = 0;
// remove all characters that are not A-Z, a-z, 0-9, +, /, or =
var base64test = /[^A-Za-z0-9\+\/\=]/g;
if (base64test.exec(input)) {
window.alert("There were invalid base64 characters in the input text.\n" +
"Valid base64 characters are A-Z, a-z, 0-9, '+', '/',and '='\n" +
"Expect errors in decoding.");
}
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
do {
enc1 = this.keyStr.indexOf(input.charAt(i++));
enc2 = this.keyStr.indexOf(input.charAt(i++));
enc3 = this.keyStr.indexOf(input.charAt(i++));
enc4 = this.keyStr.indexOf(input.charAt(i++));
chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4;
output = output + String.fromCharCode(chr1);
if (enc3 != 64) {
output = output + String.fromCharCode(chr2);
}
if (enc4 != 64) {
output = output + String.fromCharCode(chr3);
}
chr1 = chr2 = chr3 = "";
enc1 = enc2 = enc3 = enc4 = "";
} while (i < input.length);
return output;
}
};
})();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

//authenticationService.js

(function () {

'use strict';

angular

.module('app')

.factory('AuthenticationService', AuthenticationService);

AuthenticationService.$inject = ['$http', '$cookies', '$rootScope', '$timeout', 'UserService'];

function AuthenticationService($http, $cookies, $rootScope, $timeout, UserService) {

var service = {};

service.Login = Login;

service.SetCredentials = SetCredentials;

service.ClearCredentials = ClearCredentials;

return service;

function Login(username, password, callback) {

/* Dummy authentication for testing, uses $timeout to simulate api call

----------------------------------------------*/

$timeout(function () {

var response;

UserService.getByUsername(username)

.then(function (user) {

if (user !== null && user.password === password) {

response = { success: true };

} else {

response = { success: false, message: 'Username or password is incorrect' };

}

callback(response);

});

}, 1000);

/* Use this for real authentication

----------------------------------------------*/

//$http.post('/api/authenticate', { username: username, password: password })

// .success(function (response) {

// callback(response);

// });

}

function SetCredentials(username, password) {

var authdata = Base64.encode(username + ':' + password);

$rootScope.globals = {

currentUser: {

username: username,

authdata: authdata

}

};

// set default auth header for http requests

$http.defaults.headers.common['Authorization'] = 'Basic ' + authdata;

// store user details in globals cookie that keeps user logged in for 1 week (or until they logout)

var cookieExp = new Date();

cookieExp.setDate(cookieExp.getDate() + 7);

$cookies.putObject('globals', $rootScope.globals, { expires: cookieExp });

}

function ClearCredentials() {

$rootScope.globals = {};

$cookies.remove('globals');

$http.defaults.headers.common.Authorization = 'Basic';

}

// Base64 encoding service used by AuthenticationService

var Base64 = {

keyStr: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=',

encode: function (input) {

var output = "";

var chr1, chr2, chr3 = "";

var enc1, enc2, enc3, enc4 = "";

var i = 0;

do {

chr1 = input.charCodeAt(i++);

chr2 = input.charCodeAt(i++);

chr3 = input.charCodeAt(i++);

enc1 = chr1 >> 2;

enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);

enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);

enc4 = chr3 & 63;

if (isNaN(chr2)) {

enc3 = enc4 = 64;

} else if (isNaN(chr3)) {

enc4 = 64;

}

output = output +

this.keyStr.charAt(enc1) +

this.keyStr.charAt(enc2) +

this.keyStr.charAt(enc3) +

this.keyStr.charAt(enc4);

chr1 = chr2 = chr3 = "";

enc1 = enc2 = enc3 = enc4 = "";

} while (i < input.length);

return output;

decode: function (input) {

var output = "";

var chr1, chr2, chr3 = "";

var enc1, enc2, enc3, enc4 = "";

var i = 0;

// remove all characters that are not A-Z, a-z, 0-9, +, /, or =

var base64test = /[^A-Za-z0-9\+\/\=]/g;

if (base64test.exec(input)) {

window.alert("There were invalid base64 characters in the input text.\n" +

"Valid base64 characters are A-Z, a-z, 0-9, '+', '/',and '='\n" +

"Expect errors in decoding.");

}

input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");

do {

enc1 = this.keyStr.indexOf(input.charAt(i++));

enc2 = this.keyStr.indexOf(input.charAt(i++));

enc3 = this.keyStr.indexOf(input.charAt(i++));

enc4 = this.keyStr.indexOf(input.charAt(i++));

chr1 = (enc1 << 2) | (enc2 >> 4);

chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);

chr3 = ((enc3 & 3) << 6) | enc4;

output = output + String.fromCharCode(chr1);

if (enc3 != 64) {

output = output + String.fromCharCode(chr2);

}

if (enc4 != 64) {

output = output + String.fromCharCode(chr3);

}

chr1 = chr2 = chr3 = "";

enc1 = enc2 = enc3 = enc4 = "";

} while (i < input.length);

return output;

}

};

})();

User Service :-

Next, we will create a user service(userService.svc.js) to store and fetch user details from the localStorage object. Let’s create userService.svc.js file and put the following code in it –

userService.svc.js

//userService.svc.js
(function () {
'use strict';
angular.module("app")
.service("UserService" , UserService);
UserService.$inject = ['$timeout', '$filter', '$q'];
function UserService($timeout, $filter, $q){
var service = {};
service.get = get;
service.getByUsername = getByUsername;
service.create = create;
return service;
function get(){
var deferred = $q.defer();
deferred.resolve(getUsers());
return deferred.promise;
}
function getByUsername(username) {
var deferred = $q.defer();
var filtered = $filter('filter')(getUsers(), { username: username });
var user = filtered.length ? filtered[0] : null;
deferred.resolve(user);
return deferred.promise;
}
function create(user){
var deferred = $q.defer();
// simulate api call with $timeout
$timeout(function () {
getByUsername(user.username)
.then(function (duplicateUser) {
if (duplicateUser !== null) {
deferred.resolve({ success: false, message: 'Username "' + user.username + '" is already exists' });
} else {
var users = getUsers();
// assign id
var lastUser = users[users.length - 1] || { id: 0 };
user.id = lastUser.id + 1;
// save to local storage
users.push(user);
createUser(users);
deferred.resolve({ success: true });
}
});
}, 1000);
return deferred.promise;
}
function getUsers(){
if(!localStorage.users){
localStorage.users = JSON.stringify([]);
}
return JSON.parse(localStorage.users);
}
function createUser(users){
localStorage.users = JSON.stringify(users);
}
}
})();

//userService.svc.js

(function () {

'use strict';

angular.module("app")

.service("UserService" , UserService);

UserService.$inject = ['$timeout', '$filter', '$q'];

function UserService($timeout, $filter, $q){

var service = {};

service.get = get;

service.getByUsername = getByUsername;

service.create = create;

return service;

function get(){

var deferred = $q.defer();

deferred.resolve(getUsers());

return deferred.promise;

}

function getByUsername(username) {

var deferred = $q.defer();

var filtered = $filter('filter')(getUsers(), { username: username });

var user = filtered.length ? filtered[0] : null;

deferred.resolve(user);

return deferred.promise;

}

function create(user){

var deferred = $q.defer();

// simulate api call with $timeout

$timeout(function () {

getByUsername(user.username)

.then(function (duplicateUser) {

if (duplicateUser !== null) {

deferred.resolve({ success: false, message: 'Username "' + user.username + '" is already exists' });

} else {

var users = getUsers();

// assign id

var lastUser = users[users.length - 1] || { id: 0 };

user.id = lastUser.id + 1;

// save to local storage

users.push(user);

createUser(users);

deferred.resolve({ success: true });

}

});

}, 1000);

return deferred.promise;

}

function getUsers(){

if(!localStorage.users){

localStorage.users = JSON.stringify([]);

}

return JSON.parse(localStorage.users);

}

function createUser(users){

localStorage.users = JSON.stringify(users);

}

})();

Fially, we will have css(style.css) file that will hold all the styling rules for our application/ Let’s create a style.css file and put the following code in it –

style.css

.header{
text-align:center;
color:black;
font-weight:bold;
font-size:16px;
margin:0 0 25px 0;
}

.header{

text-align:center;

color:black;

font-weight:bold;

font-size:16px;

margin:0 0 25px 0;

}

Run AngularJS Application

Now start the application server and visit the application to view the output.

Registration Page :-

angularjs-user-authentication-registration-login-2

Login Page :-

angularjs-user-authentication-registration-login-3

Home Page :-

angularjs-user-authentication-registration-login-4

Simple User Login Example in AngularJS

Leave a reply

In our previous article, we have learned how to create simple user registration form In AngularJS . Once a user is registered on the website can be obtain login credentials(username and password). In this article, we will learn how to to create simple login form in AngularJS. We will create a simple login page where user input their username and password, if the user is authenticated successfully they will be redirected to a user home page. If authentication fails, the user is notified with an error message.

Project’s Directory Structure :-

angularjs-simple-login-1

AngularJS Application Layout

index.html

<!doctype html>
<html ng-app="myApp" >
<head>
<meta charset="utf-8">
<title>AngularJS Simple Login Example - W3Adda</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="app.js"></script>
<script src="loginController.js"></script>
<script src="homeController.js"></script>
<script src="loginService.js"></script>
</head>
<body>
<div class = "container" style="width:675px;text-align:center;">
<h2>AngularJS Simple Login Example - W3Adda</h2>
<div ui-view></div>
</div>
</body>
</html>

<!doctype html>

<head>

<title>AngularJS Simple Login Example - W3Adda</title>

</head>

<body>

<h2>AngularJS Simple Login Example - W3Adda</h2>

</div>

</body>

</html>

AngularJS Application

app.js

(function() {
var app = angular.module('myApp', ['ui.router']);
app.run(function($rootScope, $location, $state, LoginService) {
	console.clear();
	console.log('running');
	if(!LoginService.isAuthenticated()) {
		$state.transitionTo('login');
	}
});
app.config(['$stateProvider', '$urlRouterProvider', 
function($stateProvider, $urlRouterProvider) {
	$stateProvider
	.state('login', {
		url : '/login',
		templateUrl : 'login.html',
		controller : 'LoginController'
	})
	.state('home', {
		url : '/home',
		templateUrl : 'home.html',
		controller : 'HomeController'
	});
	$urlRouterProvider.otherwise('/login');
}]);
})();

(function() {

var app = angular.module('myApp', ['ui.router']);

app.run(function($rootScope, $location, $state, LoginService) {

console.clear();

console.log('running');

if(!LoginService.isAuthenticated()) {

$state.transitionTo('login');

}

});

app.config(['$stateProvider', '$urlRouterProvider',

function($stateProvider, $urlRouterProvider) {

$stateProvider

.state('login', {

url : '/login',

templateUrl : 'login.html',

controller : 'LoginController'

})

.state('home', {

url : '/home',

templateUrl : 'home.html',

controller : 'HomeController'

});

$urlRouterProvider.otherwise('/login');

}]);

})();

The app variable is initialized as angular module and named as “myApp”, notice that we have used ng-app directive in index.html file to bind the angular application to a container in base layout file. It is important to use the same module name to bind using ng-app directive.

AngularJS Routing

Since we are making a single page application and we don’t want any page refreshes. Here we have used Angular’s UI Routing capabilities to setup single page application.We are using ui.router module for that, notice that we have added ui.router as a part of the parameter passed to our angular module. The ui.router module provides routing, deeplinking services and directives to our angular applications. Here, we are using $urlRouteProvider in app.config to configure our application routing. As you can see in routing configuration, every route you specify have a template file and a controller attached to it.

AngularJS Template

Now, in this step we will create login and home page template files for our angularjs simple login application. Let’s create login.html and home.html files and put the following code in it respectively.

login.html

In login page, we have two input fields ( UserName and Password) with a login button.

<div class="col-md-12">
<form ng-submit="formSubmit()" class="form">
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" ng-model="username" placeholder="username" required=""/>
</div> 
<div class="form-group">
<input type="password" class="form-control" ng-model="password" placeholder="password" required=""/>
</div>
<div class="form-group">
<button type="submit" class="btn btn-info">Login</button><br>
<span class="text-danger" style="color:red">{{ error }}</span>
</div>
</div>
</form>
</div>

</div>

</div>

<button type="submit" class="btn btn-info">Login</button><br>

<span class="text-danger" style="color:red">{{ error }}</span>

</div>

</form>

</div>

home.html

Once a user is successfully logged in the home page (home.html) will be loaded. Here, we have simple welcome message along with a logout button.

<div class="col-md-12" style="width:500px;">
<div align="right"><a ui-sref="login">Logout</a></div>
<h4>Welcome {{user}}! </h4>
<p><strong>User Dashboard</strong></p>
</div>

<div align="right"><a ui-sref="login">Logout</a></div>

<h4>Welcome {{user}}! </h4>

<p><strong>User Dashboard</strong></p>

</div>

AngularJS Controller

As you can see in routing configuration, every route you specify have a controller attached to it. Angularjs controller hold the actual business logic attached with the route. In this step we will create separate controller files for login page and home page. Let’s create loginController.js and homeController.js file and put the following code in it respectively.

loginController.js

var app = angular.module('myApp');
app.controller('LoginController', function($scope, $rootScope, $stateParams, $state, LoginService) {
	$rootScope.title = "AngularJS Login Sample";
	$scope.formSubmit = function() {
		if(LoginService.login($scope.username, $scope.password)) {
			$rootScope.userName = $scope.username;
			$scope.error = '';
			$scope.username = '';
			$scope.password = '';
			$state.transitionTo('home');
		} else {
			$scope.error = "Incorrect username/password !";
		}   
	};    
});

var app = angular.module('myApp');

app.controller('LoginController', function($scope, $rootScope, $stateParams, $state, LoginService) {

$rootScope.title = "AngularJS Login Sample";

$scope.formSubmit = function() {

if(LoginService.login($scope.username, $scope.password)) {

$rootScope.userName = $scope.username;

$scope.error = '';

$scope.username = '';

$scope.password = '';

$state.transitionTo('home');

} else {

$scope.error = "Incorrect username/password !";

}

};

});

homeController.js

var app = angular.module('myApp');
app.controller('HomeController', 
function($scope, $rootScope, $stateParams, $state, LoginService) {
	$scope.user = $rootScope.userName;
});

var app = angular.module('myApp');

app.controller('HomeController',

function($scope, $rootScope, $stateParams, $state, LoginService) {

$scope.user = $rootScope.userName;

});

AngularJS Services

Here, we will create a simple authentication service that authenticate user with default login credentials. As the user enters login credentials and clicks on the login button we authenticate the user and redirect them to user home page. We store the user data in angularjs scope object and binding it to the variable. If can also authenticate user with their registered credentials in database using a webservice or API that talks to database server. For now we will be creating a simple authentication service that authenticate user with default login credentials. Let’s create a loginService.js and put the following code in it –

loginService.js

var app = angular.module('myApp');
app.factory('LoginService', function() {
	var admin = 'admin';
	var pass = 'admin';
	var isAuthenticated = false;
	return {
		login : function(username, password) {
			isAuthenticated = username === admin && password === pass;
			return isAuthenticated;
		},
		isAuthenticated : function() {
			return isAuthenticated;
		}
	};
});

var app = angular.module('myApp');

app.factory('LoginService', function() {

var admin = 'admin';

var pass = 'admin';

var isAuthenticated = false;

return {

isAuthenticated = username === admin && password === pass;

return isAuthenticated;

isAuthenticated : function() {

return isAuthenticated;

}

};

});

Run AngularJS Application

Now start the application server and visit the application to view the output.

Login Page :-

angularjs-simple-login-2

Home Page :-

angularjs-simple-login-3

Simple User Registration Form Example in AngularJS

Leave a reply

Simple User Registration Form in AngularJS

User Registration is very basic and common feature in modern web application. It is one of the basic and most important feature for a web application that is used to authenticate or restrict unauthorized access to member only areas and features in a web application. The user is required to register a account using the registration form provided on the application so the username and password is created in order to login in the application.

In this tutorial we’ll create a simple registration using AngularJS. In this tutorial, I’ll guide you through the step by step process to understand the User Registration in an AngularJS platform. This tutorial is comprised of two key components, in the first part we’ll create a user registration form, and in the second part we’ll list all the user.

Project Directory Structure :-

angularjs-simple-user-registration-form-1

Creating the Registration Form In AngularJS

In this step we’ll create a registration form that allows users to create a new account by filling out a web form. User Registration form will have Name, Email, Password and Phone as basic registration fields. Registration form will look like as following –

angularjs-simple-user-registration-form-2

Let’s create a index.html and app.js file in your project’s root directory and put the following code in it –

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>User Registraion Form - W3Adda</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="app.js"></script>
</head>
<body>
<div ng-app = "myApp" class = "container" style="width:550px">
<div style="text-align:center;">
<h3><b>User Registraion Form - W3Adda</b></h3>
</div>
<div ng-controller = "RegisterController">
<div align="right">
<a href="#" ng-click="searchUser()">{{title}}</a>
</div>
<form role = "form" class="well" ng-hide="ifSearchUser">
<div class = "form-group">
<label for = "name"> Name:  </label>
<input type = "text" id = "name" class = "form-control" placeholder = "Enter Name " ng-model = "newuser.name">
</div>
<div class = "form-group">
<label for = "email"> Email:  </label>
<input type = "email" id = "email" class = "form-control" placeholder = "Enter Email " ng-model = "newuser.email">
</div>
<div class = "form-group">
<label for = "password"> Password:  </label>
<input type = "password" id = "password" class = "form-control" placeholder = "Enter Password " ng-model = "newuser.password">
</div>
<div class = "form-group">
<label for = "phone"> Phone:  </label>
<input type = "text" id = "phone" class = "form-control" placeholder = "Enter Phone " ng-model = "newuser.phone">
</div>
<br>
<input type="hidden" ng-model="newuser.id">
<input type="button" class="btn btn-primary" ng-click="saveUser()" class="btn btn-primary" value = "Submit">
</form>
<div><h4><b>Registered Users</b></h4>
<table ng-if="users.length" class = "table table-striped table-bordered table-hover">
<thead>
<tr class = "info">
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th ng-if="!ifSearchUser">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat = "user in users">
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>{{ user.phone }}</td>
<td ng-if="!ifSearchUser">
<a href="#" ng-click="edit(user.id)" role = "button" class = "btn btn-info">edit</a> &nbsp;
<a href="#" ng-click="delete(user.id)" role = "button" class = "btn btn-danger">delete</a>
</td>
</tr>
</tbody>
</table>
<div ng-hide="users.length > 0">No Users Found</div>
</div>
</div>
</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>User Registraion Form - W3Adda</title>

</head>

<body>

<h3><b>User Registraion Form - W3Adda</b></h3>

</div>

<a href="#" ng-click="searchUser()">{{title}}</a>

</div>

</div>

<label for = "email"> Email: </label>

</div>

<label for = "password"> Password: </label>

</div>

<label for = "phone"> Phone: </label>

</div>

<br>

</form>

<div><h4><b>Registered Users</b></h4>

<thead>

<th>Email</th>

<th>Phone</th>

<th ng-if="!ifSearchUser">Action</th>

</tr>

</thead>

<tbody>

<td>{{ user.email }}</td>

<td>{{ user.phone }}</td>

<a href="#" ng-click="delete(user.id)" role = "button" class = "btn btn-danger">delete</a>

</td>

</tr>

</tbody>

</table>

<div ng-hide="users.length > 0">No Users Found</div>

</div>

</body>

</html>

On top of the the form we have a link User List to list all the registered users. Right below the form, you have a list of registered users along with Edit/Delete button.

Create AngularJS Application

In this step, we will first create a javascript file app.js in our project’s root directory and define a AngularJS application. Let’s create app.js file and put the following code in it –

app.js

var myApp = angular.module("myApp", []);

1	var myApp = angular.module("myApp", []);

AngularJS Registration Service

Now we will create a registration service that will be used add, list, edit and delete users. Let’s open app.js file and append the following code in it –

// Register Service
myApp.service("RegisterService" , function(){
var uid = 1;
var users = [{
'id' : 0,
'name' : 'John Doe',
'email' : 'johndoe@gmail.com',
'password': 'johndoe',
'phone' : '123-45-678-901'}];	

	// Save User
	this.save = function(user)  
	{
		if(user.id == null)                       
		{
			user.id = uid++;
			users.push(user);
		}
		else
		{
			for(var i in users)
			{
				if(users[i].id == user.id)
				{
					users[i] = user;
				}
			}
		}
	};

	// Search User
	this.get = function(id)
	{
		for(var i in users )
		{
		if( users[i].id == id)
		{
		return users[i];
		}
		}
	};

	// Delete User
	this.delete = function(id)
	{
	for(var i in users)
	{
	if(users[i].id == id)
	{
	users.splice(i,1);
	}
	}
	};	

	// List Users
	this.list = function()
	{
	return users;
	};	
});

// Register Service

myApp.service("RegisterService" , function(){

var uid = 1;

var users = [{

'id' : 0,

'name' : 'John Doe',

'email' : 'johndoe@gmail.com',

'password': 'johndoe',

'phone' : '123-45-678-901'}];

// Save User

this.save = function(user)

{

if(user.id == null)

{

user.id = uid++;

users.push(user);

}

else

{

for(var i in users)

{

if(users[i].id == user.id)

{

users[i] = user;

}

};

// Search User

this.get = function(id)

{

for(var i in users )

{

if( users[i].id == id)

{

return users[i];

}

};

// Delete User

this.delete = function(id)

{

for(var i in users)

{

if(users[i].id == id)

{

users.splice(i,1);

}

};

// List Users

this.list = function()

{

return users;

};

});

AngularJS Registration Controller

Now we will create a registration controller that will be bind add, list, edit and delete action to registration service. Let’s open app.js file and append the following code in it –

app.js

// Register Controller 
myApp.controller("RegisterController" , function($scope , RegisterService){
console.clear();
$scope.ifSearchUser = false;
$scope.title ="User List";
$scope.users = RegisterService.list();
$scope.saveUser = function()
{
	console.log($scope.newuser);
	if($scope.newuser == null || $scope.newuser == angular.undefined)
	return;
	RegisterService.save($scope.newuser);
	$scope.newuser = {};
};		
$scope.delete = function(id)
{
	RegisterService.delete(id);
	if($scope.newuser != angular.undefined && $scope.newuser.id == id)
	{
		$scope.newuser = {};
	}
};		
$scope.edit = function(id)
{
	$scope.newuser = angular.copy(RegisterService.get(id));
};		
$scope.searchUser = function(){
	if($scope.title == "User List"){
		$scope.ifSearchUser=true;
		$scope.title = "Back";
	}
	else
	{
		$scope.ifSearchUser = false;
		$scope.title = "User List";
	}		  
};
});

// Register Controller

myApp.controller("RegisterController" , function($scope , RegisterService){

console.clear();

$scope.ifSearchUser = false;

$scope.title ="User List";

$scope.users = RegisterService.list();

$scope.saveUser = function()

{

console.log($scope.newuser);

if($scope.newuser == null || $scope.newuser == angular.undefined)

return;

RegisterService.save($scope.newuser);

$scope.newuser = {};

};

$scope.delete = function(id)

{

RegisterService.delete(id);

if($scope.newuser != angular.undefined && $scope.newuser.id == id)

{

$scope.newuser = {};

}

};

$scope.edit = function(id)

{

$scope.newuser = angular.copy(RegisterService.get(id));

};

$scope.searchUser = function(){

if($scope.title == "User List"){

$scope.ifSearchUser=true;

$scope.title = "Back";

}

else

{

$scope.ifSearchUser = false;

$scope.title = "User List";

}

};

});

Our final app.js file will look like as following –

app.js

var myApp = angular.module("myApp", []);
// Register Service
myApp.service("RegisterService" , function(){
var uid = 1;
var users = [{
'id' : 0,
'name' : 'John Doe',
'email' : 'johndoe@gmail.com',
'password': 'johndoe',
'phone' : '123-45-678-901'}];	

	// Save User
	this.save = function(user)  
	{
		if(user.id == null)                       
		{
			user.id = uid++;
			users.push(user);
		}
		else
		{
			for(var i in users)
			{
				if(users[i].id == user.id)
				{
					users[i] = user;
				}
			}
		}
	};

	// Search User
	this.get = function(id)
	{
		for(var i in users )
		{
		if( users[i].id == id)
		{
		return users[i];
		}
		}
	};

	// Delete User
	this.delete = function(id)
	{
	for(var i in users)
	{
	if(users[i].id == id)
	{
	users.splice(i,1);
	}
	}
	};	

	// List Users
	this.list = function()
	{
	return users;
	};	
});

// Register Controller 
myApp.controller("RegisterController" , function($scope , RegisterService){
console.clear();
$scope.ifSearchUser = false;
$scope.title ="User List";
$scope.users = RegisterService.list();
$scope.saveUser = function()
{
	console.log($scope.newuser);
	if($scope.newuser == null || $scope.newuser == angular.undefined)
	return;
	RegisterService.save($scope.newuser);
	$scope.newuser = {};
};		
$scope.delete = function(id)
{
	RegisterService.delete(id);
	if($scope.newuser != angular.undefined && $scope.newuser.id == id)
	{
		$scope.newuser = {};
	}
};		
$scope.edit = function(id)
{
	$scope.newuser = angular.copy(RegisterService.get(id));
};		
$scope.searchUser = function(){
	if($scope.title == "User List"){
		$scope.ifSearchUser=true;
		$scope.title = "Back";
	}
	else
	{
		$scope.ifSearchUser = false;
		$scope.title = "User List";
	}		  
};
});

100

var myApp = angular.module("myApp", []);

// Register Service

myApp.service("RegisterService" , function(){

var uid = 1;

var users = [{

'id' : 0,

'name' : 'John Doe',

'email' : 'johndoe@gmail.com',

'password': 'johndoe',

'phone' : '123-45-678-901'}];

// Save User

this.save = function(user)

{

if(user.id == null)

{

user.id = uid++;

users.push(user);

}

else

{

for(var i in users)

{

if(users[i].id == user.id)

{

users[i] = user;

}

};

// Search User

this.get = function(id)

{

for(var i in users )

{

if( users[i].id == id)

{

return users[i];

}

};

// Delete User

this.delete = function(id)

{

for(var i in users)

{

if(users[i].id == id)

{

users.splice(i,1);

}

};

// List Users

this.list = function()

{

return users;

};

});

// Register Controller

myApp.controller("RegisterController" , function($scope , RegisterService){

console.clear();

$scope.ifSearchUser = false;

$scope.title ="User List";

$scope.users = RegisterService.list();

$scope.saveUser = function()

{

console.log($scope.newuser);

if($scope.newuser == null || $scope.newuser == angular.undefined)

return;

RegisterService.save($scope.newuser);

$scope.newuser = {};

};

$scope.delete = function(id)

{

RegisterService.delete(id);

if($scope.newuser != angular.undefined && $scope.newuser.id == id)

{

$scope.newuser = {};

}

};

$scope.edit = function(id)

{

$scope.newuser = angular.copy(RegisterService.get(id));

};

$scope.searchUser = function(){

if($scope.title == "User List"){

$scope.ifSearchUser=true;

$scope.title = "Back";

}

else

{

$scope.ifSearchUser = false;

$scope.title = "User List";

}

};

});

Run AngularJS Application

Now start the application server and visit the application to view the output.

Output:-

angularjs-simple-user-registration-form-3

What Is Single Page Application In Angularjs?

Leave a reply

What Is Single Page Application In Angularjs?

Single page application (SPA) is a web application that is contained in a single page. In a single page application all our code (JS, HTML, CSS) is loaded when application loads for the first time. Loading of the dynamic contents and the navigation between pages is done without refreshing the page. Single page application (SPA) is usually created using javascript based front-end web application framework.

What Is AngularJS?

AngularJS is one of the widely used front-end web application framework used for building Single Page Application (SPA). It extends the traditional HTML with new attributes and data-binding components that enable us to serve dynamic page content. In Our Next article, we’ll learn how to build a Single Page Application (SPA) using AngularJS Routing and AngularJS Template.

What Are Single Page Application Advantages (Pros)

Building any application as single page application will comes with significant number of benefits. In this article, we will talk about some of the key single page application advantages listed as below –

Improved User Experience :- Single page application bring a much-improved experience to the user.

No Page Refresh :- In a Single Page Application, there is no need to refresh the whole page for every request, all our code (JS, HTML, CSS) is loaded when application loads for the first time. Loading of the dynamic contents and the navigation between pages is done without refreshing the page.

Faster and Responsive :- Single Page Applications are faster because they require less bandwidth, and no full page refreshes when user navigates through the application.

Caching capabilities :- Single Page Applications comes with caching capabilities which allows it to cache any local data effectively. Single Page Application sends single request to server and then stores all the data it receives locally. Which it can use it and work even offline.

What Are Single Page Application Disadvantages (Cons)

While building single page application will comes with significant number of benefits. It also has some disadvantages that must be considered while building a single page application –

Javascript Must Be Enabled :- Single Page Application requires javascript to enabled. Fortunately, almost everyone has javascript enabled.

Initial load is slow :- All our code (JS, HTML, CSS) is loaded when application loads for the first time which cause it slow initially.

Complex to build :- You must have understanding of single page application architecture and front end technologies. It also requires you to have pretty much javascript knowledge for building single page applications.

Search Engine Optimization(SEO) :- Single Page Applications are not considered as much seo friendly. Fortunately, Google and Bing started indexing Single Page Applications.

Single Page Application (SPA) Architecture

Single Page Application with AngularJS Routing and Templating

Leave a reply

Single Page Application with AngularJS Routing and Templating

AngularJS is a javascript based front-end web application framework, it is widely used for building Single Page Application (SPA). It extends the traditional HTML with new attributes and data-binding components that enable us to serve dynamic page content. In this article, we’ll learn how to build a Single Page Application (SPA) using AngularJS Routing and AngularJS Template.

How to Create Single Page Application Using AngularJS

Leave a reply

Create Single Page Application Using AngularJS

AngularJS is an open source front-end web application framework based on javascript, it is widely used for building Single Page Application (SPA). It extends the traditional HTML with new attributes and data-binding components that enable us to serve dynamic page content. In this article, we’ll learn how to build a Single Page Application (SPA) using AngularJS and AngularJS Route library.

What Is Single Page Application?

AngularJS Single page application (SPA) is a web application that is contained in a single page. In a single page application all our code (JS, HTML, CSS) is loaded when application loads for the first time. Loading of the dynamic contents and the navigation between pages is done without refreshing the page.

Step 1:- This is the simple part. Here we will create a simple index.html file and add a simple layout with a navigation bar. We will also load angular and angular route library via CDN.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>
        Angular Routing
    </title>
</head> 
<style>
    #nav{
        width: 19%;
        display: inline-block;
        background: #429cd6;
        border: 1px solid #3c87b2;

    }
    #page-content{
        width: 79%;
        display: inline-block;
        vertical-align: top;
        padding: 8px;
        padding-top: 0px;
    }
    ul{
        list-style: none;
        padding-right: 10px;
    }
    li{
        background-color: #ffffff;
        color: white;
        margin: 5px;
        text-decoration: none;
        text-align: center;
        padding: 3px;
        font-size: 20px;
        font-family: 'Helvetica', sans-serif;
    }
    a{
        color: black;
        text-decoration: none;
    }
</style>
<!-- Load AngularJS and Angular Route JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>

<body ng-app="myApp">

<!-- AngularJS Navigation -->    
<div id="nav">
    <ul>
        <li><a href="#!">Home</a></li>
        <li><a href="#!about">About</a></li>
        <li><a href="#!services">Services</a></li>
        <li><a href="#!projects">Projects</a></li>
    </ul>
</div>
<div id="page-content">
    <h1>AngularJS Single Page Application - W3Adda</h1>

    <!-- this is where page content will be loaded -->
    <div ng-view></div>
</div>
<!-- Load AngularJS Module and Angular Route Configuration -->
<script type="text/javascript" src="script.js"></script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>

Angular Routing

</title>

</head>

<style>

#nav{

width: 19%;

display: inline-block;

background: #429cd6;

border: 1px solid #3c87b2;

}

#page-content{

width: 79%;

display: inline-block;

vertical-align: top;

padding: 8px;

padding-top: 0px;

}

ul{

list-style: none;

padding-right: 10px;

}

li{

background-color: #ffffff;

color: white;

margin: 5px;

text-decoration: none;

text-align: center;

padding: 3px;

font-size: 20px;

font-family: 'Helvetica', sans-serif;

}

color: black;

text-decoration: none;

}

</style>

<ul>

<li><a href="#!about">About</a></li>

<li><a href="#!services">Services</a></li>

<li><a href="#!projects">Projects</a></li>

</ul>

</div>

<h1>AngularJS Single Page Application - W3Adda</h1>

</div>

</body>

</html>

Step 2:-

Angular Application

script.js

// create the module and name it myApp
var app = angular.module("myApp", ['ngRoute']);

1 2	// create the module and name it myApp var app = angular.module("myApp", ['ngRoute']);

The app variable is initialized as angular module and named as “myApp”, the ng-app directive is used to bind the angular application to a container. It is important to use the same module name to bind using ng-app directive.

Step 3:-

Configure Routes

Since we are making a single page application and we don’t want any page refreshes. Here we’ll use Angular’s routing capabilities to setup single page application.We will use ngRoute module for that. Notice that we have added ngRoute as a part of the parameter passed to our angular module. The ngRoute module provides routing, deeplinking services and directives to our angular applications. We will be using $routeProvider in app.config to configure our application routing. Let’s open our script.js file and put the following in it –

script.js

// create the module and name it scotchApp
var app = angular.module("myApp", ['ngRoute']);

// configure routes
app.config(function($routeProvider){
    $routeProvider
    .when("/", {template:"<p>AngularJS Single Page Application(SPA).</p>"})
    .when("/about", {templateUrl : "about.html"})
    .when("/services", {templateUrl : "services.html"})
    .when("/projects", {templateUrl : "projects.html"})
    });

// create the module and name it scotchApp

var app = angular.module("myApp", ['ngRoute']);

// configure routes

app.config(function($routeProvider){

$routeProvider

.when("/", {template:"<p>AngularJS Single Page Application(SPA).</p>"})

.when("/about", {templateUrl : "about.html"})

.when("/services", {templateUrl : "services.html"})

.when("/projects", {templateUrl : "projects.html"})

});

Now we have defined our routes with $routeProvider. As you can see by the configuration, you can specify the route, the template file to use, and even a controller.

AngularJS Template

Writing HTML code inside template is very constraining and to counter it one can use templateURL and instead of writing HTML code directly we specify the HTML file that will be injected corresponding to route. Now, we just need to define the page templates that will be injected.

about.html

<!-- about.html -->
<h2>About</h2>
<p>About Page Contents</p>

<h2>About</h2>

<p>About Page Contents</p>

services.html

<!-- services.html -->
<h2>Services</h2>
<p>Service Page Contents</p>

<h2>Services</h2>

<p>Service Page Contents</p>

projects.html

<!-- projects.html -->
<h2>Projects</h2>
<p>Project Page Contents</p>

<h2>Projects</h2>

<p>Project Page Contents</p>

AngularJS View

To finish off with this tutorial, we need to specify the container where content of each page will be loaded in our layout. In AngularJS, there is a ng-view directive that will injects the template file of the current route (/about , /services or /projects) in the main layout file. Notice that we have added ng-view directive in main (index.html) layout file.

<div id="page-content">
    <h1>AngularJS Single Page Application - W3Adda</h1>

    <!-- this is where page content will be loaded -->
    <div ng-view></div>
</div>

<h1>AngularJS Single Page Application - W3Adda</h1>

</div>

Now, start the server and visit the project. You will see following screen as output –

Output:-

angularjs-single-page-application-1

About Page:-

angularjs-single-page-application-2

Services Page :-

angularjs-single-page-application-3

Projects Page :-

angularjs-single-page-application-4

AngularJS CRUD With Php MySql REST API or Webservice Example

Leave a reply

AngularJS CRUD With Php MySql REST API or Webservice

In this AngularJS CRUD with Php/MySql tutorial, I’ll show you how to create a simple AngularJS CRUD application with PHP/MySql REST API or Webservice . In this step by step tutorial, we will be creating a simple AngularJS SPA blog application with PHP/MySql restful API. In this article, you will learn how to create fully functional CRUD (Create, Read, Update and Delete) REST API using PHP/MySql and integrate it with AngularJS Single Page Application. So, you have to just follow this step by step angularJS crud application tutorial to create a fully functional angularjs blog application.

Projects Directory Structure :-

angularjs-crud-php-mysql-rest-api-webservices-1

Create Database Table and Configuration File

Step 1:- Create DB and Posts Table

In this step we will create a database and posts table in it. I have created a database with name “crudone” and created a “posts” table inside in it. So you also need to create a database with name of your choice and put “posts” table in it. You can create “posts” table using the mysql query given as following –

CREATE TABLE `posts` (
  `id` int(10) UNSIGNED NOT NULL,
  `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `description` text COLLATE utf8_unicode_ci NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

CREATE TABLE `posts` (

`id` int(10) UNSIGNED NOT NULL,

`title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,

`description` text COLLATE utf8_unicode_ci NOT NULL,

`created_at` timestamp NULL DEFAULT NULL,

`updated_at` timestamp NULL DEFAULT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Step 2:- Create DB Config file

Now, we will create a database configuration file to hold database credentials and database connection. Let’s create db_config.php file in your project root directory and put the following code in it –

db_config.php

<?php
define ('DB_USER', "root");
define ('DB_PASSWORD', "");
define ('DB_DATABASE', "crudone");
define ('DB_HOST', "localhost");
$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);
?>

<?php

define ('DB_USER', "root");

define ('DB_PASSWORD', "");

define ('DB_DATABASE', "crudone");

define ('DB_HOST', "localhost");

$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);

Step 3:- Create index.php file

Next, we will create index.php file in project root directory and put the following code in it –

index.php

<html lang="en">

<head>
	<title>AngularJS Simple CRUD Application - W3Adda</title>

	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
	<!-- Angular JS -->
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-route.min.js"></script>

	<!-- My App -->
	<script src="app/routes.js"></script>
	<script src="app/helper/myHelper.js"></script>

	<!-- App Controller -->
	<script src="app/controllers/PostController.js"></script>

</head>

<body ng-app="main-App">

	<div class="container">
		<ng-view></ng-view>
	</div>
</body>
</html>

<head>

<title>AngularJS Simple CRUD Application - W3Adda</title>

</head>

<ng-view></ng-view>

</div>

</body>

</html>

Create PHP/MySql CRUD REST API

Now, after creating database and posts table in it we are ready to implement Restful CRUD (Create, Read, Update and Delete) API. We will create a separate api directory in our project folder to keep all API files in it like as below.

angularjs-crud-php-mysql-rest-api-webservices-2

now we will be creating separate files for each of the individual CRUD operation and put the given code accordingly.

api/add.php

This file holds the logic to add blog posts into the database.

<?php
	require '../db_config.php';
	$post = file_get_contents('php://input');
	$post = json_decode($post);

	$sql = "INSERT INTO posts (title,description) VALUES ('".$post->title."','".$post->description."')";
	$result = $mysqli->query($sql);

	$sql = "SELECT * FROM posts Order by id desc LIMIT 1"; 
	$result = $mysqli->query($sql);
	$data = $result->fetch_assoc();
	
	echo json_encode($data);
?>

<?php

require '../db_config.php';

$post = file_get_contents('php://input');

$post = json_decode($post);

$sql = "INSERT INTO posts (title,description) VALUES ('".$post->title."','".$post->description."')";

$result = $mysqli->query($sql);

$sql = "SELECT * FROM posts Order by id desc LIMIT 1";

$result = $mysqli->query($sql);

$data = $result->fetch_assoc();

echo json_encode($data);

api/edit.php

This file holds the logic to fetch and return a single blog post with given id for editing.

<?php
	require '../db_config.php';
	$id  = $_GET["id"];

	$sql = "SELECT * FROM posts WHERE id = '".$id."'"; 
	$result = $mysqli->query($sql);
	$data = $result->fetch_assoc();
	
	echo json_encode($data);
?>

<?php

require '../db_config.php';

$id = $_GET["id"];

$sql = "SELECT * FROM posts WHERE id = '".$id."'";

$result = $mysqli->query($sql);

$data = $result->fetch_assoc();

echo json_encode($data);

api/update.php

This file holds the logic to update blog posts with given id into the database.

<?php
require '../db_config.php';

$id  = $_GET["id"];

$post = file_get_contents('php://input');
$post = json_decode($post);
$sql = "UPDATE posts SET title = '".$post->title."', description = '".$post->description."' WHERE id = '".$id."'";
$result = $mysqli->query($sql);

$sql = "SELECT * FROM posts WHERE id = '".$id."'"; 
$result = $mysqli->query($sql);
$data = $result->fetch_assoc();

echo json_encode($data);
?>

<?php

require '../db_config.php';

$id = $_GET["id"];

$post = file_get_contents('php://input');

$post = json_decode($post);

$sql = "UPDATE posts SET title = '".$post->title."', description = '".$post->description."' WHERE id = '".$id."'";

$result = $mysqli->query($sql);

$sql = "SELECT * FROM posts WHERE id = '".$id."'";

$result = $mysqli->query($sql);

$data = $result->fetch_assoc();

echo json_encode($data);

api/getData.php

This file holds the logic to fetch and return all blog posts from the database.

<?php
require '../db_config.php';

$sql = "SELECT * FROM posts"; 
$result = $mysqli->query($sql);

while($row = $result->fetch_assoc()){
     $json[] = $row;
}

$data['data'] = $json;
$result =  mysqli_query($mysqli,$sql);
echo json_encode($data);
?>

<?php

require '../db_config.php';

$sql = "SELECT * FROM posts";

$result = $mysqli->query($sql);

while($row = $result->fetch_assoc()){

$json[] = $row;

}

$data['data'] = $json;

$result = mysqli_query($mysqli,$sql);

echo json_encode($data);

api/delete.php

This file holds the logic to delete a single blog post from the database.

<?php
require '../db_config.php';
$id  = $_GET["id"];
$sql = "DELETE FROM posts WHERE id = '".$id."'";
$result = $mysqli->query($sql);

echo json_encode([$id]);
?>

<?php

require '../db_config.php';

$id = $_GET["id"];

$sql = "DELETE FROM posts WHERE id = '".$id."'";

$result = $mysqli->query($sql);

echo json_encode([$id]);

Create AngularJS CRUD Appilication

Now, after done with all the backend Rest Api we are ready to create frontend AngularJS CRUD application. We will creating a separate app directory in our project’s root directory to keep all AngularJS files in it like as below.

angularjs-crud-php-mysql-rest-api-webservices-3

Create AngularJS Routing File

So first we will create a routes.js file inside app folder to hold all of the application routing logic. Let’s create routes.js file and put bellow code in it.

app/routes.js

var app =  angular.module('main-App',['ngRoute']);
app.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
	        when('/', {
	            templateUrl: 'templates/posts.html',
	            controller: 'PostController'
	        });
}]);

var app = angular.module('main-App',['ngRoute']);

app.config(['$routeProvider',

function($routeProvider) {

$routeProvider.

when('/', {

templateUrl: 'templates/posts.html',

controller: 'PostController'

});

}]);

Create AngularJS Controller File

Now we will create a AngularJS controller file “app/controller/PostController.js” to hold CRUD Operation logic. We will create a separate controller directory in app folder and create PostController.js file in it and put the following code in it.

app/controller/PostController.js

var URL = "http://localhost/w3adda-angularjs/angularjs-simple-crud";
app.controller('PostController', function($scope,$http){
 
  $scope.data = [];

  getResultsPage();

  function getResultsPage() {
    $http({
      url: URL + '/api/getData.php',
      method: 'GET'
    }).then(function(res){
      $scope.data = res.data.data;
    });
  }

  $scope.saveAdd = function(){
    $http({
      url: URL + '/api/add.php',
      method: 'POST',
      data: $scope.form
    }).then(function(data){
      $scope.data.push(data.data);
      $(".modal").modal("hide");
    });
  }

  $scope.edit = function(id){
    $http({
      url: URL + '/api/edit.php?id='+id,
      method: 'GET'
    }).then(function(data){
      $scope.form = data.data;
    });
  }

  $scope.saveEdit = function(){
    $http({
      url: URL + '/api/update.php?id='+$scope.form.id,
      method: 'POST',
      data: $scope.form
    }).then(function(data){
      $(".modal").modal("hide");
        $scope.data = apiModifyTable($scope.data,data.data.id,data.data);
    });
  }

  $scope.remove = function(post,index){
    var result = confirm("Are you sure delete this post?");
   	if (result) {
      $http({
        url: URL + '/api/delete.php?id='+post.id,
        method: 'DELETE'
      }).then(function(data){
        $scope.data.splice(index,1);
      });
    }
  }
   
});

var URL = "http://localhost/w3adda-angularjs/angularjs-simple-crud";

app.controller('PostController', function($scope,$http){

$scope.data = [];

getResultsPage();

function getResultsPage() {

$http({

url: URL + '/api/getData.php',

method: 'GET'

}).then(function(res){

$scope.data = res.data.data;

});

}

$scope.saveAdd = function(){

$http({

url: URL + '/api/add.php',

method: 'POST',

data: $scope.form

}).then(function(data){

$scope.data.push(data.data);

$(".modal").modal("hide");

});

}

$scope.edit = function(id){

$http({

url: URL + '/api/edit.php?id='+id,

method: 'GET'

}).then(function(data){

$scope.form = data.data;

});

}

$scope.saveEdit = function(){

$http({

url: URL + '/api/update.php?id='+$scope.form.id,

method: 'POST',

data: $scope.form

}).then(function(data){

$(".modal").modal("hide");

$scope.data = apiModifyTable($scope.data,data.data.id,data.data);

});

}

$scope.remove = function(post,index){

var result = confirm("Are you sure delete this post?");

if (result) {

$http({

url: URL + '/api/delete.php?id='+post.id,

method: 'DELETE'

}).then(function(data){

$scope.data.splice(index,1);

});

}

});

Create AngularJS Helper File

Now we will create a AngularJS Helper file “app/helper/myHelper.js“ to hold all helper function . We will create a separate helper directory in app folder to hold all helper functions in it. Let’s create myHelper.js file in “app/helper/” directory and put the following code in it.

app/helper/myHelper.js

function apiModifyTable(originalData,id,response){
    angular.forEach(originalData, function (item,key) {
        if(item.id == id){
            originalData[key] = response;
        }
    });
    return originalData;
}

function apiModifyTable(originalData,id,response){

angular.forEach(originalData, function (item,key) {

if(item.id == id){

originalData[key] = response;

}

});

return originalData;

}

Create AngularJS Template File

Finally we will create a template file. In AngularJS when we visit any angularjs route then it will output using one of the angularjs template file. We will create a separate template directory in app folder to hold all the project template files in it. Here we will create posts.html file in it and put the code given below for all the CRUD Operations.

templates/posts.html

<div class="row">
    <div class="col-lg-12 margin-tb">
        <div class="pull-left">
            <h1 style="color:#3276B1"><strong>AngularJS Simple CRUD Application - W3Adda</h1>
        </div>
        <div class="pull-right" style="padding-top:30px">
            <button class="btn btn-success" data-toggle="modal" data-target="#create-user">Add New</button>
        </div>
    </div>
</div>


<table class="table table-bordered pagin-table">
    <thead>
        <tr>
            <th>No</th>
            <th>Title</th>
            <th>Description</th>
            <th width="220px">Action</th>
        </tr>
    </thead>
    <tbody>
            <tr ng-repeat="value in data">
            <td>{{ $index + 1 }}</td>
            <td>{{ value.title }}</td>
            <td>{{ value.description }}</td>
            <td>
            <button data-toggle="modal" ng-click="edit(value.id)" data-target="#edit-data" class="btn btn-primary">Edit</button>
            <button ng-click="remove(value,$index)" class="btn btn-danger">Delete</button>
            </td>
        </tr>
    </tbody>
</table>

<!-- Create Modal -->
<div class="modal fade" id="create-user" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form method="POST" name="addItem" role="form" ng-submit="saveAdd()">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Add Post</h4>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div>
                            <strong>Title : </strong>
                            <div class="form-group">
                                <input ng-model="form.title" type="text" placeholder="Name" name="title" class="form-control" required />
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div>
                            <strong>Description : </strong>
                            <div class="form-group" >
                                <textarea ng-model="form.description" class="form-control" required>
                                </textarea>
                            </div>
                        </div>
                    </div>
                    <div class="text-right">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" ng-disabled="addItem.$invalid" class="btn btn-primary">Submit</button>
                    </div>
                    
                </div>
            </div>
            </form>
        </div>
    </div>
</div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="edit-data" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form method="POST" name="editItem" role="form" ng-submit="saveEdit()">
                <input ng-model="form.id" type="hidden" placeholder="Name" name="name" class="form-control" />
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Edit Post</h4>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div>
                            <strong>Title : </strong>
                            <div class="form-group">
                               <input ng-model="form.title" type="text" placeholder="Name" name="title" class="form-control" required />
                            </div>
                        </div>
                        
                    </div>
                    <div class="row">
                        <div>
                            <strong>Description : </strong>
                            <div class="form-group">
                               <textarea ng-model="form.description" class="form-control" required>
                                </textarea>
                            </div>
                        </div>
                    </div>
                    <div class="text-right">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" ng-disabled="editItem.$invalid" class="btn btn-primary create-crud">Submit</button>
                    </div>
                    
                </div>
            </div>
            </form>
        </div>
    </div>
</div>
</div>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

<h1 style="color:#3276B1"><strong>AngularJS Simple CRUD Application - W3Adda</h1>

</div>

</div>

<thead>

<tr>

<th>Title</th>

<th>Description</th>

<th width="220px">Action</th>

</tr>

</thead>

<tbody>

<td>{{ $index + 1 }}</td>

<td>{{ value.title }}</td>

<td>{{ value.description }}</td>

<td>

<button ng-click="remove(value,$index)" class="btn btn-danger">Delete</button>

</td>

</tr>

</tbody>

</table>

</div>

<div>

<strong>Title : </strong>

</div>

<div>

<strong>Description : </strong>

</textarea>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

<button type="submit" ng-disabled="addItem.$invalid" class="btn btn-primary">Submit</button>

</div>

</form>

</div>

</div>

<div>

<strong>Title : </strong>

</div>

<div>

<strong>Description : </strong>

</textarea>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

<button type="submit" ng-disabled="editItem.$invalid" class="btn btn-primary create-crud">Submit</button>

</div>

</form>

</div>

Start Application

Lets start the application and visit it to see following output –

Output :-

angularjs-crud-php-mysql-rest-api-webservices-4

Create Post –

angularjs-crud-php-mysql-rest-api-webservices-5

List Posts –

angularjs-crud-php-mysql-rest-api-webservices-6

Edit Post –

angularjs-crud-php-mysql-rest-api-webservices-7

Update Post –

angularjs-crud-php-mysql-rest-api-webservices-8

Delete Post –

angularjs-crud-php-mysql-rest-api-webservices-9