Purpose: Build a shopping list web app working with AngularJS, MySQL and Bootstrap. See the here. Download the project .
I am quickly trying to learn AngularJS for an upcoming project and I
wanted to work with the framework to create something I can learn
with. I chose to make a very quick and easy shopping list web app for
my family to use building off . This way we can all share in the creation of a shopping list no matter where we are or who ends up at the store.
Yes, there are many 3rd party apps and services that provide this
same functionality, but none of those allow for me to learn Angular or
offer the speed and convenience as this.
I wont go into heavy details here as there are many AngularJS
tutorials on the web to get the basic info for creating the general
structure of an Angular app (such
as ng-app=”myApp”, ng-controller=”MyController”). Lets just jump right
into the mix.
First, lets create the MySQL table. The sql file for this is located
in the download link above. Use that to setup your tables.
For this tutorial I am first going to go through all the HTML and
template pages then circle back to show the app.js controller potion and
PHP that ties it all together. Hopefully that makes things a little
clearer rather than jumping between.
Looking at the index.html file there are few things to note:
class="navbar-header navbar-brand">class="fa fa-check-square-o"> Shopping List
class="pull-right">
Clear Completed Items
class="container">
class="row">
class="col-lg-12 col-sm-12">
ng-includesrc="'templates/shop.html'">
Notice we are using ng-includesrc="'templates/shop.html'" to
include a separate html file that contains the majority of our Angular
items. The actual index.html is rather straight forward so wont I spend
time on this. Don’t forget to declare your app ng-app="shopApp"> and controller ng-controller="shopController"> here and also include the Angular library as well as the path to your app.js file.
1
2
Now lets take a look at our templates/shop.html that we use to display out items.
1
2
3
4
5
6
7
8
9
10
11
12
class="form-actions">
class="input-group">
type="text"class="form-control"ng-model="itemInput"placeholder="Add New Item"autofocusrequired />
class="input-group-btn">
class="fa fa-plus"> Add Item
First we have our form to add a new item to our list. This is a
standard web form but we use some Angular directives to bind and trigger
our insert statement. Using ng-model="itemInput" we can capture the data being typed in our input field and pass it to the click function in ng-click="addItem(itemInput); itemInput = null" that will eventually be inserted into our MySQL table using the addItem() function (more later on this).
To filter our results once they are loaded into the page we create another text input.
Notice we are using the ng-repeat directive for ng-repeat="item in items | filter : filterItem"
to show each item in the items data set. ng-repeat is a very powerful
directive in Angular and is the heart of this particular web app. Here
we also tie in our filterItem field so we can filter the results.
For the input we are setting the value to the status value from the
data table using {{item.STATUS}} and when the item status is ==2 we set
the input state as checked. To trigger this we use ng-click="changeStatus(item.ID,item.STATUS,item.ITEM) to
update the entry in MySQL with the changeStatus() function found in our
controller (more on that in a bit). We then output our results in a
with {{item.ITEM}} using ng-class="{strike:item.STATUS==2}" to
set the CSS for a strike-thru as well as format the date field
with [{{item.CREATED_AT | date:”MMM d”}}]. Last we have a delete
function in place to remove items as needed calling on another function
in our controller via ng-click="deleteItem(item.ID)"
OK, on to our controller found in app.js
//Define an angular module for our app
var app = angular.module('shopApp', []);
app.controller('shopController', function($scope, $http) {
First we define our app ‘shopApp’ and our controller to use
‘shopController’. Remember these are linking the asscoatiated areas
found within index.html using ng-app="shopApp"> and ng-controller="shopController">
Now we enter our functions to make our various MySQL requests for creating, reading, updating and deleting our items (CRUD).
getItem(); // Load all available items
function getItem(){
$http.post("ajax/getItem.php").success(function(data){
$scope.items = data;
});
};
$scope.addItem = function (item) {
$http.post("ajax/addItem.php?item="+item).success(function(data){
getItem();
$scope.itemInput = "";
});
};
$scope.deleteItem = function (item) {
if(confirm("Are you sure to delete this item?")){
$http.post("ajax/deleteItem.php?itemID="+item).success(function(data){
getItem();
});
}
};
$scope.clearItem = function () {
if(confirm("Delete all checked items?")){
$http.post("ajax/clearItem.php").success(function(data){
getItem();
});
}
};
$scope.changeStatus = function(item, status, task) {
if(status=='2'){status='0';}else{status='2';}
$http.post("ajax/updateItem.php?itemID="+item+"&status="+status).success(function(data){
getItem();
});
};
The remaining functions are all very similar once you understand the
basic concepts. By using $_GET within PHP we can pass the data into the
MySQL query to get what we need. By looking at addItem() we can see
how this is done. We call this function using ng-click="addItem(itemInput)" where the itemInput is from our input field.
Again we are saying $_GET[‘item’] from our form and set it as the $item variable to be inserted in the item column.
The only function that is slightly different is our toggleStatus()
function. This triggers the item to be complete or not, by updating the
status from 0 to 2.
As you can see Angular provides some pretty cool feature that help
HTML become what it should have been when it was first released.
Granted we had no idea back then what we would be doing with it now.
This proved a great way for me to learn some of the basic features of
this framework and looking forward to doing more with it. Let me know
how you might improve this in the comments below.
