AngularJs supporting libraries for performance, date, icons, and utilities

Date 

http://momentjs.com/

Icons

https://fortawesome.github.io/Font-Awesome/icons/

utilities

https://lodash.com/

AngularJS - How to repeat multiple table rows / any group of HTML element

<tr ng-repeat-start="user in users">
    <td rowspan=2>{{user.id}}</td>
    <td colspan=2>{{user.name}}</td>
</tr>
<tr ng-repeat-end>
    <td>{{user.email}}</td>
    <td>{{user.phone}}</td>
</tr>

Angularjs difference between Services,Factories & Providers

Services

Syntax: module.service( 'serviceName', function ); 
Result: When declaring serviceName as an injectable argument you will be provided with an instance of the function. In other words new FunctionYouPassedToService().

Factories

Syntax: module.factory( 'factoryName', function ); 
Result: When declaring factoryName as an injectable argument you will be provided with the value that is returned by invoking the function reference passed to module.factory.

Providers

Syntax: module.provider( 'providerName', function ); 
Result: When declaring providerName as an injectable argument you will be provided with ProviderFunction().$get(). The constructor function is instantiated before the $get method is called - ProviderFunction is the function reference passed to module.provider.

Providers have the advantage that they can be configured during the module configuration phase.

See Example : http://jsbin.com/ohamub/1/edit

AngularJS Http Interceptor Example

- under the routing configuration

$httpProvider.interceptors
    .push(['$q', '$injector', function ($q, $injector) {
        return function (promise) {
            return promise.then(function (response) {
                return response;
            }, function (response) {
                if (response.status === 401) {
                    $injector.get('$state').go('login');
                } else if (response.status === 403) {
                    $injector.get('$state').go('resources');
                } else if (response.status === 404) {
                    $injector.get('$state').go('login');
                }
                return $q.reject(response);
            });
        };
    }]);

Difference between $http, $resource & Restangular

$http - $http is built into Angular, so there’s no need for the extra overhead of loading in an external dependency. $http is good for quick retrieval of server-side data that doesn't really need any specific structure or complex behaviours. It’s probably best injected directly into your controllers for simplicity’s sake.

$resource - $resouce is good for situations that are slightly more complex than $http. It’s good when you have pretty structured data, but you plan to do most of your crunching, relationships, and other operations on the server side before delivering the API response. $resource doesn't let you do much once you get the data into your JavaScript app, so you should deliver it to the app in its final state and make more REST calls when you need to manipulate or look at it from a different angle. Any custom behaviour on the client side will need a lot of boilerplate.

Restangular - Restangular is a perfect option for complex operations on the client side. It lets you easily attach custom behaviours and interact with your data in much the same way as other model paradigms you've used in the past. It’s promise-based, clean, and feature-rich. However, it might be overkill if your needs are basic, and it carries along with it any extra implications that come with bringing in additional third-party dependencies.

To Get More Info and example 

http://sauceio.com/index.php/2014/07/angularjs-data-models-http-vs-resource-vs-restangular/

Angularjs set float decimal point by $filter

Filter at angular script

$filter('number')(val, fractionSize)

Reference  : https://docs.angularjs.org/api/ng/filter/number

Filter at html

<span>{{val | number:0}}</span>

we can apply filter at both end either  at script or at html expression base on requirements

AngularJS String to numeric (integer / float) Conversion

integer 

$scope.intValue = parseInt($scope.stringParameter);

float

$scope.floatValue = parseFloat($scope.stringParameter);

see some filter if required after conversion in float to set fraction decimal points



http://code2run.blogspot.ca/2015/01/angularjs-set-float-decimal-point-by.html

AngularJS, Work with $watch

$watch will help to process some logic base on scope variable change.

Its just like as onChange event of drop down / text box control


$scope.$watch('scopeVariable', function() {

          // Some Task

}

AngulaJS $timeout example

$scope.statusMessage = true;
          $timeout(function() {
              $scope.statusMessage = true;
          }, 2000); 

Get Image Dimension Before upload with angularjs

var _URL = window.URL || window.webkitURL;
         
var image, file;

          if ((file = $files[0])) {
            image = new Image();
            image.onload = function() {
                $scope.$apply(function() {
                  alert(image.width);
                });
            };

image.src = _URL.createObjectURL(file);

AngularJS project with YeoMan windows 7 step by step

1. Download Node.js 
1. install it
2. Download Git
1. install it
1. Run Git form the Windows Command Prompt
2. Configuring the line ending conversions“, choose “Checkout Windows-style, commit Unix-style line endings”
3. Download Ruby
1. Install it
4. Open Command prompt
1. Check Git command 
2. Check Node.js
3. if all work proper than fire few command as
1. npm install -g yo
2. npm install -g grunt-cli bower
3. npm install -g generator-webapp
4. npm install -g generator-angular
5. note : now installation has been done these all steps are mendetory only once for your system
4. create project directory
1. mkdir yoeman-angular-project
2. cd yoeman-angular-project
3. yo angular yoeman-angular-project : for creating project and select all dependency as you required for project
4. grunt serve --force : to start server it will open index.htm page in browser to indicate your app is running

AngularJS Email Validation

<!doctype html>

<html>

<head>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script>

</head>

<body ng-app="myApp">

  <script>

    angular.module('myApp', [])

      .controller('myCtrl', ['$scope',

        function($scope) {

          $scope.text = '';

        }

      ]);

  </script>

  <style>.error{color:red}</style>

  <form name="myForm" ng-controller="myCtrl">

    Enter Your Email :

    <input type="email" name="input" ng-model="text" required>

  <span class="error" ng-show="myForm.input.$error.required">

    Required!</span>

  <span class="error" ng-show="myForm.input.$error.email">

    Not valid email!</span>

      <br>

    <br/>My Email is {{text}}

  </form>

</body>

</html>

_____________________________________________________________________________________

output

AngularJS Required Field Validation for textbox

<!doctype html>

<html>

<head>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script>

</head>

<body ng-app="myApp">

  <script>

    angular.module('myApp', [])

      .controller('myCtrl', ['$scope',

        function($scope) {

          $scope.text = '';

        }

      ]);

  </script>

  <style>.error{color:red}</style>

  <form name="myForm" ng-controller="myCtrl">

    Enter Your Name :

    <input type="text" name="input" ng-model="text" required>

    <span class="error" ng-show="myForm.input.$error.required">

      Required!</span>

      <br/>

    <br/>My Name is {{text}}

  </form>

</body>

</html>

________________________________________________________________________________

ng-show : show / hide html contain base on expression 

required : bind with input text type control to validate required field for form

________________________________________________________________________________

output

   

AngularJS work with multiple controller

<!DOCTYPE html>

<html>

<head>

<script

       src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

</head>

<body ng-app="myApp">

       <h2>-----myCtrl1-----</h2>

       <div ng-controller="myCtrl1">I am {{ firstName + " " + lastName

              }}</div>

       <h2>-----myCtrl2-----</h2>

       <div ng-controller="myCtrl2">I am {{ firstName + " " + lastName

              }}</div>

       <script>

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

              app.controller("myCtrl1", function($scope) {

                     $scope.firstName = "Moin";

                     $scope.lastName = "Master";

              });

              app.controller("myCtrl2", function($scope) {

                     $scope.firstName = "Neamat";

                     $scope.lastName = "Master";

              });

       </script>

</body>

</html>

_____________________________________________________________________________________

define ng-app is in body than and than you will get both controller in page body. If you define ng-app for some particular div than both controller my visible to that div only   

_____________________________________________________________________________________

output

AngujaJS $http call jsp page or web services

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

       pageEncoding="ISO-8859-1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<script type="text/javascript" src="Script/angular.min.js"></script>

<script>

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

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

              $scope.contacts =  {};

              var response = $http

                           .get("ContactListProvider.jsp");

              response.success(function(data, status, headers,

                           config) {

                     $scope.contacts = data;

              });

              response.error(function(data, status, headers,

                           config) {

                     alert("AJAX failed!");

              });

       });

</script>

<title>AngularJS Demo</title>

</head>

<body>

       <h2>My Contact</h2>

       <div ng-app="myApp" ng-controller="myCtrl">

              <div ng-repeat="contact in contacts">{{contact.name}}

                     - {{contact.phone}}</div>

       </div>

</body>

</html>

_______________________________________________________________

$http : use in particular scope to call JSP / web services and bind returning JSON object with $Scope.Contacts. if you will get AJAX failed message than please try with full http:// path of contactListProvider.jsp 

$http.get : call page by get method

response.success : is a fuction call when all is well with services or JSP page call and return object will bind with fuction data variable  

_______________________________________________________________

ContactListProvider.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

    pageEncoding="ISO-8859-1"%>

<%

String jsonStr = "[ {name : 'Moin',phone : '123423424'},"+

                    "{name : 'Neamat',phone : '12312313'}, "+

                    "{name : 'Reha',phone : '87897987'} ]";

out.print(jsonStr);

out.close();

%>

_________________________________________________________________

Output