AngularJs – Java2Blog

Spring MVC angularjs example

Java2blog — Sat, 06 Aug 2016 20:34:00 +0000

n this tutorial, we will see Spring MVC angularjs example.

Spring MVC tutorial:

In this post, we will create Spring MVC REST APIs and perform CRUD operations using AngularJs by calling REST APIs.

Github Source code:

Here are steps to create a simple Spring Rest API which will provide CRUD opertions and angularJS to call Spring MVC APIs.

1) Create a dynamic web project using maven in eclipse named “AngularjsSpringRestExample”

Maven dependencies

2)Now create pom.xml as follows:

pom.xml


  4.0.0
  com.arpit.java2blog
  AngularjsSpringRestExample
  war
  0.0.1-SNAPSHOT
  AngularjsSpringRestExample Maven Webapp
  http://maven.apache.org
  
    
      junit
      junit
      3.8.1
      test
    
    
   javax.servlet
   javax.servlet-api
   3.1.0
  

  
   org.springframework
   spring-core
   ${spring.version}
  
  
   org.springframework
   spring-webmvc
   ${spring.version}
  
   
            com.fasterxml.jackson.core
            jackson-databind
             2.4.1
        
 
 
  AngularjsSpringRestExample

  
   
    org.apache.maven.plugins
    maven-compiler-plugin
    3.1
    
     ${jdk.version}
     ${jdk.version}
    
   
  

 
 
  4.2.1.RELEASE
  1.7

Application configuration:

3) create web.xml as below:




  Archetype Created Web Application
  
 springrest
 
  org.springframework.web.servlet.DispatcherServlet
 
 1



 springrest
 /

4) create a xml file named springrest-servlet.xml in /WEB-INF/ folder.

Please change context:component-scan if you want to use different package for spring to search for controller.Please refer to spring mvc hello world examplefor more understanding.

Create bean class

5) Create a bean name “Country.java” in org.arpit.java2blog.bean.

package org.arpit.java2blog.bean;

public class Country{

    int id;
    String countryName;
    long population;

    public Country() {
        super();
    }
    public Country(int i, String countryName,long population) {
        super();
        this.id = i;
        this.countryName = countryName;
        this.population=population;
    }
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getCountryName() {
        return countryName;
    }
    public void setCountryName(String countryName) {
        this.countryName = countryName;
    }
    public long getPopulation() {
        return population;
    }
    public void setPopulation(long population) {
        this.population = population;
    }

}

Create Controller

6) Create a controller named “CountryController.java” in package org.arpit.java2blog.controller

package org.arpit.java2blog.controller;

import java.util.List;
import javax.servlet.http.HttpServletRequest;
import org.arpit.java2blog.bean.Country;
import org.arpit.java2blog.service.CountryService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class CountryController {

    @Autowired
    private HttpServletRequest request;
    CountryService countryService = new CountryService();

    @RequestMapping(value = "/countries", method = RequestMethod.GET, headers = "Accept=application/json")
    public List getCountries() {

        List listOfCountries = countryService.getAllCountries();
        return listOfCountries;
    }

    @RequestMapping(value = "/country/{id}", method = RequestMethod.GET, headers = "Accept=application/json")
    public Country getCountryById(@PathVariable int id) {
        return countryService.getCountry(id);
    }

    @RequestMapping(value = "/countries", method = RequestMethod.POST, headers = "Accept=application/json")
    public Country addCountry(@RequestBody Country country) {
        return countryService.addCountry(country);
    }

    @RequestMapping(value = "/countries", method = RequestMethod.PUT, headers = "Accept=application/json")
    public Country updateCountry(@RequestBody Country country) {
        return countryService.updateCountry(country);

    }

    @RequestMapping(value = "/country/{id}", method = RequestMethod.DELETE, headers = "Accept=application/json")
    public void deleteCountry(@PathVariable("id") int id) {
        countryService.deleteCountry(id);

    }
}

Create Service class

7) Create a class CountryService.java in package org.arpit.java2blog.service
It is just a helper class which should be replaced by database implementation. It is not very well written class, it is just used for demonstration.

package org.arpit.java2blog.service;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

import org.arpit.java2blog.bean.Country;

/*
 * It is just a helper class which should be replaced by database implementation.
 * It is not very well written class, it is just used for demonstration.
 */
public class CountryService {

    static HashMap countryIdMap=getCountryIdMap();

    public CountryService() {
        super();

        if(countryIdMap==null)
        {
            countryIdMap=new HashMap();
            // Creating some objects of Country while initializing
            Country indiaCountry=new Country(1, "India",10000);
            Country chinaCountry=new Country(4, "China",20000);
            Country nepalCountry=new Country(3, "Nepal",8000);
            Country bhutanCountry=new Country(2, "Bhutan",7000);

            countryIdMap.put(1,indiaCountry);
            countryIdMap.put(4,chinaCountry);
            countryIdMap.put(3,nepalCountry);
            countryIdMap.put(2,bhutanCountry);
        }
    }

    public List getAllCountries()
    {
        List countries = new ArrayList(countryIdMap.values());
        return countries;
    }

    public Country getCountry(int id)
    {
        Country country= countryIdMap.get(id);
        return country;
    }
    public Country addCountry(Country country)
    {
        country.setId(getMaxId()+1);
        countryIdMap.put(country.getId(), country);
        return country;
    }

    public Country updateCountry(Country country)
    {
        if(country.getId()<=0)
            return null;
        countryIdMap.put(country.getId(), country);
        return country;

    }
    public void deleteCountry(int id)
    {
        countryIdMap.remove(id);
    }

    public static HashMap getCountryIdMap() {
        return countryIdMap;
    }

    // Utility method to get max id
    public static int getMaxId()
    {   int max=0;
    for (int id:countryIdMap.keySet()) {
        if(max<=id)
            max=id;

    }
    return max;
    }
}

AngularJS view

8) create angularJSCrudExample.html in WebContent folder with following content:


  

  

    AngularJS $http Rest example
 
        
    
    
         
           AngularJS Restful web services example using $http
        
        
            

                
                    Add/Edit country
                 
                
                    Country
                    
                
                
                    Population
                    
                
                
                    
                
            
        
        
            

                CountryName
                Population
                Operations

            

            

     {{ country.countryName }}
    {{ country.population }}

                Edit | Delete

Add/Edit country
Country
Population

CountryName	Population	Operations
{{ country.countryName }}	{{ country.population }}	Edit \| Delete

Explanation :

- We have injected $http as we have done in ajax example through controller constructor.

app.controller("CountryController", function($scope, $http) {

                $scope.countries = [];
...

- We have defined various methods depending on operations such as editCountry, deleteCountry, submitCountry
- When you click on submit button on form, it actually calls POST or PUT depending on operation. If you click on edit and submit data then it will be put operation as it will be update on existing resource. If you directly submit data, then it will be POST operation to create new resource,
- Every time you submit data, it calls refereshCountryData() to refresh country table below.
- When you call $http, you need to pass method type and URL, it will call it according, You can either put absolute URL or relative URL with respect to context root of web application.

//HTTP GET- get all countries collection
                function _refreshCountryData() {
                    $http({
                        method : 'GET',
                        url : 'http://localhost:8080/AngularjsSpringRestExample/rest/countries'
                    }).then(function successCallback(response) {
                        $scope.countries = response.data;
                    }, function errorCallback(response) {
                        console.log(response.statusText);
                    });
                }

9) It ‘s time to do maven build.

Right click on project -> Run as -> Maven build

10) Provide goals as clean install (given below) and click on run

Run the application

10) Right click on angularJSCrudExample.html -> run as -> run on server

Select apache tomcat and click on finish

11) You should be able to see below page
URL : “http://localhost:8080/AngularjsJAXRSCRUDExample/angularJSCrudExample.html”

Lets click on delete button corresponding to Nepal and you will see below screen:

Lets add new country France with population 15000

Click on submit and you will see below screen.

Now click on edit button corresponding to India and change population from 10000 to 100000.

Click on submit and you will see below screen:

Lets check Get method for Rest API

12) Test your get method REST service
URL :“http://localhost:8080/AngularjsSpringRestExample/countries/”.

You will get following output:

As you can see , all changes have been reflected in above get call.

Project structure:

We are done with Spring MVC angularjs example.If you are still facing any issue, please comment.

AngularJS tutorial:

AngularJS custom filter example

Java2blog — Tue, 05 Apr 2016 18:45:00 +0000

In previous post, we have seen about angularJS inbuilt filter. In this post, we are going to how to create your own filters.

AngularJS tutorial:

Filters are used to format data in desired way.
For creating a filter , you need to attach it with the module.

angular.module('myApp')
  .filter('customFilter', function () {
    return function (input) {
      if (input) {
        return input;
      }
    };
  });

Lets take example where we will convert string to upper case and replace “_” by space(” “).

Example:

Copy below text , open notepad , paste it and save it as angularJSCustomFilterExample.html and open it in the browser.

  
Angular js  
  
 
  
  
    
   
  {{java2blogMsg|java2blogFilter}}   !!!

Output:

HELLO FROM JAVA2BLOG !!!

AngularJS Built-In filter examples

Java2blog — Sat, 02 Apr 2016 16:21:00 +0000

In this post, we will see about AngularJS inbuilt filter examples.

AngularJS tutorial:

We need to display output data in some other formats many times . For example: You need to display currency with the number. AngularJS provides many inbuilt filter for this purpose.
AngularJS filters are used to format data in views. “|” symbol is used to apply filter.
AngularJS filter can be applied in two ways

On AngularJS directives
On AngularJS expressions

Lets see some of inbuilt filters here.

Filter on expressions

uppercase

This filter is used to change format of text to uppercase.


Angular js

 



 
  {{java2blogMsg|uppercase}}   !!!

Output: HELLO FROM JAVA2BLOG !!!

lowercase

This filter is used to change format of text to lowercase.


Angular js

 



 
  {{java2blogMsg|lowercase}}   !!!

Output:hello from java2blog !!!

currency

This filter is used to format number into currency.


Angular js

 



 
 Cost is {{cost|currency}}

Output:Cost is $500.00

limitTo

limitTo is used to display limited number of charcters


Angular js

 



 
 {{java2blogMsg | limitTo:5}} !!!

Output:
Hello !!!

date

Date is used to format dates in specific formats


Angular js

 



  Today 's date  : {{date | date:'dd/MM/yyyy'}}

Output:Today ‘s date : 02/04/2016

Filter on directives

orderby

This filter is use to order by column in the table.


Angular js





  
    
  
     Name
     Captial
  
 
  
    {{ con.name }}
    {{ con.capital }}

Name	Captial
{{ con.name }}	{{ con.capital }}

Output:

Filter:

It is used to filter data from array or list


Angular js







     Filter : 
  
    
      
    
  
     Name
     Captial
  
 

  
    {{ con.name }}
    {{ con.capital }}

Name	Captial
{{ con.name }}	{{ con.capital }}

Output:
AngularJS filter example

AngularJS Restful web service example using $http

Java2blog — Mon, 28 Mar 2016 18:46:00 +0000

This post is in continuation with AngularJS web services tutorial

In previous post, we have already seen Restful web services CRUD example. In this post, we will use AngularJS to call rest CRUD APIs. So we are going to create a view and then perform CRUD operations on the basis of button clicks.

Source code:

Download

click to begin

20KB .zip

Here are steps to create a simple Restful web services(JAXWS) using jersey which will provide CRUD opertion.

1) Create a dynamic web project using maven in eclipse named “JAXRSJsonCRUDExample”

Maven dependencies

2) We need to add jersey jars utility in the classpath.


   com.sun.jersey
   jersey-servlet
   ${jersey.version}
 
 
   com.sun.jersey
   jersey-json
   ${jersey.version}

Jersey internally uses Jackson for Json Handling, so it will be used to marshal pojo objects to JSON.

Now create pom.xml as follows:
pom.xml


 4.0.0
 com.arpit.java2blog
 JAXRSJsonExample
 war
 0.0.1-SNAPSHOT
 JAXRSJsonExample Maven Webapp
 http://maven.apache.org
   
        1.18.3
    
 
  
   junit
   junit
   3.8.1
   test
  

  
   com.sun.jersey
   jersey-servlet
   ${jersey.version}
  
  
   com.sun.jersey
   jersey-json
   ${jersey.version}
  

  
   commons-logging
   commons-logging
   1.2
  
 
 
  JAXRSJsonExample
  
   
    org.apache.maven.plugins
    maven-compiler-plugin
    3.3
    
     1.7
     1.7
    
   
   
    org.apache.maven.plugins
    maven-war-plugin
    
     false

Application configuration:

3) create web.xml as below:



 Archetype Created Web Application
 
  jersey-serlvet
  com.sun.jersey.spi.container.servlet.ServletContainer
  
   com.sun.jersey.config.property.packages
   org.arpit.java2blog.controller
  
  
   com.sun.jersey.api.json.POJOMappingFeature
   true
  

  1
 
 
  jersey-serlvet
  /rest/*

Please change initParam “com.sun.jersey.config.property.package” property to provide correct controller package name if you are not using same package.

Create bean class

4) Create a bean name “Country.java” in org.arpit.java2blog.bean.

package org.arpit.java2blog.bean;

public class Country{

    int id;
    String countryName;
    long population;

    public Country() {
        super();
    }
    public Country(int i, String countryName,long population) {
        super();
        this.id = i;
        this.countryName = countryName;
        this.population=population;
    }
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getCountryName() {
        return countryName;
    }
    public void setCountryName(String countryName) {
        this.countryName = countryName;
    }
    public long getPopulation() {
        return population;
    }
    public void setPopulation(long population) {
        this.population = population;
    }

}

Create Controller

5) Create a controller named “CountryController.java” in package org.arpit.java2blog.controller

package org.arpit.java2blog.controller;

import java.util.List;

import javax.ws.rs.DELETE;
import javax.ws.rs.GET;
import javax.ws.rs.POST;
import javax.ws.rs.PUT;
import javax.ws.rs.Path;
import javax.ws.rs.PathParam;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;

import org.arpit.java2blog.bean.Country;
import org.arpit.java2blog.service.CountryService;

@Path("/countries")
public class CountryController {

    CountryService countryService=new CountryService();

    @GET
    @Produces(MediaType.APPLICATION_JSON)
    public List getCountries()
    {

        List listOfCountries=countryService.getAllCountries();
        return listOfCountries;
    }

    @GET
    @Path("/{id}")
    @Produces(MediaType.APPLICATION_JSON)
    public Country getCountryById(@PathParam("id") int id)
    {
        return countryService.getCountry(id);
    }

    @POST
    @Produces(MediaType.APPLICATION_JSON)
    public Country addCountry(Country country)
    {
        return countryService.addCountry(country);
    }

    @PUT
    @Produces(MediaType.APPLICATION_JSON)
    public Country updateCountry(Country country)
    {
        return countryService.updateCountry(country);

    }

    @DELETE
    @Path("/{id}")
    @Produces(MediaType.APPLICATION_JSON)
    public void deleteCountry(@PathParam("id") int id)
    {
        countryService.deleteCountry(id);

    }

}

@Path(/your_path_at_class_level) : Sets the path to base URL + /your_path_at_class_level. The base URL is based on your application name, the servlet and the URL pattern from the web.xml” configuration file.

@Path(/your_path_at_method_level): Sets path to base URL + /your_path_at_class_level+ /your_path_at_method_level

@Produces(MediaType.APPLICATION_JSON[, more-types ]): @Produces defines which MIME type is delivered by a method annotated with @GET. In the example text (“text/json”) is produced.

Create Service class

6) Create a class CountryService.java in package org.arpit.java2blog.service
It is just a helper class which should be replaced by database implementation. It is not very well written class, it is just used for demonstration.

package org.arpit.java2blog.service;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

import org.arpit.java2blog.bean.Country;
import org.arpit.java2blog.exception.CountryNotFoundException;

/*
 * It is just a helper class which should be replaced by database implementation.
 * It is not very well written class, it is just used for demonstration.
 */
public class CountryService {

    static HashMap countryIdMap=getCountryIdMap();

    public CountryService() {
        super();

        if(countryIdMap==null)
        {
            countryIdMap=new HashMap();
            // Creating some object of countries while initializing
            Country indiaCountry=new Country(1, "India",10000);
            Country chinaCountry=new Country(4, "China",20000);
            Country nepalCountry=new Country(3, "Nepal",8000);
            Country bhutanCountry=new Country(2, "Bhutan",7000);

            countryIdMap.put(1,indiaCountry);
            countryIdMap.put(4,chinaCountry);
            countryIdMap.put(3,nepalCountry);
            countryIdMap.put(2,bhutanCountry);
        }
    }

    public List getAllCountries()
    {
        List countries = new ArrayList(countryIdMap.values());
        return countries;
    }

    public Country getCountry(int id)
    {
        Country country= countryIdMap.get(id);

        if(country == null)
        {
            throw new CountryNotFoundException("Country with id "+id+" not found");
        }
        return country;
    }
    public Country addCountry(Country country)
    {
        country.setId(getMaxId()+1);
        countryIdMap.put(country.getId(), country);
        return country;
    }

    public Country updateCountry(Country country)
    {
        if(country.getId()<=0)
            return null;
        countryIdMap.put(country.getId(), country);
        return country;

    }
    public void deleteCountry(int id)
    {
        countryIdMap.remove(id);
    }

    public static HashMap getCountryIdMap() {
        return countryIdMap;
    }

    // Utility method to get max id
    public static int getMaxId()
    {   int max=0;
    for (int id:countryIdMap.keySet()) {
        if(max<=id)
            max=id;

    }

    return max;
    }
}

AngularJS view

7) create angularJSCrudExample.html in WebContent folder with following content:


  

  

    AngularJS $http Rest example
 
        
    
    
         
           AngularJS Restful web services example using $http
        
        
            

                
                    Add/Edit country
                 
                
                    Country
                    
                
                
                    Population
                    
                
                
                    
                
            
        
        
            

                CountryName
                Population
                Operations

            

            

     {{ country.countryName }}
    {{ country.population }}

                Edit | Delete

Add/Edit country
Country
Population

CountryName	Population	Operations
{{ country.countryName }}	{{ country.population }}	Edit \| Delete

Explanation :

- We have injected $http as we have done in ajax example through controller constructor.

app.controller("CountryController", function($scope, $http) {

                $scope.countries = [];
...

- We have defined various methods depending on operations such as editCountry, deleteCountry, submitCountry
- When you click on submit button on form, it actually calls POST or PUT depending on operation. If you click on edit and submit data then it will be put operation as it will be update on existing resource. If you directly submit data, then it will be POST operation to create new resource,
- Every time you submit data, it calls refereshCountryData() to refresh country table below.
- When you call $http, you need to pass method type and URL, it will call it according, You can either put absolute URL or relative URL with respect to context root of web application.

//HTTP GET- get all countries collection
                function _refreshCountryData() {
                    $http({
                        method : 'GET',
                        url : 'http://localhost:8080/JAXRSJsonCRUDExample/rest/countries'
                    }).then(function successCallback(response) {
                        $scope.countries = response.data;
                    }, function errorCallback(response) {
                        console.log(response.statusText);
                    });
                }

8) It ‘s time to do maven build.

Right click on project -> Run as -> Maven build

9) Provide goals as clean install (given below) and click on run

Run the application

10) Right click on angularJSCrudExample.html -> run as -> run on server

Select apache tomcat and click on finish

10) You should be able to see below page
URL : “http://localhost:8080/AngularjsJAXRSCRUDExample/angularJSCrudExample.html”

Lets click on delete button corresponding to Nepal and you will see below screen:

Lets add new country France with population 15000

Click on submit and you will see below screen.

Now click on edit button corresponding to India and change population from 10000 to 100000.

Click on submit and you will see below screen:

Lets check Get method for Rest API

11) Test your get method REST service
URL :“http://localhost:8080/AngularjsJAXRSCRUDExample/rest/countries/”.

You will get following output:

As you can see , all changes have been reflected in above get call.

Project structure:

We are done with Restful web services json CRUD example using jersey. If you are still facing any issue, please comment.

AngularJS tutorial:

AngularJS Ajax example using $http

Java2blog — Sat, 19 Mar 2016 11:07:00 +0000

In this tutorial, we are going to call ajax in angular js using $http service. AngularJS provides multiple services out of the box. $http service can be used to perform http request. It allows you create any http request by just injecting it via controller constructor.

In this example, we are going to read countries.json using ajax request from server and will show data of it in a table.

Ajax request in app.js

var app = angular.module('myApp', []);
 app.controller('java2blogContoller', function($scope,$http) {

  var url = "countries.json";
  $http.get(url).success( function(response) {
        $scope.countries = response;
     });
 });

As you can see here , we are injecting $http in controller function here and assigning response to countries list.

Lets see complete example:

Project structure:

Step 1: Create dynamic web project named “AngularJSAjaxExample” in eclipse.
Step 2: We are going to read counties.json from server. Create countries.json in WebContent folder with below json text.

[
  {
    "id": 1,
    "countryName": "India",
    "population": 10000
  },
  {
    "id": 2,
    "countryName": "Bhutan",
    "population": 7000
  },
  {
    "id": 3,
    "countryName": "Nepal",
    "population": 8000
  },
  {
    "id": 4,
    "countryName": "China",
    "population": 20000
  }
]

Step 3: Create angularJSAjaxExample.html in WebContent folder as below:


Angular js


 



  
    
  
     ID
     Country Name
     Population
  
 
  
     {{ con.id }}
     {{ con.countryName }}
    {{ con.population }}

ID	Country Name	Population
{{ con.id }}	{{ con.countryName }}	{{ con.population }}

Here we are using ng-repeat tag to iterate counties list and showing it in table.

Step 4 : Create app.js in WebContent folder as below:

var app = angular.module('myApp', []);
 app.controller('java2blogContoller', function($scope,$http) {

  var url = "countries.json";

     $http.get(url).success( function(response) {
        $scope.countries = response;
     });
 });

Step 5: We are going to apply style on this table, so create table.css as below in WebContent folder.

table {
  font-family: "Helvetica Neue", Helvetica, sans-serif
}

caption {
  text-align: left;
  color: silver;
  font-weight: bold;
  text-transform: uppercase;
  padding: 5px;
}

thead {
  background: SteelBlue;
  color: white;
}

th,
td {
  padding: 5px 10px;
}

tbody tr:nth-child(even) {
  background: WhiteSmoke;
}

tbody tr td:nth-child(2) {
  text-align:center;
}

tbody tr td:nth-child(3),
tbody tr td:nth-child(4) {
  text-align: right;
  font-family: monospace;
}

tfoot {
  background: SeaGreen;
  color: white;
  text-align: right;
}

tfoot tr th:last-child {
  font-family: monospace;
}

Step 6: Run the html file on the server. Right click on “angularJSAjaxExample.html” and go to run -> run on server.

You will see below output:

URL: http://localhost:8080/AngularJSAjaxExample/angularJSAjaxExample.html

Source code:

Download

click to begin

20KB .zip

Angularjs ng-repeat example

Java2blog — Fri, 18 Mar 2016 20:59:00 +0000

AngularJS tutorial:

ng-repeat is a angular js directive which is often used to display data in tables. It is widely used directive. It works very much similar to java for each loop.

Syntax:

Here countries is json array defined in app.js.

Lets understand with example .

Copy below text , open notepad , paste it and save it as angularJSExample.html and open it in the browser.


Angular js






  
    
  
     Name
     Captial
  
 
  
    {{ con.name }}
    {{ con.capital }}

Name	Captial
{{ con.name }}	{{ con.capital }}

app.js

var app = angular.module('myApp', []);
 app.controller('java2blogContoller', function($scope) {

      $scope.countries=
        [
        {"name": "India" , "capital" : "delhi"},
         {"name": "England" , "capital" : "London"},
         {"name": "France" , "capital" : "Paris"},
         {"name": "Japan" , "capital" : "Tokyo"}

      ];

 });

Output:

When you open html file in browser, you will get following output:

Live demo:

Angular js on jsbin.com

Some other properties:

There are some properties which is accessible to local scope which we can use in ng-repeat directly.

Variable	Type	Description
$index	number	It carries index of repeated element
$first	boolean	true if repeated element is first element
$middle	boolean	true if repeated element is middle element
$last	boolean	true if repeated element is last element
$even	boolean	It depends on $index. true if $index is even
$odd	boolean	It depends on $index. true if $index is odd

Lets change color of odd and even rows of table using $even and $odd.


Angular js






  
    
  
     Name
     Captial
  
 
  
     {{ con.name }}
     {{ con.name }}
    {{ con.capital }}
    {{ con.capital }}

Name	Captial
{{ con.name }}	{{ con.name }}	{{ con.capital }}	{{ con.capital }}

app.js

var app = angular.module('myApp', []);
 app.controller('java2blogContoller', function($scope) {

      $scope.countries=
        [
        {"name": "India" , "capital" : "delhi"},
         {"name": "England" , "capital" : "London"},
         {"name": "France" , "capital" : "Paris"},
         {"name": "Japan" , "capital" : "Tokyo"}

      ];

 });

Output:

When you open html file in browser, you will get following output:

Live demo:

Angular js on jsbin.com

As you can see, we have used $even to check even row and $odd to check odd row. ng-if is another angular directive which is used for checking if condition. We are going to use ng-repeat in many other examples.

Reference:

https://docs.angularjs.org/api/ng/directive/ngRepeat

Angularjs controller examples

Java2blog — Fri, 18 Mar 2016 20:58:00 +0000

In previous post, we have seen a very simple angularjs hello world example. In this post, we are going to see about controllers.

AngularJS tutorial:

What are controllers

You can consider controllers as main driver for model view changes. It is a main part of angular js application and It is javascript functions or objects which actually performs ui operation. It controls data of angularjs applications.

What is $scope?

Scope is an object which is glue between model and view. So if you want to pass data from model to view and view to model, it is done through scopes object.

How controllers and scope are related?

Actually controllers passes scope object as constructor parameter and initialise model values and functions. Please don’t worry if it sounds very confusing, once we see simple example, you will be able to relate.

Declaration of controller syntax :

You need declare module before creating controller. We will learn about module in our next tutorial.

So we use module’s controller method to declare controller.

var app = angular.module('myApp', []);
app.controller('java2blogContoller', function($scope) {
    $scope.java2blogMsg = "Hello from java2blog";

});

Simple example:

Copy below text , open notepad , paste it and save it as angularJSControllerExample.html and open it in the browser.


Angular js







 
  {{java2blogMsg}}  !!!

app.js

var app = angular.module('myApp', []);
app.controller('java2blogContoller', function($scope) {
    $scope.java2blogMsg = "Hello from java2blog";

});

Live Demo:

Angular js controller example

What if you don’t want to use $scope?

Yes, you can use controller as option too if you do not want to use $scope variable.

so you need to use

Advantages of using controller as options are:

Code becomes more readable.
It removes dealing with this scope and bindings.
There is no dependency on alias used in view(.html) and javascript

Lets take an example:

Copy below text , open notepad , paste it and save it as angularJSControllerExample.html and open it in the browser.


Angular js







 
  {{con.java2blogMsg}}  !!!

app.js

var app = angular.module('myApp', []);
app.controller('java2blogContoller', function() {
    var cont= this;
    cont.java2blogMsg = "Hello from java2blog with controller as option";

});

Live demo:

Angular js controller as example

AngularJS hello world example

Java2blog — Sat, 12 Mar 2016 20:23:00 +0000

AngularJs is an open-source web application framework mainly maintained by Google . It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, It helps you to solve major issues with single web page applications. You need to write very less code to achieve complex functionalities.

AngularJS tutorial:

In this post , we will see how to create angular js example. I will try to create example as simple as possible.
We need to include angular .js in our pages. This can be done in two ways.

go to https://angularjs.org/ and click on download Angular js 1 and copy CDN link
You can directly download it from above link and put .js file your folder.

Example :

Copy below text , open notepad , paste it and save it as angularJSExample.html and open it in the browser.


Angular js






 10+40 ={{ 10 + 40 }}
 
 1===2 ? : {{ 1==2 }}

Live demo:

Angular JS example

Explanation:

We have included angular js CDN in line number 6
If you see closely, we have used ng-app attribute with div element. It is called angular directive (We will learn about this letter). We just need to know that it tells angular about starting point of angular flow. So in this div element , we will have angular js related code.
You can understand ng-app as main() method in java
{{ }} defines angular expression, so whatever inside it will be evaluated. You can see {{10+40}} becomes 50 here.

What if we do not put ng-app and use angular expression:

It won’t evaluate the expression as simple as that.

Lets create another div without ng-app and see how it works
Angular js without ng-app

AngularJS did not evaluate expression for second div as it is out of scope for it.

Lets put ng-app at body tag

Angular js ng-app on bidy tag

As you can see, angular js has evaluated expressions for both div tags.

More example:

Lets take another example:


Angular js





 Name: 
 
  Hello {{ helloWorld}}  !!!

Live demo:

Angular js example

Explanation :

In this example, we have used textbox, so whatever you write in textbox, get reflected with hello.

We have used ng-app same as previous example.
If you notice, we have also used ng-model this time. It is also angular directive and it binds state of model and view, so whatever you write in text box, it get reflected in {{helloworld}} . You will be able to understand more about in the coming tutorials.