Angular js UI snippets

Logging in AngularJS

//Enable Debug logging

angular.module("app-config-ui").config(function($logProvider){

  $logProvider.debugEnabled(true);

});

angular.module('logExample', [])

.controller('LogController', ['$scope', '$log', function($scope, $log) {

  $scope.$log = $log;

  $scope.message = 'Hello World!';

  $log.debug("My Debug Message")

}]);

Using ng-class

Usage 

 ng-class="{ 'class': expr}"

Provide an expression to evaluate the class conditionally

Example

 ng-class="{'caret': menu.subMenus && menu.subMenus.length > 0}"

Evaluating dynamic Html's

You often add html code to your webpage dynamically through javascript code. 

You will need to compile the html using angular's $compile function for angular to evaluate the dynamic code

For example you add 

$('<td/>').html("<div ng-model="name"> </div>")

More documentation can be found here

Modal window using UI bootstrap

Bootstrap and angular do not work that well together and hence the UI-Bootstrap angular module.

Install angular bootstrap to your app by 

bower install angular-bootstrap

Add ui-bootstrap as a dependency to your angular app

var mainApp = angular.module("mainApp", ['ngRoute', 'ngResource', 'ui.bootstrap', 'appcore']);

To programmatically  invoke a modal window here is the code snippet

You can pass in a controller too to handle the modal function

  var modalInstance = $modal.open({

                    scope: $scope,

                    controller: 'ModalController',

                    templateUrl: 'lModal.html',

                    size: 'lg',

                    resolve: {

                        gridDetailId: function() {

                            return gridDetailId;

                  }

           }

  });

angular.module('app-config-ui').controller(

    'ModalController',

    function($scope, $log, $resource, $modalInstance, gridDetailId) {

});

Select html element using ng-options

Here are a few tips and tricks for a html select element

<select class='form-control' ng-model='selectedval' 

 ng-options='item.id as item.name for item in options' ng-required='required'><option value=''>-- select --</option></select>

Displays by the name attribute on the select field and matches the model value with the id field

The selectedVal will be "1" or "2" based on the below data model

data model

$scope.options = [{"id":"1","name":"apple"},{"id":"2","name":"orange"}];

JSON Filters

In situations where you would like to filter properties from getting serialized dynamically per request Jackson provides a way through JsonFilter's

http://wiki.fasterxml.com/JacksonFeatureJsonFilter

Here is an example code to create a dynamic filter

//Add the filter to the list of filters with id. In this case its "enableClientBasedFiltering"
FilterProvider filters = new SimpleFilterProvider().addFilter("enableClientBasedFiltering", theFilter);
objectMapper.setFilters(filters);

If the bean is tagged with JsonFilter Annotation example. @JsonFilter("myFilterId") , then Jackson calls the associated filter for evaluation per request

Jackson does throw an exception when filter is not found. You would have to ensure that the bean marked with JsonFilter annotation should  have the filter defined in the object mapper in its classpath

Docker tutorial

Off late I have been hearing good things about docker. So I decided to figure out what it is and figure out if we could solve some of our problems

Here are a few basics about docker

Running a docker image

 >docker run -p 8080:8080 -v /var/myvolume myimage

The above command fetches the latest image from the myimage repo from docker hub if this is not present in your local workspace

-v specifies that location of the volume

If you would like to map a local volume into your docker container you would have to mention

-v  /<local path>: <container path >

Saving a docker image

Assuming you have done some changes to your docker image you can save your changes by committing your image  

use the command

 > docker ps to get the container id

and then run

> docker commit <container-id> myimage-1

* Keep in mind the contents of the volume are not saved while committing the image