- Most popular and powerful web application framework. AngularJS is backed by Google.
- Learn & Understand better
- Software development has become easier. & powerful in many ways. AngularJS is a new paradigmn for web development. It is tough to learn because it uses Concepts and Vocabulary that can be difficult to understand
-
Real world scenarios are difficult than that is learning in a book.
Problem that AngularJS is trying to solve is "Complexity of managing both DOM, HTML, all of the logic and variables/data manually".
With out AngularJS we are doing following management in Java Script. As application becomes big it will become too complex and overwhelming.
- Manipulating DOM
- Responding to events
- Updating variables as needed.
With AngularJS, idea is to update one side and other side gets updated automatically. Update JavaScript, HTML gets updated and vice versa.
Model: Its data/variables.
View: HTML page
Controller or ViewModel or MV*: Binds Model & View. This is what AngularJS has built with help of Custom attributes.
Dependency Injection: Giving function an object instead of function creating itself.
$scope object injected by AngularJS into controller will be the middle piece between View & Controller. $scope defines the data that go back and forth between what is defined in Controller function and view.
Interpolation: Creating a String by combining strings and placeholders.
Directive: An instruction to AngularJS to manipulate a piece of the DOM.
- ng-if
- ng-show
- ng-class
- ng-repeat
- ng-click
- ng-cloak
XMLHTTPREQUEST
Two way data bindings: ng-model directive
Event Model: Java script has event loop. It waits for an event to occur and responds to the event and executes the callback function. AngularJS also keeps track of events and handles them.
Watchers & Digest Loop: Loop similar to event loop in AngularJS is Digest Loop. It checks if any single variable changed in watchlist, if so, it updates every other place(both in DOM & html.
AngularJS watches the natural events on the page, and it has big list of everything that possibly can change. It updates the DOM if any thing has changed.
Common Directives:
ng-model
ng-if
ng-show, ng-hide
ng-class
ng-repeat
ng-click
ng-cloak - hides the element until AngularJS works on it
Single Page Applications:
- Multiple Controllers & Multiple Views
- HTML Define anchor elements <a id="bookmark"> this is bookmark </a>
- Jump to bookmark
<a href="#bookmark"> Go to Bookmark</a>
# is fragment identifier within html document.
hashchange is a Browser Event that AngularJS uses
window.addEventListener('hashchange', function(){
console.log('hashchanged'+window.location.hash)
});
$location.path() service will give hash location in url
- $route for Routing helps in buidling single page applications. This is a Separate module and we need to put dependency when defining the module/app
- Templates
- Controllers
Sample code:
var myApp=angular.module('myApp',['ngRoute','ngResource']);
myApp.config(function($routeProvider) {
$routeProvider
.when('/',{
templateUrl:'pages/main.html',
controller:'mainController'
})
.when('/second/:num',{
templateUrl:'pages/second.html',
controller:'secondController'
})
});
myApp.controller('mainController',function($scope,$location,$log,$http) {
$log.info($location.path());
});
myApp.controller('secondController',function($scope,$location,$log,$http,$routeParams) {
$log.info($location.path());
$scope.num=$routeParams.num;
$scope.name="second";
});
Creating a Service:
myApp.service('vservice',function() {
var self=this;
this.name='Venkat Desu';
this.namelength=function(){
return self.name.length;
}
});
Custom Directives(Reusable Components):
myApp.directive('searchResult',function() {
return{
restrict: 'AECM',
template: 'any html code',
replace: true,
scope: {
personName:"@"
}
}
});
<search-result></search-result>
<div search-result></div>
Normalize: To make consistent to a standard.
Normalized attribute names
Module
Apps
Controllers (controller for view)
directives
routes
services
- $scope, $log, $filter, $route, $http, $
