Tuesday, February 3, 2015

Angular test primer in Jasmine

To test angular controller in Jasmine, need to use the angular mocks to inject module and controller
Then in the controllerSpec test js file, we can inject the controller and scope

describe('expense controller', function () {

var $controllerTestConstructor;
var scope;

beforeEach(module('app'));

beforeEach(inject(function($controller, $rootScope){



$controllerTestConstructor = $controller;

scope = $rootScope;

}));
 
it('should have three expense item', function () {
var ctrl = $controllerTestConstructor('expenseController', { $scope: scope });

expect(ctrl.expenseItems.length).toBe(3);

});

});
 

Angular module dependency injection

Angular provides the module functions to do the service injection. In this way, we can build our own service functions and inject into the controller to load it.

We can set up the module first, then call the app.js to set up the both module together, this is the example shows in the angular tutorial site.
https://docs.angularjs.org/tutorial/step_11

Here is the example for this way, there is a controller and it depends on the dataService to load the data. Each angular.module call is in its own js file.

angular.module('app', ['services', 'controllers']);

angular.module('services', [])
        .factory('expenseDataService', ['$http', expenseDataService]);

angular.module('controllers', [])
        .controller('expenseController', ['expenseDataService', expenseController]);

Also there is a simplified version. But you need to put app.js at first in the html page. In this way, all the dependency are created in the app module directly.
angular.module('app', []);

angular.module('app')
        .factory('expenseDataService', ['$http', expenseDataService]);

angular.module('app')
        .controller('expenseController', ['expenseDataService', expenseController]);

The full file is attached as a zip file.expense_app.zip

Sunday, February 1, 2015

How to install / use bower in Visual studio 2013 with proxy settings

Bower is very popular to manage client script package, here is the steps to set it up to use it in visual studio 2013.

1. Open package management console and search bower (not bower.js), install it.
    After it is installed, you should be able to open a command prompt and go to your visual studio project folder, then run "bower install <package>" from there.

2. By default, Bower installed the package into a folder called bower_components under the project folder. Usually we want to manage the packages better and put them under scripts/lib folder.

To do this, create a file named the .bowerrc and add the line,
{

"Directory":"Scripts/lib",
 
}

This will install all the packages into the scripts/lib folder. By default, windows doesn't allow you create a file starts with period (.), then you can create any temp text file and rename it in the command window.

3. If the visual studio runs internally behind a firewall, you need to set up the proxy for both Bower and Node.
   
    In the .bowerrc file, add the line,
"https-proxy": "http://<domain>%5C<user>:<passsword>@<proxy_server>:<proxy_port>/"
    Edit the node.cmd under .bin folder to add the lines,
SET HTTP_PROXY=http://1:1@192.168.11.22:8080
SET HTTPS_PROXY=http://1:1@192.168.11.22:8080