Angular ng-repeat scope

Need to know that angular ng-repeat directive actually create child scope for each element.
so if you want reference the parent $scope value need to use $parent

<span ng-show="item.name == currentDbName"><input type="text" name="newDbValue" ng-model="$parent.newDbValue" />{{$parent.newDbValue}}</span>

Or else if you want to update the repeating item value, you need to use $index

<div ng-repeat="name in dbnames track by $index">
        <input type="text" ng-model="dbnames[$index]" />
</div>

the "track by $index" is new since Angular1.2 to make sure the text box won't lose focus for each key stroke

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

Rebind AngularJS in ajax call

Just a quick tip when I am trying to working on the angular with jquery ajax.

After the data is assigned in an ajax call back function, angular won't be able to monitor change,
in this case, $scope.$apply() will be needed to reflect data binding.

Correctly add the javascript intellisense for SharePoint 2013 for Visual studio 2012

In visual studio 2012, it is quite easy to add a javascript intellisense.

Add a scripts folder and in the folder add an _reference.js file to reference the javascripts.
Such as,
/// <reference path="/LAYOUTS/My_custom_package/jquery-1.10.1.js" />
For adding the SharePoint 2013 client javascript library, the below codes are needed.
/// <reference name="MicrosoftAjax.js" />
/// <reference path="~/_layouts/15/init.js" />
/// <reference path="~/_layouts/15/SP.js" />
/// <reference path="~/_layouts/15/SP.Runtime.js" />
/// <reference path="~/_layouts/15/SP.UI.Dialog.js" />
/// <reference path="~/_layouts/15/SP.Core.js" /> 
 

SharePoint Load ClientContext

This how to load ClientContext

var clientContext;
var website;

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', sharePointReady);

// Create an instance of the current context.
function sharePointReady() {
    clientContext = SP.ClientContext.get_current();
    website = clientContext.get_web();

    clientContext.load(website);

    clientContext.executeQueryAsync(onRequestSucceeded, onRequestFailed);
}

function onRequestSucceeded() {
    alert(website.get_url());
alert(g_wsaSiteTemplateId );
}
function onRequestFailed(sender, args) {
    alert('Error: ' + args.get_message());
}

Javascript structural pattern

1. Prototype Pattern,

<script type="text/javascript">
    var Calculator = function (id) {
        this.id = id;
    };
    Calculator.prototype = {
        add: function (x, y) {
            var result = x + y;
            $(this.id).html("<br>" + result + "</br>");
        },
       
        multiply: function (x, y) {
            var result = x * y;
            $(this.id).html("<br>" + result + "</br>");
        }
    };

    $(document).ready(function () {
        var c = new Calculator('#a');
        c.add(12, 32);
        c.id = '#b';
        c.multiply(2, 10);
       
    });
</script>

<div id="a"></div>
<div id="b"></div>

Also arguments can be used for variable length of parameters within function to be able to do things like test(a), test(a, b), test(a, b, c) etc...

2. Module Pattern - to hide the private property/method

var Calculator = function(id) {
    //private members
    var id = id;
    //public members
    return {
         add: function (x, y) {
               $(id).html( x+y);
         }
    };
};

Client:
var c = new Calculator('#a');
c.add(3, 5);

3. Revealing Module Pattern
var calculator = function(id) {
       var id = id;
       var doAdd = function (x, y) { $(id).html (x + y);
       return {
             add  : doAdd;
       }
         
}('#a'); //use this to self invoking.

Client:
calculator.add(3, 5);

4. Revealing Prototype Pattern
var Calculator = function (eq) {
    //this. variables.
};

Calculator.prototype = function() {
     // private members
     var doAdd = function (x, y) {return x + y;}
     return {
           add : doAdd;
     };
}();

asp.net MVC4 - $.getJSON with controller and knockout

In this scenario, I am trying to call a backend controller to load the data from backend.
Then the data will be returned as a JSON data to web and mapping back to a knockout view model for binding. And the knockout binding section should be shown by jquery ui dialog and update back to controller for saving.

Here are the listed issues that I got,

- In controller, return Json(data, JsonRequestBehavior.AllowGet), or else $.getJSON call back function won't be triggered if you use get.

- In controller, use new JavaScriptSerializer().Seralize(Model) to return a JSON string representation of data. The string will be used for knockout to load to viewModel

- knockout mapping is a plug-in for automatically mapping the data from JSON to view model. it can be downloaded here.

- Use the following code to create the viewmodel and applybinding
var koModel = ko.mapping.fromJSON(data);
ko.applyBindings(koModel);