Always loved JavaScript and client side scripting ( where appropriate <grin> ) – so when we had a new green field project to start, looked to what the best-in-class technologies were – settled on AngularJS (@angularjs).
It is a client-side MVC (Model-View-Controller) pattern and it rocks for making SPA (Single-Page-Applications) that emphasize responsiveness. Take a look at either the AngularJS site, or there are a couple great AngularJS videos on Pluralsight – specifically “AngularJS Fundamentals” and “AngularJS for .NET Developers”.
I know that I have a ton to learn about AngularJS – and wanted to share what I’m learning along the way…
Specifically, have a page that has a list of items to be displayed – and want to filter them by a parameter based on what the user clicked. So in AngularJS we can separate showing the items to be displayed into one controller – the “CollectionController” – and the filters to be applied into another controller – the “FilterController”. Found many examples / discussion on how to communicate between the controller, but some seemed to be way overkill or confusing – so got the following code crafted – and wanted to share as it turned out pretty slick! 🙂
To boot, have the live code running on JSFiddle – which again, if you haven’t played with is WAY awesome!
http://jsfiddle.net/lancelarsen/qjkyM/
So here is the HTML…
<div ng-app>
<div ng-controller="FilterController">
<div>
<span ng-repeat="item in filterCollection"
ng-class="{ 'selectedClass': $index == selectedIndex }"
ng-click="itemClicked($index)">
[ {{ item }} ]
</span>
</div>
</div>
<br/>
<div ng-controller="CollectionController">
<div> <span
ng-repeat="item in itemCollection | filter:sharedData.filterOn">
[ {{ item }} ]
</span>
<br/>Index = {{ sharedData.filterIndex }}</div>
</div>
</div>
And here is the JavaScript…
var app = angular.module('myApp', []);
app.service('shared', function () {
//----------------------------------------------------------------------
// Shared data object - can easily add additional elements
//----------------------------------------------------------------------
var sharedData = {
filterOn: 'A',
filterIndex: 0
};
return {
//----------------------------------------------------------------------
// Set field methods, corresponding to elements in shared data
//----------------------------------------------------------------------
setFilterOn: function (v) {
sharedData.filterOn = v;
},
setFilterIndex: function (v) {
sharedData.filterIndex = v;
},
//----------------------------------------------------------------------
// Update method retrieves all shared data values
//----------------------------------------------------------------------
update: function () {
return sharedData;
}
}
});
app.controller('FilterController', function ($scope, shared) {
//----------------------------------------------------------------------
// Update method retrieves all shared data values
//----------------------------------------------------------------------
$scope.sharedData = shared.update();
$scope.filterCollection = ["A", "B", "C", "D"];
$scope.selectedIndex = 0;
$scope.itemClicked = function ($index) {
console.log($index);
$scope.selectedIndex = $index;
shared.setFilterIndex($index);
shared.setFilterOn($scope.filterCollection[$index]);
}
});
app.controller('CollectionController', function ($scope, shared) {
//----------------------------------------------------------------------
// Update method retrieves all shared data values
//----------------------------------------------------------------------
$scope.sharedData = shared.update();
$scope.itemCollection =
["Item A1", "Item A2", "Item A3", "Item B1", "Item B2",
"Item C1", "Item C2", "Item C3", "Item D1", "Item D2"];
});
What about IE8 users? Wanted to go with Angular myself. Ended up choosing Kendo UI because of IE8 issue.