https://angularjs.org/
What is AngularJs
-
Front end framework
-
Two way data binding
-
jqLite
Design goals
- Decouple DOM manipulation
- Encourage TDD
-
Supports code re-usability
- Dependency injection
- Single Page Applications
Comparison with jQuery
Good to know
- HTML + CSS
- Javascript
ng-app
A software design pattern
Dependency injection
A software design pattern
Directives
AngularJs extends HTML with ng-directives
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body>
<div ng-app="myApp">
<div class="header" ng-controller="basePageController">
<span class="homeIcon" ng-click="exitApp()"></span>
<span ng-hide="!(selection=='clearance')">View Summary</span>
</div>
</div>
</body>
</html>Module
-
A software design pattern to write encapsulated code
-
Where we write pieces of our angular application
-
Makes our code more maintenable, and testable
Routing
A software design pattern
$routeProvider
.when('/clearance', {
templateUrl: 'pages/views/clearance.html',
controller: 'clearanceController'
})
.when('/summary', {
templateUrl: 'pages/views/summary.html',
controller: 'summaryController'
})
.otherwise({ redirectTo: '/clearance' });Scope
A software design pattern
$routeProvider
.when('/clearance', {
templateUrl: 'pages/views/clearance.html',
controller: 'clearanceController'
})
.when('/summary', {
templateUrl: 'pages/views/summary.html',
controller: 'summaryController'
})
.otherwise({ redirectTo: '/clearance' });Expression
AngularJs binds scope data into the html using expressions
{{ expression }}
<div ng-app="myApp" ng-init="firstName='Bharath';lastName='Kasinathan'">
<p>The full name is: {{ firstName + " " + lastName }}</p>
</div>Filters
Angular way of transforming data
<div ng-app="myApp" ng-init="firstName='Bharath';price = '58';">
<p>The name is: {{ firstName | uppercase }}</p>
<p>Price: {{ price | currency }}</p>
</div>References
-
http://fastandfluid.com/publicdownloads/ AngularJSIn60MinutesIsh_DanWahlin_May2013.pdf
Copy of Copy of Copy of Copy of Copy of deck
By Bharath Lenin
