Your SlideShare is downloading. ×
AngularJS Basics with Example
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

AngularJS Basics with Example

23,306
views

Published on

AngularJS presentation covering basic ideas and concepts of the framework with vivid example.

AngularJS presentation covering basic ideas and concepts of the framework with vivid example.

Published in: Technology

2 Comments
16 Likes
Statistics
Notes
No Downloads
Views
Total Views
23,306
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
784
Comments
2
Likes
16
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 02 AngularJSFramework AnalysisPublic Code Repository by Sergey N. Bolshchikov http://bolshchikov.net sergey.bolshchikov@new-proimage.com New ProImage, 2012
  • 2. Outline I. IntroductionII. Philosophy
  • 3. Outline I. IntroductionII. Philosophy ay od et tlin in ou ive No t d J us
  • 4. IntroductionI want to build well structured and dynamic web application.Header-Navigation Bar Content Wrapper click click Tree ContentFooter
  • 5. IntroductionTraditional solution: < 37% > 63% LOC LOC Javascript HTML
  • 6. Philosophy● Angular is what HTML could have been if it had been designed for applications.● HTML is a great declarative language for static documents. It does not contain much in the way of creating application.● Building web-applications is an exercise in what do I have to do, so that I trick the browser in to do what I want.● Thats why we have frameworks - set of utility functions and libraries for DOM manipulation.● Angular takes another approach.● Angular teaches the browser new syntax.
  • 7. IntroductionAngularJS solution: > 41% < 59% LOC LOC HTML Java script
  • 8. Static HTML<!doctype html><html lang="en" ng-app><head> <meta charset="utf-8"> <title>My AngularJS App</title></head><body> <table class="table table-stripped"> <thead> <tr> <th>ID</th><th>Complete</th><th>Name</th><th>Deadline</th> </tr> </thead> <tbody> <tr> <td>1001</td><td>false</td><td>Do Groceries</td><td>01/08/12</td> </tr> <tr> <td>1002</td><td>false</td><td>Barber the cat</td><td>01/08/12</td> </tr> </tbody> </table></body></html>​ See example live
  • 9. Declarative HTML<!doctype html><html lang="en" ng-app><head> <meta charset="utf-8"> <title>My AngularJS App</title></head><body> <table class="table table-stripped" ng-controller="TodoCtrl"> <thead> <tr> <th>ID</th><th>Complete</th><th>Name</th><th>Deadline</th> </tr> </thead> <tbody> <tr ng-repeat="todo in todos"> <td ng-click="setTrue(todo.id)">{{todo.id}}</td> <td>{{todo.done}}</td> <td>{{todo.name}}</td> <td>{{todo.deadline}}</td> </tr> </tbody> </table></body></html>​​ See example live
  • 10. Declarative HTML<!doctype html><html lang="en" ng-app><head> <meta charset="utf-8"> <title>My AngularJS App</title></head><body> <table class="table table-stripped" ng-controller="TodoCtrl"> <thead> <tr> <th>ID</th><th>Complete</th><th>Name</th><th>Deadline</th> </tr> </thead> <tbody> <tr ng-repeat="todo in todos"> <td ng-click="setTrue(todo.id)">{{todo.id}}</td> <td>{{todo.done}}</td> <td>{{todo.name}}</td> <td>{{todo.deadline}}</td> </tr> </tbody> </table></body></html>​​
  • 11. Declarative HTML<!doctype html><html lang="en" ng-app><head> <meta charset="utf-8"> <title>My AngularJS App</title></head><body> <table class="table table-stripped" ng-controller="TodoCtrl"> <thead> <tr> <th>ID</th><th>Complete</th><th>Name</th><th>Deadline</th> </tr> </thead> <tbody> <tr ng-repeat="todo in todos"> <td ng-click="setTrue(todo.id)">{{todo.id}}</td> <td>{{todo.done}}</td> <td>{{todo.name}}</td> <td>{{todo.deadline}}</td> </tr> </tbody> </table></body></html>​​
  • 12. Declarative HTML<!doctype html><html lang="en" ng-app><head> <meta charset="utf-8"> <title>My AngularJS App</title></head><body> <table class="table table-stripped" ng-controller="TodoCtrl"> <thead> <tr> <th>ID</th><th>Complete</th><th>Name</th><th>Deadline</th> </tr> </thead> <tbody> <tr ng-repeat="todo in todos"> <td ng-click="setTrue(todo.id)">{{todo.id}}</td> <td>{{todo.done}}</td> <td>{{todo.name}}</td> <td>{{todo.deadline}}</td> </tr> </tbody> </table></body></html>​​
  • 13. Declarative HTML<!doctype html><html lang="en" ng-app><head> <meta charset="utf-8"> <title>My AngularJS App</title></head><body> <table class="table table-stripped" ng-controller="TodoCtrl"> <thead> <tr> <th>ID</th><th>Complete</th><th>Name</th><th>Deadline</th> </tr> </thead> <tbody> <tr ng-repeat="todo in todos"> <td ng-click="setTrue(todo.id)">{{todo.id}}</td> <td>{{todo.done}}</td> <td>{{todo.name}}</td> <td>{{todo.deadline}}</td> </tr> </tbody> </table></body></html>​​
  • 14. MVCAngular says:"There are many ways to structure the code for anapplication.For Angular apps, we encourage the use of the Model-View-Controller (MVC) design pattern to decouple the codeand to separate concerns.With that in mind, lets use a little Angular and JavaScript toadd model, view, and controller components to our app."
  • 15. Controller○ a controller is a JavaScript function○ It contains data○ It specifies the behavior○ It should contain only the business logic needed for a single view.
  • 16. Controller<table class="table table-stripped" ng-controller="TodoCtrl">function TodoCtrl(scope) { scope.todos = [ { id: 1001, done: false, name: Do Groceries, deadline: new Date() }, { id: 1002, done: false, name: Barber the cat, deadline: new Date() }]; scope.setTrue = function(id) { var el = (function(id){ for (var i=0; i<scope.todos.length; i++) { if (scope.todos[i].id === id) { return scope.todos[i] } } })(id); el.done = true; }}TodoCtrl.$inject = [$scope];
  • 17. Controller<table class="table table-stripped" ng-controller="TodoCtrl">function TodoCtrl(scope) { scope.todos = [ { id: 1001, done: false, name: Do Groceries, deadline: new Date() }, { id: 1002, done: false, name: Barber the cat, deadline: new Date() }]; scope.setTrue = function(id) { var el = (function(id){ for (var i=0; i<scope.todos.length; i++) { if (scope.todos[i].id === id) { return scope.todos[i] } } })(id); el.done = true; }}TodoCtrl.$inject = [$scope];
  • 18. Controller<table class="table table-stripped" ng-controller="TodoCtrl">function TodoCtrl(scope) { scope.todos = [ { id: 1001, done: false, name: Do Groceries, deadline: new Date() }, { id: 1002, done: false, name: Barber the cat, deadline: new Date() }]; scope.setTrue = function(id) { var el = (function(id){ for (var i=0; i<scope.todos.length; i++) { if (scope.todos[i].id === id) { return scope.todos[i] } } })(id); el.done = true; }}TodoCtrl.$inject = [$scope];
  • 19. Scope○ an object that refers to the application model (application itself)○ an execution context for expressions like {{ todo.name }}○ Scopes are arranged in hierarchical structure which mimic the DOM structure of the application○ Scopes can watch expressions and propagate events
  • 20. Scope<html ng-app> root Scope 01/ 1001 false Groceries 08<table ng-controller="TodoCtrl"> 01/ TodoCtrl 1002 false Barber 08 <tr ng-repeat="todo in todos"> Scope <td>{{todo.id}}</td> Repeater </tr> Repeater Scope Scope </table></html> Template Model View
  • 21. Controller<table class="table table-stripped" ng-controller="TodoCtrl">function TodoCtrl(scope) { scope.todos = [ { id: 1001, done: false, name: Do Groceries, deadline: new Date() }, { id: 1002, done: false, name: Barber the cat, deadline: new Date() }]; scope.setTrue = function(id) { var el = (function(id){ for (var i=0; i<scope.todos.length; i++) { if (scope.todos[i].id === id) { return scope.todos[i] } } })(id); el.done = true; }}TodoCtrl.$inject = [$scope];
  • 22. Model: attrs of Scope<table class="table table-stripped" ng-controller="TodoCtrl">function TodoCtrl(scope) { scope.todos = [ { Model id: 1001, done: false, name: Do Groceries, deadline: new Date() }, { id: 1002, done: false, name: Barber the cat, deadline: new Date() }]; scope.setTrue = function(id) { var el = (function(id){ for (var i=0; i<scope.todos.length; i++) { if (scope.todos[i].id === id) { return scope.todos[i] } } })(id); el.done = true; }}TodoCtrl.$inject = [$scope];
  • 23. Template<!doctype html><html lang="en" ng-app><head> <meta charset="utf-8"> <title>My AngularJS App</title></head><body> <table class="table table-stripped" ng-controller="TodoCtrl"> <thead> <tr> <th>ID</th><th>Complete</th><th>Name</th><th>Deadline</th> </tr> </thead> <tbody> <tr ng-repeat="todo in todos"> <td ng-click="setTrue(todo.id)">{{todo.id}}</td> <td>{{todo.done}}</td> <td>{{todo.name}}</td> <td>{{todo.deadline}}</td> </tr> </tbody> </table></body></html>​​
  • 24. Data-binding and interactionSee live example
  • 25. Routingangular.module(myApp). config([$routeProvider , function($routeProvider ) { $routeProvider .when( /folder/:name , {templateUrl : partials/folder.html , controller : FolderCtrl }); }])​
  • 26. Performance● Browser support: IE 8+, Chrome, FF, Safari, Opera● Framework size: 503KB● Application size: 756KB