AngularJS 1.0
– AngularJS is a single page application framework
– AngularJS provides a robust 'SPA' framework for building robust client-centric applications.
– Views, Controllers & Scope
– Modules, Routes, and Factories
– AngularJS is a one core library – no dependencies on others.
What is SPA?
– Where we will have a shell page and loads multiple views into that.
Features:
– Two-way data binding
– MVC concepts support
– Routing techniques
– Testing
– JqLite(jquery for DOM manipulation)
– Support for templates(when we go for data binding)
– Share code(reusability) through factories and other services
– Databinding with ViewModels
– Directives, Validations, Dependency Injections
– Key Features like Directives, two-way data binding, views, controllers, scope, modules, and routes.
Directives – It's a way to teach html new tricks
ng-app : it initializes the angular app
ng-model : binds an input to a property on the scope using ngModel Controller.
databinding expression : {{}}
ng-init ="names=[‘siva’,’kamal’]"
ng-repeat : Instantiates a template once per item from a collection.
ng-bind : Used to replace the text context of the html element with value of a given expression.
ng-controller : Attaches the controller class to the view.
ng-view : placeholders for view.
Filters: Selects a subset of items from array & returns it as a new array using pipe operator(|)
{{filter-expression | filter:expression:comparator}}
orderBy, uppercase, limitTo, number, date, currency
View, Controllers & Scope(viewModel – integrate between view & controller)
-$scope is the glue(viewModel) between a controller and a view.
<div data-ng-controller="SimpleController">
<li data-ng-repeat="cust in customers"> – Accessing the $scope
<script>
function SimpleController($scope){
$scope.customers =[{name:’Koka’, City:’VA’},{name:’siva’, city:’az’}]
}
Modules, Routes, Factories & Services
-Module can have config function & this config can be used to define different routes.
-Two things can be defined in Route, view & controller
-Controller can have factory or services to get the data, manipulate the data, CRUD operations.
-On views, we have directives to support.
<html ng-app="moduleName">
var demoApp = angular.module('demoApp',[]);
[] is where you can add dependency modules(dependency injection) like helper module.
Defining Routes :
var demoAPP = angular.module('demoApp',[]);
demoApp.config(function($routeProvider)){
$routeProvider
.when('/',
{
controller:'SimpleController',
templateUrl:'view1.htm'
})
.when('/partial',
{
controller:'SimpleController',
templateUrl:'view2.htm'
})
.otherwise({
redirectTo:'/'
})
});
demoApp.controller('simpleController', function($scope)){
$scope.customers =[{name:koka,city:va},{name:siva,city:va}]});
Factory, Service & Providers
– Allows us to encapsulate common functionalities. Difference is the way & which they get the data from backend system.
– Factory injected in to the controller at runtime.
var demoApp = angular.module('demoApp',[])
.factory('simpleFactory',function(){
var factory = {};
var customers = […];
factory.getCustomers = function(){
return customers;};
return factory;})
.controller('simpleController', function($scope, simpleFactory){
$scope.customers = simpleFactory.getCustomers();
})
$rootscope : rootScope avaliabile globally
$scope : only avaliable to the controller that has created and its children.
