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.

Introduction to angular js july 6th 2014

3,574 views

Published on

Published in: Technology, Design
  • Be the first to comment

Introduction to angular js july 6th 2014

  1. 1. Simona Clapan simona@leanometry.com Getting Started with
  2. 2. TRADITIONAL PAGE REQUEST ! Backend Application! Database! Server Response with Webpage and Assets Client Side!Server Side! Javascript CSS HTML Request URL from server New Request to server Server Response with Webpage and Assets
  3. 3. TRADITIONAL WEB APPMODERN PAGE REQUEST ! Backend Application! Database! Server Response with JSON Data Server Response with Webpage and Assets Client Side!Server Side! Javascript CSS HTML Request URL from server New Request to server
  4. 4. TYPICAL APP ARCHITECTURE Client Server Database
  5. 5. WHAT IS ANGULARJS? ❖ Client-side MVC framework: http://angularjs.org ❖ Problem: Updating page without reload ❖ Solution: Angular.js declarative, 2-way data binding <html> <head></head> <body> ... </body> </html>! ! function Hello(){ alert('Hi there!'); } ! index.html app.js
  6. 6. ❖ ANGULAR JS ➡ download from http://angularjs.org ➡ angular.min.js ❖ TWITTER BOOTSTRAP ➡ download from http://getbootstrap.com ➡ bootstrap.min.css HOW TO GET STARTED?
  7. 7. TEMPLATE START <!DOCTYPE html>
 <html>
 <head>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script type="text/javascript" src=“js/angular.min.js"></script> </head>
 <body> </body>
 </html> STARTING TEMPLATE index.html
  8. 8. DIRECTIVES ❖ Directive: marker on a HTML element (such as an attribute, element name, comment or CSS class) that tell the angular compiler to attach a specified behavior to the HTML element. <html> <head></head> <body ng-controller="Hello"> ... </body> </html> ! ! index.html function Hello(){ alert('Hi there!'); } ! app.js
  9. 9. MODULES ❖ Modules: Apps are structured in modules that can depend on other modules and can contain controllers, services, directives and filters // declare a module var app = angular.module("myApp", []); app.js module API module name dependencies index.html <!—- reference the new module —> <html ng-app="myApp"></html> to bootstrap the module use the directive ng-app to reference module by name
  10. 10. SAMPLE CODE index.html <!DOCTYPE html> <!—- reference the new module module —-> <html ng-app="myApp">
 <head>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script type="text/javascript" src="js/angular.min.js"></script> <!--include our new module--> <script type="text/javascript" src="js/app.js"></script> </head>
 <body> </body>
 </html> SAMPLE CODE
  11. 11. Expressions ❖ Expressions: JavaScript-like code snippets that are usually placed in bindings such as {{ expression }}. index.html numeric operation string operation <p> {{"I have "}} {{4 + 6}} dollars </p> <p> I have 10 dollars </p> //after evaluation
  12. 12. SAMPLE CODE index.html <!DOCTYPE html> <html ng-app="myApp">
 <head>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript" src="js/app.js"></script> </head>
 <body> </body>
 </html> SAMPLE CODE <p> {{"I have "}} {{4 + 6}} dollars </p>
  13. 13. CONTROLLERS ❖ Controllers: contain the application behavior. Controllers populate the scope with all the necessary data for the view. ❖ Using proper separation of concerns, controllers should never contain anything related to the DOM. app.js var info = { firstName: 'John', lastName:'Smith', email: 'john@leanometry.com', phone:'777.922.2321' }; var app = angular.module('myApp', [ ]); app.controller('ContactsController', function(){ ! }); app.js
  14. 14. SAMPLE CODE app.js var app = angular.module('myApp', [ ]); app.controller('ContactsController', function(){ this.contact = info; }); ! var info = { firstName: 'John', lastName:'Smith', email: 'john@leanometry.com', phone:'777.922.2321' }; STORE DATA IN CONTROLLER
  15. 15. SAMPLE CODE index.html <!DOCTYPE html> <html ng-app="myApp"> <head> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript" src="js/app.js"></script> </head> <body> ! ! ! ! ! ! </body> </html> ! WHERE TO ADD ON HTML <h1>Contact Info</h1> <div> <label>First Name:</label><br/> <label>Last Name:</label><br/> <label>Email:</label><br/> <label>Phone Number:</label> </div>
  16. 16. SAMPLE CODE index.html <!DOCTYPE html> <html ng-app="myApp"> <head> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript" src="js/app.js"></script> </head> <body> <h1>Contact Info</h1> <div ng-controller="ContactsController as contacts"> <label>First Name:</label><br/> <label>Last Name:</label><br/> <label>Email:</label><br/> <label>Phone Number:</label> </div> </body> </html> ! ATTACHING CONTROLLER directive controller name alias
  17. 17. SAMPLE CODE index.html <!DOCTYPE html> <html ng-app="myApp"> <head> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript" src="js/app.js"></script> </head> <body> <h1>Contact Info</h1> <div ng-controller="ContactsController as contacts"> <label>First Name: {{contacts.contact.firstName}}</label><br/> <label>Last Name: {{contacts.contact.lastName}}</label><br/> <label>Email: {{contacts.contact.email}}</label><br/> <label>Phone Number: {{contacts.contact.phone}}</label> </div> </body> </html> ! DISPLAY CONTACT
  18. 18. SCOPE ❖ Scope: an object that refers to the application model. It is an execution context for expressions. ❖ Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. ❖ Scopes can watch expressions and propagate events.
  19. 19. SAMPLE CODE index.html <!DOCTYPE html> <html ng-app="myApp"> <head> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript" src="js/app.js"></script> </head> <body> <h1>Contact Info</h1> <div ng-controller="ContactsController as contacts"> <label>First Name: {{contacts.contact.firstName}}</label><br/> <label>Last Name: {{contacts.contact.lastName}}</label><br/> <label>Email: {{contacts.contact.email}}</label><br/> <label>Phone Number: {{contacts.contact.phone}}</label> </div> {{contacts.contact.phone}} <!—-will not print a value —-> </body> </html> ! UNDERSTANDING SCOPE
  20. 20. SAMPLE CODE <body ng-controller="ContactsController as contacts"> <div > <h1>New Contact Info</h1> <label>First Name:</label> <input type="text" ng-model=“contacts.newContact.firstName”/> <br/> <label>Last Name:</label> <input type="text" ng-model="contacts.newContact.lastName"/><br/> <label>Email:</label> <input type="text" ng-model="contacts.newContact.email"/><br/> <label>Phone Number:</label> <input type="text" ng-model="contacts.newContact.phone"/> </div> </body> index.html INSERT NEW CONTACT
  21. 21. SAMPLE CODE <body ng-controller="ContactsController as contacts"> <button type="button">Add Contact</button> ! <div > <h1>New Contact Info</h1> <label>First Name:</label> <input type="text" ng-model=“contacts.newContact.firstName”/> <br/> <label>Last Name:</label> <input type="text" ng-model="contacts.newContact.lastName"/><br/> <label>Email:</label> <input type="text" ng-model="contacts.newContact.email"/><br/> <label>Phone Number:</label> <input type="text" ng-model="contacts.newContact.phone"/> </div> </body> index.html ADDING A BUTTON
  22. 22. SAMPLE CODE <body ng-controller="ContactsController as contacts"> <button type="button" ng-click="contacts.addNewContact()">Add Contact</button> ! <div > <h1>New Contact Info</h1> <label>First Name:</label> <input type="text" ng-model=“contacts.newContact.firstName”/> <br/> <label>Last Name:</label> <input type="text" ng-model="contacts.newContact.lastName"/><br/> <label>Email:</label> <input type="text" ng-model="contacts.newContact.email"/><br/> <label>Phone Number:</label> <input type="text" ng-model=“contacts.newContact.phone"/> </div> </body> index.html ADDING A BUTTON directive event name method name parameters
  23. 23. SAMPLE CODE <body ng-controller"ContactsController as contacts”> <button type="button" ng-click="contacts.addNewContact()">Add Contact</button> ! <div ng-show="contacts.isAddNewContact" > <h1>New Contact Info</h1> <label>First Name:</label> <input type="text" ng-model="contacts.newContact.firstName"/> <br/> <label>Last Name:</label> <input type="text" ng-model="contacts.newContact.lastName"/><br/> <label>Email:</label> <input type="text" ng-model="contacts.newContact.email"/><br/> <label>Phone Number:</label> <input type="text" ng-model=“contacts.newContact.phone"/> </div> </body> index.html SET VISIBILITY
  24. 24. SAMPLE CODE app.js var app = angular.module('myApp', [ ]); app.controller('ContactsController', function(){ this.contact = info; this.newContact ={}; this.isAddNewContact = false; this.addNewContact = function(){ this.isAddNewContact = true; } }); ! var info = { firstName: 'John', lastName:'Smith', email: 'john@leanometry.com', phone:'777.922.2321' }); ADD DATA IN CONTROLLER
  25. 25. SAMPLE CODE <body ng-controller="ContactsController as contacts"> <button type="button" ng-click="contacts.addNewContact()">Add Contact</button> ! <div ng-show="contacts.isAddNewContact" > <h1>New Contact Info</h1> <label>First Name:</label> <input type="text" ng-model="contacts.newContact.firstName"/> <label>Last Name:</label> <input type="text" ng-model="contacts.newContact.lastName"/> <label>Email:</label> <input type="text" ng-model="contacts.newContact.email"/> <label>Phone Number:</label> <input type="text" ng-model="contacts.newContact.phone"/> <button type="button" ng-click="contacts.saveContact()">Save</button> </div> </body> index.html ADD SAVE BUTTON
  26. 26. SAMPLE CODE app.js var app = angular.module('myApp', [ ]); app.controller('ContactsController', function(){ this.contact = info; this.newContact ={}; this.isAddNewContact = false; this.addNewContact = function(){ this.isAddNewContact = true; }; this.saveContact = function(){ this.contact = this.newContact; this.isAddNewContact = false; } }); SAVE IN CONTROLLER
  27. 27. Simona Clapan simona@leanometry.com THANK YOU!
  28. 28. Resources
  29. 29. ! ❖ Courses -http://campus.codeschool.com/courses/shaping-up-with-angular-js ❖ AngularJS - http://angularjs.org
  30. 30. SAMPLE CODE index.html <!DOCTYPE html> <html ng-app="myApp"> <head> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript" src="js/app.js"></script> </head> <body ng-controller="ContactsController as contacts"> <button type="button" ng-click="contacts.addNewContact()">Add Contact</button> <div ng-show="contacts.isAddNewContact" > <h1>New Contact Info</h1> <label>First Name:</label> <input type="text" ng-model="contacts.newContact.firstName"/><br/> <label>Last Name:</label> <input type="text" ng-model="contacts.newContact.lastName"/><br/> <label>Email:</label> <input type="text" ng-model="contacts.newContact.email"/><br/> <label>Phone Number:</label> <input type="text" ng-model="contacts.newContact.phone"/><br/> <button type="button" ng-click="contacts.saveContact()">Save Contact</button> </div> <h1>Contact Info</h1> <div > <label>First Name: {{contacts.contact.firstName}}</label> <label>Last Name: {{contacts.contact.lastName}}</label> <label>Email: {{contacts.contact.email}}</label> <label>Phone Number: {{contacts.contact.phone}}</label> </div> </body> </html> FULL HTML
  31. 31. SAMPLE CODE app.js (function(){
 var app = angular.module('myApp', [ ]); app.controller('ContactsController', function(){ this.contact = info; this.newContact ={}; this.isAddNewContact = false; this.addNewContact = function( ){ this.isAddNewContact = true; }; this.saveContact = function(){ this.contact = this.newContact; this.isAddNewContact = false; } }); var info = { firstName: 'John', lastName:'Smith', email: 'john@leanometry.com', phone:'777.922.2321' }; ! })(); FULL JS
  32. 32. Angular Components: 1 of 3 ❖ Modules: Apps are structured in modules that can depend on other modules and can contain controllers, services, directives and filters ❖ Controllers contain the application behavior. Controllers populate the scope with all the necessary data for the view. Using proper separation of concerns, controllers should never contain anything related to the DOM. ❖ Scope is used to link the controllers and the views to which they are binded
  33. 33. Angular Components: 2 of 3 ❖ Directives: allows you to extend HTML to answer the needs of web applications. Directives let you specify how your page should be structured for the data available in a given scope. ❖ Data Binding: allow defining the binding between the data in the scope and the content of the views. ❖ Filters: allow modifying the way data is displayed. ❖ Partial Views: used specially in single page applications.
  34. 34. Angular Components: 3 of 3 ❖ Services: allow reusing code that should be abstracted from controller. Services can be injected in controllers or in other services. ❖ Dependency Injection: retrieves some elements of the application that should be configured when the module will be loaded ❖ Events: $broadcast and $emit

×