Multiple filters with ngRepeat in AngularJS

In this article with will learn how to use multiple filters with ngRepeat in AngularJS. Our example will focus on filtering the data produced from ng-repeat by using multiple filters.

Let’s suppose we have the following data in JSON.

Now printing the data with ng-repeat in HTML part of code.

Adding multiple filters with ng-repeat. Modify the above HTML code as follows.

At this point, we have added two (multipe) filters with ng-repeat. For example, if user types “to” in the name field and “is” in district field, then this will act like AND condition as selecting those records in which name inlucdes “to” and district includes “is”.

This is how easily we have added multiple filters with ngRepeat.

Read More

AngularJS Custom Directives – Basics

One of the many good features of AngularJS is that you can create your own directives, the custom directives.

Types of Custom Directives in AngularJS

You can create four types of custom directives in AngularJS.

  1. Element directive
  2. Attribute directive
  3. Class directive
  4. Comment directive

Examples:

Element directive, <player></player>

Attribute directive, <span player></span>

Class directive, <span class=”player”></span>

Comment directive, <!– directive:player –>

Creating a Basic Custom Directive

This is how we can register our directive

  1. What we have done is simply registered an Element type directive with its name as the player. Whenever any HTML element ‘player’ is found in our AngularJS application, this custom directive ‘player’ will come into play.
  2. If you want to register the directive as Attribute type, simply replace ‘E’ by ‘A’ in the above code.
  3. And if you want to use both types for this directive, use ‘EA’ instead.
  4. The value of directive.template is what will be shown on the webpage.

Lets’ use this directive. As we have registered this custom directive as element type so we only need to use HTML player tag.

Wherever this tag is placed, it will display “This is my custom directive” and if it was an attribute type directive, then we had to do following

Right now template.directive is simple by having only a sentence. What if we have to display relatively longer part of a template containing HTML? The answer is simple, we will use directive.templatURL instead and will give it the path of that file.

Now AngularJS will load the directive-template.html file.

Still there is a lot more about custom directives which will be discussed in coming articles. This is enough for now to understand the basics of AngularJS custom directives.

Read More

CRUD using AngularJS with Slim framework

In the previous article about AngularJS with Slim framework, we did example of how to use AngularJS as frontend framework while Slim framework for backend, but the example was limited to insert into and retrieve data from database. Lets complete CRUD in this article but adding Delete and Edit functionality on the page which is showing the records of database. It will all be done on show_users.html page without any reload. Follow the previous article (AngularJS with Slim framework) to understand the previous code as we are going to modify those files.

Replace the previous code of show_users.html with the following one

Output

show_users2

Delete User

Delete user button have ng-click=”deleteUser(r.id, $index)”, where r.id is the is of user which we want to delete and $index is the row number of table. We are passing $index to this function so that after delete operation we want to hide this row of table displaying the deleted record. Now we have to create deleteUser function in showUserCtrl.

Upon successful process, we set true the hideRow[index] so that the row on page disappears. We need to make a procedure on index.php file which will be responsible to delete record from database table.

Edit User Form

The Edit button has ng-click=”getUser(r.id)” because we want retrieve the data of this specific user from database to be edited. Below the table on show_users.html file is the form which is hidden initially, but after hitting the edit button it becomes visible with populated fields. getUser function in the showUserCtrl is

showEditForm is set to true so that edit form on the show_user.html page becomes visible and data is populated into it.

getuser procedure in index.php is as follows

When the form is submitted, controller comes to editUser function of showUserCtrl

The procedure edituser is responsible for updating data of that specific user.

After update process the form is hidden again and success message is displayed. This article now wraps up CRUD using AngularJS with Slim framework as a single page application.

Full Source Code

Full source code CRUD using AngularJS with Slim framework is available at GitHub as well.

CRUD using AngularJS with Slim framework at GitHub

 

 

 

 

 

Read More

AngularJS with Slim Framework

We are going to use AngularJS with Slim framework now, along with Illuminate database. In the previous two articles(AngularJS Routing Example, AngularJS Form Submit with ngSubmit ) we used AngularJS only and ended up with submitting data from from to controller. In this article we will proceed to next step of inserting that data into database. Lets install Slim PHP framework for creating API. Furthermore, we are going to use illuminate database which is used by Laravel PHP framework as well.

Install Slim Framework

Create a composer.json file in the root folder of your application. composer.json should be as follows:

Open command line, change the current directory to root directory of your app and run following command

composer install

After installation of Slim and Illuminate, create index.php file in root folder and test if it is working fine. Copy following code into index.php

 

We can now access this by localhost/your_root_folder_name/index.php/testing

This will call test() function and what ever is written in that single echo statement should be displayed.

$app->get(‘/testing’, ‘test’); means that by visiting this URL, test function will be called, therefore we defined function test.

We are now ready to move forward and create database connectivity. Create a new file db.php and copy this code.

Change settings according to yours database and connection is ready.

Creating Model

We are now going to create a User model.

Create a models directory and then within models directory, create a new file user.php

After creating a model, we need to update our composer.json file, because we are not able to use instance of user model yet.

Update composer.json

Now run the command (composer update) from root folder where composer.json is located. After this we are able to create and use instance of user model.

Inserting form data into database table

Lets continue from the previous article which ended up at receiving data at AngularJS controller from HTML form. We are now using API call for posting this data from where it will be saved into database table.

Update the controller (addUserCtrl) as follows:

  1. We added $http as the 2nd argument of function.
  2. Then we used $http.post for posting our userdata that we received from form. Data is submitted to index.php/adduser.
  3. After successful execution, we are going to empty the form fields and setting $scope.msg_submitted with a message which will be displayed below the form.  Just add {{msg_submitted}} in add_user.html template where you want to display this message.

We have to create this /adduser in our index.php file which we created after installing slim framework. We are adding $app->post(‘/adduser’, ‘addUser’); which means we are also going to create addUser function. Updated index.php file should be as follows:

Note: Before working on index.php, add this statement in user model 

protected $fillable = array(‘username’,’fullname’); . username and fullname are the fields of database table. If we don’t add this statement, we will not be able to insert data by using create.

  1. /adduser is receiving data in the form of json, we have to decode it and 2nd argument (true) in json_decode function is used for converting received data into array.
  2. This data or array is to be inserted in database. $user->save() will save data in user table.

Get data from database table

The template show_users.html that we created in previous articles, has to show the list of users.

Lets create a new procedure /getusers in index.php, which will receive data from database table.

 

The procedure is now ready and fetching required data.

json_getusers

 

Lets bring this data in show_users.html. But before this we will have to get this data in AngularJS controller (showUserCtrl), from here we will be sending this to our html file. So lets update showUserCtrl

getUsers function is using API procedure for getting data and is then saved in $scope.received_data. Function is then called at the end.

Now we have to update our template show_user.html

 

show_users

So this was the basic example of how to use AngularJS with Slim framework. I hope you found this useful.

 

Read More

AngularJS Form Submit with ngSubmit

In the previous article we did setup simple AngularJS Routing example. It had 2 template pages

  1. show users page
  2. add user page

In this article we will create a simple form and will submit the data which will be received in controller. Controller will then send a confirmation message to page that data has been received.

Consider the add_user.html page which we did in previous article.

Lets add a simple form in it.

  1. Within the form tab we have ng-submit=”addUser(data)”. It means that when ever user is going to click the submit button, data will be passed to addUser function of addUserCtrl.
  2. Within the form elements(username, category) we are using ng-model. It is important for binding these form fields. As the data is going to be passed in addUser function of addUserCtrl, we will be refering to ng-model value of each field there in controller.
  3. Note that data is being passed so values of model should be data.attribute_name. attribute_name can be any name that you wish according to your form field, just like we have data.username and data.fullname.

 

Now lets create a function within addUserCtrl.

Submitted data from the form using ngSubmit to addUser funtion with an argument is received here in userdata. In order to confirm this use console.log and then clear the fields of form.

Lets send confirmation message from controller to the page. Add one more line at the end of function.

Now we need to add a line of code in template file add_user.html so that this message can be displayed there after form submission. We need to use message in the expression because we have set the value of $scope.message.

We are adding this under the form

So this was a simple example of AngularJS form submit. In future article we will insert is data into database using Slim framwork.

 

 

Read More

AngularJS Routing Example

In this article we will be developing a simple app using AngularJS. We will use AngularJS Routing for a single page app. Actually, app will be composed of two different templates/pages and a home/index page but single page app means that we will be loading these two pages without page refresh.

Index.html

This is the index page of our app with navigation and ng-view directive. This is the section of page where content of other pages will be inserted without page reloading with the help of AngularJS Routing.

Angular App

Now after HTML of index page, lets create our application. The code of app.js file(mentioned in index.html page) is as under.

As you can see that both controllers (addUserCtrl and showUserCtrl) are empty yet. We will use them later(in upcoming article) for sending data to their respective template. Above controllers, we have configured routes( /showusers and /addnewuser). We have set both, templateUrl and controller for each route. Right now we are missing template files so lets create both of them(show_users.html and add_user.html).

Template files

show_users.html

add_user.html

I opened the main page of app using localhost/angularpractice. Use the correct URL according to your root folder name. It will show showusers page because of configuration that we did for routing. Click on the nav buttons and it should work like single page app but changing the content according to template pages.

According to route configuration, both add_user.html and show_users.html should be placed within templates folder. Make sure that you have template folder within root folder.

Note

Don’t forget to include required files. You can get the files from URLs mentioned next to files.

  1. angular.min.js Download from here
  2. angular-route.js Download from here

In upcoming article we will be creating a simple form in add_user.html and sending data to addUserCtrl.

 

Read More