Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
Introduction to Angularjs
Next
Download to read offline and view in fullscreen.

40

Share

Download to read offline

AngularJS Basics with Example

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • Rm_bharti

    Jul. 4, 2017
  • deepakpandit

    Apr. 13, 2017
  • MartinMak8

    Jan. 14, 2017
  • williammdavis

    Dec. 3, 2016
  • SyedOwaisKazmi

    Nov. 12, 2016
  • TiffaniRogers

    Aug. 18, 2016
  • sharmisthamona

    Jul. 8, 2016
  • devpalmeida

    May. 23, 2016
  • alhasawi

    Feb. 8, 2016
  • ashokdavas

    Jan. 29, 2016
  • GaneshGaikwad18

    Jan. 10, 2016
  • ericwangqing

    Dec. 24, 2015
  • ssuser09b140

    Dec. 20, 2015
  • PriyankaK15

    Nov. 17, 2015
  • ssuser23fae3

    Oct. 18, 2015
  • CisseHalid

    Oct. 5, 2015
  • bijeshcnair

    Aug. 4, 2015
  • es_haghi

    Aug. 2, 2015
  • TramNguyen102

    Jul. 21, 2015
  • flameater

    Jul. 10, 2015

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

Views

Total views

46,991

On Slideshare

0

From embeds

0

Number of embeds

4,876

Actions

Downloads

2,083

Shares

0

Comments

0

Likes

40

×