AngularJS: Introduction

Topics 

  • Emergence of Single Page Application (SPA) architecture
  • What is and Why AngularJS? 
  • AngularJS HelloWorld Example 
  • AngularJS components 
  • Tools

Emergence of Single Page Application (SPA) Architecture

Web App Architecture Requirements 

  • High Performance 
  • High Scalability 
  • Easy to develop (from developer standpoint) 
  • Rich user experience (from user standpoint) 
  • Standards-based 
  • Vibrant ecosystem 
  • Multi-device support 
  • Mobile friendly

Web App Architecture Evolution 

  • Model 1 MVC (Template based) 
  • Model 2 MVC (Controller based) 
    • View is generated by the server per request 
    • Struts, SpringMVC, Rails 
  • Component oriented 
    • View is generated by the server per request 
    • JSF, Tapestry 
  • SPA-based Rich client and Thin Server 
    • View is generated at the client 
    • Client Model sync'ed with backend data via REST, WebSocket 
    • JavaScript MVC framework (AngularJS, BackboneJS, etc) 
    • HTML 5 enabled

SPA-based Rich Client Architecture 

  • Presentation (view generation) is done at the client

SPA-based Rich Client Architecture

SPA-based Rich Client Architecture 

  • All presentation handling is done on the client 
    • Controller handles user interaction 
    • View is responsible for displaying data 
  • All conversational state (also known as view or presentation state) is kept on the client 
    • The server is stateless from the perspective of requests 
    • HTML5 offline technologies 
  • The client is responsible for fetching the data from the server and insert it into the presentation and extracting data from the presentation to send to the server 
    • REST 
    • HTML5 Websocket, XHR2

What is Single-Page App (SPA)?

  • Web application that fits in a “single” page 
    • Example: Gmail, Google Map 
  • HTML page contains mini-views (HTML fragments) that can be loaded in the background 
    • No reloading of the page 
  • Enables natural browser behavior 
    • Browser history 
    • Navigation & Bookmarks 
  • Unified across experiences 
    • Desktop, Tablets, Mobile phones 
  • Better deployment and maintenance

Challenges in SPA 

  • DOM manipulation 
    • How can we add custom behavior to the DOM elements? 
  • History tracking and bookmarking 
    • How can provide natural browser behavior? 
  • Routing 
    • How can we support URL-based routing? 
  • Data binding 
    • How can we bind data from model to view and vice-versa? 
  • View loading 
    • How can we support efficient page loading?

What is and Why AngularJS?

What is AngularJS? 

  • A structural framework for building SPA apps 
    • It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly 
    • Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write 
  • Angular is what HTML would have been, had it been designed for applications 
    • HTML is originally designed for displaying static contents - so “impedance mismatch between static documents (HTML) and dynamic application” needs to be addressed 
  • A complete client side solution 
    • Works with any server technology

Key Design Points of AngularJS 

  • Decouple DOM manipulation from app logic 
    • Dramatically improves the testability of the code
  • Regard “app testing” as equal in importance to “app writing” 
    • Testing difficulty is dramatically affected by the way the code is structured 
  • Decouple the client side of an app from the server side
    • Allows development work to progress in parallel, and allows for reuse of both sides 
  • Guide developers through the entire journey of building an app 
    • From designing the UI, through writing the business logic, to testing 
  • Make common tasks trivial and difficult tasks possible

Why AngularJS? 

  • No need to register callbacks (event handlers) 
    • Makes code simpler and easier to understand 
  • No need to manipulate HTML DOM programmatically 
    • By declaratively describing how the UI should change as your application state changes, you are freed from writing low-level DOM manipulation code
  • No need to marshal data to and from the UI 
    • AngularJS handles the flow of marshaling data from the server to an internal object to an HTML form 
    • Allowing users to modify the form, validating the form, displaying validation errors, returning to an internal model, and then back to the server, creates a lot of boilerplate code 
  • No need to write tons of initialization code just to get started

AngularJS Sweet Spot 

  • Angular is built with the CRUD application in mind 
    • CRUD applications represent the majority of web applications 
  • Angular is not a good fit for applications with intensive and tricky DOM manipulation 
    • Games and GUI editors belong to this category of applications 
    • Better to use a library with a lower level of abstraction, such as jQuery for these applications (instead of AugularJS)

AngularJS vs. Other JavaScript MVC frameworks

http://www.infoq.com/research/top-javascript-mvc-frameworks (April 2015)

AngularJS vs. Other JavaScript MVC frameworks

Apps Built with AngularJS

https://builtwith.angularjs.org/

Apps Built with AngularJS

AngularJS Example

AngularJS Helloworld Example

<div ng-app ng-init="qty=1;cost=2">
 <b>Invoice:</b>
 <div>
 Quantity: <input type="number" min="0" ng-model="qty">
 </div>
 <div>
 Costs: <input type="number" min="0" ng-model="cost">
 </div>
 <div>

<!-- Prompt a user to enter two numbers (quantity and cost) and compute total cost. Note there is no javascript code. -->

 <b>Total:</b> {{qty * cost | currency}}
 </div>
</div>

AngularJS: Main Components

  • Templates 
  • Expressions 
  • Directives 
  • Modules 
  • Controllers 
  • Scopes 
  • Models 
  • Dependency injection 
  • Data binding Routing 
  • Filters 
  • Forms 
  • Validations 
  • Services 
  • Bootstrapping

AngularJS 3rd-party Modules

http://ngmodules.org/

AngularJS 3rd-party Modules

Tools

Front-end Web Development Tools 

  • Editors 
    • WebStorm (commercial) 
    • Visual Studio Code (free) 
    • Brackets (free) 
    • Sublime text (commercial) 
  • Java IDEs (mostly geared for Backend Java development)
    • Eclipse 
    • NetBeans 
    • Intellij IDEA 
  • Generators and Scaffolding 
    • Yeoman 
    • Maven: archetype-webapps-module-angularjs

Brackets 

  • A modern, open source text editor what understand web design 
    • Created by Adobe 
  • Features 
    • Inline editors 
    • Live previews 
    • Preprocessor support 
  • Plugin-based 
    • Beautify plugin 
  • AngularJS support 
    • AngularJS for Brackets plugin 
    • AngularJS Code Hints plugin 
    • Angular Snippets plugin

Download course content

Download PDF