AngularJS Basics with Example

37,263 views

Published on

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

Published in: Technology
2 Comments
36 Likes
Statistics
Notes
No Downloads
Views
Total views
37,263
On SlideShare
0
From Embeds
0
Number of Embeds
4,360
Actions
Shares
0
Downloads
1,617
Comments
2
Likes
36
Embeds 0
No embeds

No notes for slide

AngularJS Basics with Example

  1. 1. 02 AngularJSFramework AnalysisPublic Code Repository by Sergey N. Bolshchikov http://bolshchikov.net sergey.bolshchikov@new-proimage.com New ProImage, 2012
  2. 2. Outline I. IntroductionII. Philosophy
  3. 3. Outline I. IntroductionII. Philosophy ay od et tlin in ou ive No t d J us
  4. 4. IntroductionI want to build well structured and dynamic web application.Header-Navigation Bar Content Wrapper click click Tree ContentFooter
  5. 5. IntroductionTraditional solution: < 37% > 63% LOC LOC Javascript HTML
  6. 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. 7. IntroductionAngularJS solution: > 41% < 59% LOC LOC HTML Java script
  8. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 24. Data-binding and interactionSee live example
  25. 25. Routingangular.module(myApp). config([$routeProvider , function($routeProvider ) { $routeProvider .when( /folder/:name , {templateUrl : partials/folder.html , controller : FolderCtrl }); }])​
  26. 26. Performance● Browser support: IE 8+, Chrome, FF, Safari, Opera● Framework size: 503KB● Application size: 756KB

×