AngularJS: Introduction


  • 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 (April 2015)

AngularJS vs. Other JavaScript MVC frameworks

Apps Built with AngularJS

Apps Built with AngularJS

AngularJS Example

AngularJS Helloworld Example

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

<!-- 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}}

AngularJS: Main Components

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

AngularJS 3rd-party Modules

AngularJS 3rd-party Modules


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


  • 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