Web Application Development

Size: px

Start display at page:

Download "Web Application Development"

Lynette Logan
5 years ago
Views:

Web Application Development Produced by David Drohan (ddrohan@wit.

1 Web Application Development Produced by David Drohan Department of Computing & Mathematics Waterford Institute of Technology

2 INTRODUCTION & TERMINOLOGY PART 1

3 Objec8ves To give you a founda.on on which you can begin to understand all of the other tutorials and documenta.on out there. We will cover Why Terminology and How We will also cover how to build your first AngularJS applica.on (mostly in the Labs!) 03 ANGULARJS - PART 1 3

4 Sec8on Outline 1. Introduc)on Why you should be using AngularJS 2. Terminology The cri.cal founda.on for understanding 3. Modules Reusable func.onality 4. Views UI (User Interac.on) 5. Controllers Facilita.ng communica.on between the model and the view 6. Routes Naviga.ng the view 7. Filters Changing the way you see things 8. Services Five recipe flavors 9. Direc)ves Extending HTML 10. Case Study Labs in ac.on 11. Conclusions The end is nigh 03 ANGULARJS - PART 1 4

5 Sec8on Outline 1. Introduc)on Why you should be using AngularJS 2. Terminology The cri.cal founda.on for understanding 3. Modules Reusable func.onality 4. Views UI (User Interac.on) 5. Controllers Facilita.ng communica.on between the model and the view 6. Routes Naviga.ng the view 7. Filters Changing the way you see things 8. Services Five recipe flavors 9. Direc)ves Extending HTML 10. Case Study Labs in ac.on 11. Conclusions The end is nigh 03 ANGULARJS - PART 1 5

6 Introduc8on WHY YOU SHOULD BE USING ANGULARJS 03 ANGULARJS - PART 1 6

7 What is AngularJS and why use it? q First off, why use JavaScript? To dynamically update your HTML document and to get data to and from it. q AngularJS is an open-source framework (a JavaScript library) that makes it easier to communicate between your HTML document and JavaScript. Used for developing Dynamic Web Apps (SPAs in modern lingo). q Developed in 2009 by Miško Hevery and Adam Abrons q Maintained by Google q Ac.vely developed and supported (GitHub) HTML is great for declaring sta3c documents, but it falters when we try to use it for declaring dynamic views in web applica3ons. AngularJS lets you extend HTML vocabulary for your applica3on. The resul3ng environment is extraordinarily expressive, readable, and quick to develop 03 ANGULARJS - PART 1 7

8 Anatomy of an Angular Applica8on q Controllers q Models q Services q Direc)ves q Modules q Filters q Factories q Scopes (Models) q Templates q Routes We will cover most of these in some form during the sec.ons on Angular 03 ANGULARJS - PART 1 8

9 What Makes an AngularJS App? Load AngularJS <script src=" Bootstrap <html ng-app> Declare rela.onships ng-model="yourname" {{yourname}} //html angularjs/1.0.6/angular.min.js"></script> 03 ANGULARJS - PART 1 9

10 Bootstrapping an Angular App 1. Browsers generates document ready event when DOM is built. 2. ng-app direc.ve causes AngularJS to register a handler for this document ready event. 3. Handler amends the DOM based on other direc.ves contained in the HTML. 03 ANGULARJS - PART 1 10

11 Bootstrapping an Angular App 03 ANGULARJS - PART 1 11

12 Bootstrapping an Angular App 03 ANGULARJS - PART 1 12

13 Bootstrapping an Angular App 03 ANGULARJS - PART 1 13

14 Terminology THE CRITICAL FOUNDATION FOR UNDERSTANDING 03 ANGULARJS - PART 1 14

15 Model View Controller What is the MVC? Model the data View the user interface, what the user sees and interact with Controller the interface between the model and the view The model is not necessarily the data from the database The browser, server, and database can have their own MVC systems and ojen do When we talk about the MVC in this presenta.on we ll be talking about the MVC on client side, in the browser 03 ANGULARJS - PART 1 15

16 Data Binding What is data binding? Data-binding in Angular apps is the automa.c synchroniza.on of data between the model and view components. (hlps://docs.angularjs.org/guide/databinding) From the AngularJS example below we have several data binding instances (marked in red). <form> <p> Enter your name: <input type="text" ng-model="name" required> <button type="button" ng-click="submit()" ng-disabled="!name">submit</button> </p> <p ng-show="name"> Hello, {{name}} </p> </form> 03 ANGULARJS - PART 1 16

17 Expressions What is a JavaScript expression? An expression produces a value and can be wrilen wherever a value is expected. (hlp:// Myvar; 3 + x; myfunc("a", "b"); AngularJS also has expressions: Angular expressions are JavaScript-like code snippets that are usually placed in bindings such as {{ expression }}. (hlps://docs.angularjs.org/guide/expression) <form> <p> Enter your name: <input type="text" ng-model="name" required> <button type="button" ng-click="submit()" ng-disabled="!name">submit</button> </p> <p ng-show="name"> Hello, {{name}} </p> </form> 03 ANGULARJS - PART 1 17

18 Direc8ve What is a direc.ve? It is a marker on an HTML element (such as an alribute, element name, comment, or CSS class) that AngularJS recognizes and uses to create a customized set of func.onality and/or user interface. AngularJS comes with many pre-built direc.ves, but you can also write your own custom direc.ves. <form> <p> Enter your name: <input type="text" ng-model="name" required> <button type="button" ng-click="submit()" ng-disabled="!name">submit</button> </p> <p ng-show="name"> Hello, {{name}} </p> </form> 03 ANGULARJS - PART 1 18

19 Controller What is a controller? Controllers link the model and the view using the AngularJS service: $scope Nes.ng controllers is both possible and frequently done. HTML Fragment <div ng-app='myapp' ng-controller="mycontroller"> <p>hello, {{name}}!</p> <p>{{greet()}}</p> </div> JavaScript fragment var module = angular.module('myapp', []); module.controller('mycontroller', [ '$scope', function($scope) { }]); $scope.name = 'John Smith'; $scope.greet = function() { return 'Hello, ' + $scope.name + '!'; }; 03 ANGULARJS - PART 1 19

20 Scope What is scope? It is the context in which an expression is evaluated. This example has three scopes, one of which inherits a variable from its parent scope. function foo() { var name = "John"; function hello() { var name = "Jack"; return "Hello, " + name; } function goodbye() { return "Good bye, " + name; } hello(); //returns "Hello, Jack" goodbye(); //returns "Good bye, John"; } 03 ANGULARJS - PART 1 20

21 Modules What is a module? A container for code for the different parts of your applica.ons. A module is used to define services that are reusable by both the HTML document and other modules: Controller Direc.ve Constant, Value Factory, Provider, Service Filter Best Prac)ce: Divide your code into modules with dis.nct func.onality. Don t put everything in one module. 03 ANGULARJS - PART 1 21

22 Service What is a service? The supplying or supplier of u.li.es or commodi.es, as water, electricity, or gas, required or demanded by the public. (hlp://dic.onary.reference.com/browse/service) In programming we can define a service as The supplying or supplier of u.li.es or commodi.es, as func)ons, values, or objects, required or demanded by an expression. In AngularJS you can define services that provide func.onality that can be used repeatedly throughout your code. 03 ANGULARJS - PART 1 22

23 Dependency Injec8on When one func.on is dependent on the data or func.onality of something else, that something else must be accessible. OPTION 1: GLOBALLY ACCESSIBILITY var a = 4, b = 2; function divide() { return a / b; } OPTION 2: USE DEPENDENCY INJECTION function divide(a, b) { return a / b; } 03 ANGULARJS - PART 1 23

24 Dependency Injec8on Dependency injec.on requires specific data from each parameter. You can t use the divide func.on like this: function divide(a, b) { return a / b; } divide('hello', { x: 2 }); 03 ANGULARJS - PART 1 24

25 Rou8ng What is Rou.ng? Allows SPAs behave like tradi.onal Web Applica.ons/sites: 1. forward/back bulon support 2. deep-linking to specific content. Old-style AJAX Web apps did not support rou.ng the addressability problem. Advantages: Bookmarking; Link sharing; Direct naviga.on. Two solu.on approaches: 1. Hash-based, e.g. hlp://domain_name/#/some_app_url 2. PushState, e.g. hlp://domain_name/some_app_url Angular supports both (1) is default. 03 ANGULARJS - PART 1 25

26 Case Study LABS IN ACTION 03 ANGULARJS - PART 1 26

27 Demo Applica8on hlp://dona.onweb-4-0.herokuapp.com 03 ANGULARJS - PART 1 27

28 Questions? 03 ANGULARJS - PART 1 28

Dynamic Web Development

Dynamic Web Development Produced by David Drohan (ddrohan@wit.ie) Department of Computing & Mathematics Waterford Institute of Technology http://www.wit.ie MODULES, VIEWS, CONTROLLERS & ROUTES PART 2 Sec8on