Skip to main content

8 posts tagged with "Angular"

View All Tags

Basics of Angular: Understanding Components

· 2 min read

Angular is a powerful front-end framework that allows developers to build dynamic, modern web applications. One of the fundamental building blocks of an Angular application is the Component. In this blog post, we will explore what an Angular component is, how it works, and different ways to define and style it.

Component Library With Ionic+Angular

· 3 min read

1. Summary​

A component library is a collection of logically group components so that one can explore, select components and helps in maintaining consistent design across projects. nag-ionic-lib built using following components.

Angular Vs React which one you use

· 2 min read

Technology evaluation is some times challenging when we have best technologies available. Let us see who wins Angular or React.
Features

Framework / Ecosystem​

Angular 4

Angular 4 is an MVC Framework itself.

React

React is only a view library one needs to choose the different libraries to make the Best Ecosystem. Refer my post for choosing the better parts to build a React Echo system

Summary: It takes time to build Ecosystem in React. Once built developers need not worry about the Ecosystem.

Example: $on and $broadcast in angular

· One min read

With out Arguments​

To $broadcast use the $rootScope:

$scope.startCamera = function() { $rootScope.$broadcast('camera-started'); }

To receive, use the $scope of your controller:

$scope.$on('camera-started', function(event, args) { // do something });

With Arguments​

To pass arguments when you $With out Arguments:

$rootScope.$broadcast('camera-started', { any: {} }); To receive arguments :

$scope.$on('camera-started', function(event, args) { var anyArg = args.any;  // do something });

Ionic – AngularJS templates

· One min read

The following code snippets demonstrates the format/template which can be used in Ionic or in Angularjs Applications

/**************************
 * Controller 
 **************************/

(function () {
  'use strict';
  var injectParams = [ /* 'dependency1' */];
 
  function SampleCtrl( /* dependency1 */) {
    var SampleVm = this;
 
    //Bindable Properties and functions
    SampleVm.dummyProperty = '';
    SampleVm.dummyBindableFunc = dummyBindableFunc;
 
    //Functions
    function dummyBindableFunc() { 
    }
 
    function myNormalFunc() { 
    } 
  };
 
  SampleCtrl.$inject = injectParams;
  angular.module('app.myModule').controller('SampleCtrl', SampleCtrl);
})();


/**************************
 * Factory 
 **************************/
(function () {
  'use strict';
  var injectParams = [ /* 'dependency1' */];
 
  function sampleFactory( /* dependency1 */) {
    var exports = {
      getData: getData
    };
 
    return exports;
    ////////////////
 
    function getData() { 
    } 
  }
 
  sampleFactory.$inject = injectParams;
  angular.module('app.myModule').factory('sampleFactory', sampleFactory);
})();

/**************************
 * Filter 
 **************************/
(function () {
  'use strict';
 
  function sampleFilter() {
 
    return sampleFilterFunc;
    ////////////////
 
    function sampleFilterFunc(parameters) {
      return parameters;
    } 
  }
 
  angular.module('app.myModule').filter('sampleFilter', sampleFilter);
})();

/**************************
 * Directive 
 **************************/
(function () {
  'use strict';
  var injectParams = [ /* 'dependency1' */];
 
  function customDirective( /* dependency1 */) {
 
    var directive = {
      link: link,
      restrict: 'EA',
      replace: true,
      templateUrl: 'app/myDirective/myDirective.html',
      controller: 'customController',
      controllerAs: 'custom'
    };
    return directive;
 
    function link(scope, element, attrs) {
    }
  };
 
  customDirective.$inject = injectParams;
  angular.module('app.myModule').directive('customDirective', customDirective);
})();