Single Page Application Login Example AngularJS

Single Page Application Login Example AngularJs – Login and Registration demo for Single Page Application Login Example AngularJS. User authentication in AngularJS, PHP, MySQL with seesion concept.

Single Page Application Login Example AngularJS

AngularJS modern JavaScript framework from Google commonly used to work with Single Page Applications (SPAs). AngularJS is open sourced under MIT license, and the development progress of AngularJS can be followed on its GitHub repository. The library is called Angular because HTML uses angular-shaped brackets.

We will create RESTful web service using PHPSlim framework as data provider. The data from the ReSTful service will be used to enable user authentication in our AngularJS application.

Single Page Application Login Example AngularJS

Demo

Just change the Config.php file only.

<?php
define(‘DB_USERNAME’, ‘root’);
define(‘DB_PASSWORD’, ”);
define(‘DB_HOST’, ‘localhost’);
define(‘DB_NAME’, ‘angularcode_auth’);
?>

<?php

define(‘DB_USERNAME’, ‘root’);

define(‘DB_PASSWORD’, ”);

define(‘DB_HOST’, ‘localhost’);

define(‘DB_NAME’, ‘angularcode_auth’);

Then import the angularcode_auth.sql file into our MySQL database.

CREATE TABLE IF NOT EXISTS `customers` (
`uid` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(50) NOT NULL,
`email` varchar(50) NOT NULL,
`phone` varchar(100) NOT NULL,
`password` varchar(200) NOT NULL,
`address` varchar(50) NOT NULL,
`city` varchar(50) NOT NULL,
`created` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`uid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=187 ;

CREATE TABLE IF NOT EXISTS `customers` (

`uid` int(11) NOT NULL AUTO_INCREMENT,

`name` varchar(50) NOT NULL,

`email` varchar(50) NOT NULL,

`phone` varchar(100) NOT NULL,

`password` varchar(200) NOT NULL,

`address` varchar(50) NOT NULL,

`city` varchar(50) NOT NULL,

`created` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,

PRIMARY KEY (`uid`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=187 ;

AngularJS Login Example 135.52 KB

Download

AngularJS Directives

Directives one of the most powerful part of the AngularJS framework. Using these we can create or extend the html elements.We can extensively use these AngularJS directives to create templates, to validate forms, etc.
In AngularJS, it is always recommended to manipulate the DOM using directives only.

AngularJS Model

Data Binding. The {{ firstName }} expression, in the example above, is an AngularJS data binding expression. Data binding in AngularJS binds AngularJS expressions with AngularJS data. {{ firstName }} is bound with ng-model=”firstName” .

AngularJS Repeat

Definition and Usage. The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Just check here AngularJS Update