We have many frameworks like JQUERY, Angular JS, Mustache, etc., in JavaScript. Based on the project need, I had an opportunity to work on AngularJS framework. Based on the advantages of Angular JS framework, I have extended its usage to other projects.
Why AngularJS?
- Single Page Application: We can build a single page application by using RouteProviders or StateProviders. o RouteProviders – We can load all the dependencies (i.e., js, css) in html and can shift to all the other pages through routing o StateProviders – We can load dependency for a state and can shift to all the other pages through state routing.
- MVC Support: As it supports MVC framework, we can manage manipulations easily in html and JS files.
- Data Models: It is very easy to show data model by using “ng-repeat” without any coding in JavaScript and we can handle it in html itself. We can show the whole response of JSON from API as expected through ng-repeat.
- Directives: By using directives, we can create customized tags and use it anywhere in the app. We can include any html page directly by using inbuilt directive “ng-template.” We have created customized directives like:
o focusDiv – to focus on a particularDiv
Example:-
appName.directive('focusMe',function() {
return {
link: function(scope, element, attrs) {
var model = $parse(attrs.focusMe);
scope.$watch(model, function(value) {
if(value === true) {
$timeout(function() {
element[0].focus();
});
}
});
});
}
});We can use in html as <inputng-model=’testId’ focus-me=’testId’>
o customPopover – to show popup data by loading dynamically from API response
o leftMenu/topMenu – to load left/top menu html into main page
Example:-
appName.directive('topmenu', function() {
return {
restrict: 'E',
templateUrl: 'pages/top-menu.html',
replace: true
}
});
We can use in html as <topmenu></topmenu>
- Events:We have built-in events and we can create customized events by using directives. Built-in Events including Mousedown, ngMouseenter, ngClick, ngDblClick ,ngChange, ngKeyDown, etc. We have created events for an element in directives as draggable, click, keypress, focus, etc.
Example:-
appName.directive('eventsdirective', function() {
return {
restrict: 'A',
replace: true,
link: function(scope, element, attrs) {
element.draggable({
cursor: "move",
})
element.bind('mouseover', function() {
//we can do whatever we need in mouseover here
});
}
};
});We can use in html like <div eventsdirective></div>
- Filters: We can create our own filters or we can use built-in filters by using pipe character followed by the filter. Built-in Filters include Filter, Currency, Date, Lowercase, Uppercase, JSON, Number, OrderBy, LimitTo, etc. We have created filters to filter data with atleast one field, i.e.,
o searchFilter – to filter rows in a list, add filtername followed by fields to search.
Example:-
(ng - repeat = "listObj in myList =
(myListBackup | menuFilterCustomSearch: myListBackup: filed1: field2)")o menuFilterCustomSearch is my custom directive name where it filters based on field1 and field2 values
- Services: We can create our own services or we can use built-in services by injecting in any controller. Built-in Services include $parse, $timeout, $interval, $window, $location, $cookies, etc.
- Data Binding: We are able to bind html elements through js easily by using scope to change any element value or any input field value,like $scope.modelName = value.
Example:-
<div>{{modelValue}}</div>
<div ng-bind=’modelValue’></div>
We can bind value to div from controller as $scope.modelValue = ‘test’
- Less code and more functionality
- It supports all major browsers and smart phones including Android, IOS based phones/tablets
- It is an ideal partner with any server technology