Tag Archives: angularjs tutorial with examples

AngularJs Modules


AngularJs Modules : AngularJs Modules works as container for controllers. Controllers are associated with modules.


Example for AngularJs Modules

Let us understand with the following example.
We have created an application named as “myApp” which have the controller named as “myController”.

Name :
Name :
Name : {{ name }}
Email : {{ email }}

Now let us create module


AngularJs Modules Full Example

Example

 

  
Name :
Name :
Name : {{ name }} Email : {{ email }}

Try it »

Output :

AngularJs Modules example

AngularJs Modules

Note : You can keep your module and controller javaScript code in external js file. Example module.js and controller.js. Include these file such as

Example



myApp.js will have following code.

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

myController.js will have following code.

 myApp.controller("myController", function($scope) {
    $scope.name = "Tani";
    $scope.email = "tanib@yopemail.com";
});

AngularJs Tables


AngularJs Tables : Tables in AgularJs are created using the ng-repeat directives. You can create tables and add
css styles to them.


AngularJs Tables : Syntax

Example

    
      ......
    
{{data.fieldName1}} {{data.fieldName2}} {{data.fieldName3}}

Example

    



IdName
{{data.id}} {{data.name}}

Try it »

Add Css In Table

You can add css directly in table tr and td tags or you can add it by adding custom classes.

Add Css In Table Example


Try it »

AngularJs $even and $odd Example

Add Css In Table Example

IdName
{{data.id}} {{data.id}} {{data.name}} {{data.name}}

Try it »

AngularJs Tables

AngularJs Tables

Angularjs Http Get Method


Angularjs Http Get Method : AngularJs Http Get is used to perform get request. The $http is basically core angular service that provides communication with remote HTTP services via the XMLhttpRequest object or via JSONP. You can use this method to communicate with sever using the get method. We are going to cover this method with example and demo.


Angularjs Http Get Method Syntax

Here is syntax of Http get method –

$http.get('Url').then(Callback);

Url : Thet Url from where you want to load data.
Callback : Callback function after success. Returns object.

Angularjs Http Get Method Sample Data

Sample data for http get method is given below which is used in get method example.

{"users":[{"id":"1","name":"John","email":"johnk@yopemail.com","phone":"121323232"},{"id":"2","name":"Kelly","email":"kellyk@yopemail.com","phone":"121212122"},{"id":"3","name":"Ryan","email":"ryank@yopemail.com","phone":"22222212"},{"id":"4","name":"Kojo","email":"kojao@yopemail.com","phone":"12144444"},{"id":"5","name":"Kinjal","email":"kinjal@yopemail.com","phone":"22555212"},{"id":"6","name":"Tani","email":"tanya@yopemail.com","phone":"121334444"},{"id":"7","name":"Brak","email":"barak@yopemail.com","phone":"2444444512"},{"id":"8","name":"Uman","email":"uman@yopemail.com","phone":"12334444"}]}

Below is example of Http Get method which reads data in JSON format from the url : http://runtest.tutorialsplane.com/json/getUsers.php. You can use your server path which will return data in JSON format. Run the below example to see output.

Example

    



IdName
{{data.id}} {{data.name}}

Try it »

If you run the above example it will produce output like this-

Angularjs Http Get Method

Angularjs Http Get Method

Try Video Demo – All In One Video for this method –

AngularJs Http Get Method Video Demo –

AngularJs Filter Example


AngularJs Filter Example : It Selects subset of array and returns as a new array


AngularJs Filter Example with Syntax

In Html Template

{{ filter_expression | filter : expression : comparator}}

In Javascript

$filter('filter')(array, expression, comparator)

array : Input array as source

expression : Can be string, Object or function used for selecting items from array.

comparator : Used to determine the actual and Expected Value.

Let us understand with very basic example and demo.

Filter Example

    



Search

NameCity
{{data.name}} {{data.city}}

Try it »

Note: Please Make you take proper ng-model name not any invalid name like : search-str Or search_str. Avoid dash, underscore and space in ng-model name.

The above example will look like this :

AngularJs Filter Example

AngularJs Filter Example

When we search the “Maya” keyword it show the result as below:

AngularJs result Filter Example

AngularJs Filter Example Result

AngularJs Controllers


AngularJs Controllers : Are used for controlling the application data. Controllers are defined in ng-controller directive. Controllers are basically javaScript objcts.


Syntax : AngularJs Controllers


Lets understand with following example and demo.
If want to try the example by your own just copy and paste on .html file and run to see the ouput

AngularJs Controllers Example

Example of AngularJs Controllers

    



Enter Name

{{name}}

Try it »

The Application is ng-app=”myApp” under which the application will run. ng-Controller =”myController” is angularJs directive. The above example shows the function in the controller code , this functions has a $scope object which is used to set the name in the field “name”. The value for the “name” filed is associated with the model “ng-model” named as “name” in input field.
The main application ng-app=”myApp” is main body of the application under which complete applications runs.
The objects are initialized when applications runs. The controller named as “myController” controls the flow of the
application and plays the important role in application handling.

You can create a separate file to keep the controller code.

Example : Create a myController.js file put in (for example “js”) directory you wish. You can Include it as it :

Enter Name

{{name}}

Now you can add your controller code in the above file.

You can also add the variables in the ng-init directive to use it in the angularJs application. Controllers can interact with the external files also. You can load data from external file and use it in your application for processing. You can load data in json format and xml format.
The Output of the above demo will be :

Angularjs controller example, AngularJs Controllers

Angularjs controller example