Skip to main content

Posts

Showing posts from November, 2015

ng-style in angular directive

An ng-style is a directive to use css style properties and all component is to make design. The design properties is make controller scope object is created and than the object is set to ng-style value. Syntax: <div ng-style="expression"></div> AngularScript: <div ng-app="colorApp"> <div ng-controller="ColorCtrl">     <input type="button" value="set color" ng-click="demo()">       <span ng-style="myStyle">Sample Text</span>     <pre>myStyle={{myStyle}}</pre> </div> </div> var app = angular.module('colorApp',[]); app.controller('ColorCtrl', function($scope){   $scope.myStyle = {};      $scope.demo = function(){  $scope.myStyle = {      'color': 'green',      'font-size': '42px',      'font-family': 'Arial,Helvetica Neue,Helvetica,sans-serif'    };  } }); span {     color: re

Cachefactory in angularjs

$cacheFactory :             A cache is object, this will store and get cache data. Why we can use cache ? the reason is increase the speed of retrieve data access. Because increase the performance of application. This Cache have 5 methods: info() - The details about cache object properties. put(key, value) - Push the details of key,value object; get(key) - Get the details of pushed objects; remove(key) - Remove a specific object; removeAll() - Remove all pushed objects; destroy() - Clear the cache object; Angular Code : <div ng-app="cacheApp">     <div ng-controller="CacheCtrl">         Data {{information()}}     </div> </div> var app = angular.module("cacheApp", []) app.factory('myCache' , function($cacheFactory) {     return $cacheFactory('mycache' , { capacity : 3 }) }); app.controller('CacheCtrl', function($scope, myCache) {     var data = {id:10, name:&q

ng-include in angularjs

Ng-include Directive :         An ng-include is use to inject a DOM in any html pages. This inject DOM component is active scope in mention or declared controllers.        A purpose of ng-include is reuse the DOM component in more than pages. Say for example header page section is common to the all pages means, This DOM element move to one file and than this file include all the pages. <ng-include src="" onload="" autoscroll="">   or <div ng-include="" onload="" autoscroll=""> src  - give your dom component file path. onload - any action you will make on load the dom autoscroll - if need scroll you can apply here Sample: <div ng-include="'templates/include/header_tpl.html'"></div>  or <div ng-include="'templates/include/header.tpl'"></div> .tpl or .html you save the template file format. These format is support