Friday, September 12, 2014

AngularJS: How to implement Service

Here is the simple implementation for Calculator service. I have added two services in controller.js file from previous example and register it in app.js file.


controller.js

/* Define Service */
var appService = angular.module('appService',[]);
appService.service('mathService',function(){
    this.add = function(a,b){
        return a+b;
    };
    this.multiply = function(a,b){
        return a*b;
    };
});
appService.service('calculatorService', function(mathService){
    this.square = function(a){
        return mathService.multiply(a,a);
    };
});


app.js

var configModule = angular.module('configModule',[
    'ngRoute',
    'phoneDetailModule',
    'phoneListModule',
    'appFilter',
    'appService'

]);



HTML Code to invoke that service

Enter a number:
<input type="number" ng-model="number" />
<button ng-click="doSquare()">Square</button>

Thursday, September 11, 2014

AngularJS: How to implement Custom Filter

You can customize/create filter as per your requirement. You have to configure that filter into configuration module.

You just need to add below code in controller.js (this is just for demo purpose) file and add one line in app.js file from previous example.

controller.js 

/* Define Filter */
var appFilter = angular.module('appFilter',[]).filter('checkmark',function(){
    return function(input){
        return input? '\u2713':'\u2718';
    };
});


app.js

var configModule = angular.module('configModule',[
    'ngRoute',
    'phoneDetailModule',
    'phoneListModule',
    'appFilter'
]);

configModule.config(['$routeProvider',function($routeProvider){
    $routeProvider.
        when('/phones',{
            templateUrl: 'Partials/PhoneDetail.html',
            controller: 'PhoneDetailController'
        }).
        when('/phones/:phoneId',{
            templateUrl: 'Partials/PhoneList.html',
            controller: 'PhoneListController'
        }).
        otherwise({
            redirectTo: '/phones'
        });
}]);

AngularJS: How to implement ngRoute

ngRoute is core part for angularjs library. Application can route through ngRoute and it's configure in Module configuration file.

Below is the best and simple implementation for ngRoute.

Index.html

<!doctype html>
<html ng-app="configModule">
<head>
    <title>My Angular App</title>


    <script src="JS\app.js"></script>
    <script src="JS\controller.js"></script>

</head>
<body>

<div ng-view></div>

</body>
</html>

app.js

var configModule = angular.module('configModule',[
    'ngRoute',
    'phoneDetailModule'
]);

configModule.config(['$routeProvider',function($routeProvider){
    $routeProvider.
        when('/phones',{
            templateUrl: 'Partials/PhoneDetail.html',
            controller: 'PhoneDetailController'
        }).
        when('/phones/:phoneId',{
            templateUrl: 'Partials/PhoneList.html',
            controller: 'PhoneListController'
        }).
        otherwise({
            redirectTo: '/phones'
        });
}])


controller.js


var phoneDetailModule = angular.module('phoneDetailModule',[]);
phoneDetailModule.controller('PhoneDetailController',['$scope','$http',function($scope,$http){
    $http.get('JS/phones.json').success(function(data){
         $scope.phones = data;
        });
    $scope.orderPro = 'age';
}]);
phoneDetailModule.controller('PhoneListController',['$scope','$routeParams',function($scope,$routeParams){
 $scope.phoneId = $routeParams.phoneId;
}]);


PhoneDetail.html

<div>
    Search : <input ng-model="query">
</div>
<div>
    <select ng-model="orderPro">
        <option value="name">Alphabetical</option>
        <option value="age">Newest</option>
    </select>
</div>
<ul>
    <li ng-repeat="phone in phones | filter:query | orderBy:orderPro">
        {{phone.name}}
        <p>
            {{phone.snippet}}
        </p>
        <img ng-src="{{phone.imageUrl}}" style="max-width: 50px" >

    </li>
</ul>


PhoneList.html

Detail view for <span>{{phoneId}}</span>

Wednesday, September 10, 2014

AngularJS: Minification Issue

If you think about minification for all function, It may break your functionality.  Below is best example for controller.

var appModule = angular.module('appModule',[]);

appModule.controller('appController', function ($scope, $http) {
    $http.get('js/phones.json').success(function(data){
            $scope.phones = data;
        }
    );
    $scope.orderPro = 'age';
});

Minification will convert your arguments in variable. Below are two different solutions for this problem.

Solution #1

appModule.controller('appController',['$scope','$http',function($scope,$http){
 $http.get('js/phones.json').success(function(data)
 {
     $scope.phones = data;
 });
    $scope.orderPro='age';
}]);


Solution #2

function appController($scope,$http){
    $http.get('js/phones.json').success(function(data){
        $scope.phones = data;
    });
    $scope.orderPro='age';
}
appController.$inject= ['$scope','$http'];
appModule.controller('appController',appController);

AngularJS: introduction to $http.get method

There is no change in HTML file as described in previous lesson.

JS File code:

var appModule = angular.module('appModule',[]);
appModule.controller('appController', function ($scope, $http) {
    $http.get('js/phones.json').success(function(data){
            $scope.phones = data;
        }
    );
    $scope.orderPro = 'age';

});

Phone.json:

[
    {"name":"iPhone","snippet":"Good Phone from json","age":1 },
    {"name":"Windows","snippet":"Above Average Phone from json","age":3 },
    {"name":"Android","snippet":"Average Phone from json","age":2 }
]


AngularJS: Getting Started

HTML File code:

<!doctype html>
<html ng-app="appModule">
<head>
    <title>My Angular App</title>
    <script src="JS\app.js"></script>

</head>
<body ng-controller="appController">
<div>
    Search : <input ng-model="query">
</div>
<div>
    <select ng-model="orderPro">
        <option value="name">Alphabetical</option>
        <option value="age">Newest</option>
    </select>
</div>
<ul>
    <li ng-repeat="phone in phones | filter:query | orderBy:orderPro">
        {{phone.name}}
        <p>
            {{phone.snippet}}
        </p>
    </li>
</ul>
</body>
</html>


JS File Code :


var appModule = angular.module('appModule',[]);

appModule.controller('appController',function($scope){

$scope.phones = [
    {'name':'iPhone','snippet':'Good Phone','age':1 },
    {'name':'Windows','snippet':'Above Average Phone','age':3 },
    {'name':'Android','snippet':'Average Phone','age':2 }
];
    $scope.orderPro = 'age';

});

Wednesday, September 3, 2014

SharePoint 2007 : How to get User Information in HTML

You can get user profile information in HTML page by querying below url and iterate through each element using jQuery.

{Web Application URL}/_layouts/userdisp.aspx?force=true