Angular JS & Bootstrap Single Page App Framework for Javascript & Front End Framework for Web Application
Contents • Web Development & SPA • What is Angular JS • Recap of Javascript • Getting Started Angular JS • Angular JS is MVC • Twitter Bootstrap
Web Development & SPA
Web Development & SPA • Web App that fits on a Single Web Page • Fluid UX, like desktop app • Example like Gmail, Google Maps
• HTML page contains mini-view (HTML Fragment) that can be loaded in the background • No reloading of the page, better UX • Requires handling of browser history, naviga:on and bookmarks
Web Development & SPA (Cont.) SPA Demo http://www.myspa.com
View
View
View
View
Javascript • SPAs are implemented using JavaScript and HTML • ECMAScript is a scripting language, standardized by Ecma International • In Browsers, ECMAScript is commonly called JavaScript • JavaScript = Native (EcmaScript) + Host objects (browser)
Challenge in SPA • DOM Manipulation • How to manipulate the view efficiently?
• History • What happens when pressing back button?
• Routing • Readable URLs?
• Data Binding • How bind data from model to view?
• View Loading • How to load the view?
• Lot of coding! You could use a framework instead …
What is Angular JS
What is Angular JS • Single Page App Framework for JavaScript • Implements client-‐side MVC platform • Separation of presentation from business logic and presentaCon state
• • • •
No direct DOM manipulation, less code Support for all major browsers Supported by Google Large and fast growing community
Why use it? • The problem • HTML is great for static pages, but has no tools for web applications
• The solution • extend and adapt HTML vocabulary with some additional declarations that are useful for web applications
• Some more Details • Uses Jquery Lite (a subset of JQuery) for DOM manipulations • If you include jQuery before Angular, it will be used instead of Jquery Lite
More benefits • Less boilerplate code • Less effort in mundane tasks allowing for better focus on what is ACTUALLY VALUABLE • THE LOGIC
• More efficiency in development • Separation of concerns
Main Concept • • • • •
Templates Directives Expressions Data binding Scope
• • • • •
Controllers Modules Filters Services Routing
Recap of Javascript
Recap of Javascript • Object • Everything (except basic types) are objects • Including functions and arrays
• Object contains properties and methods • Collection of name-‐value pairs • Names are strings, values can be anything • Properties and methods can be added at runtime
• Objects can inherit other objects
Object Literal
Properties at Runtime • One of the simplest way to create object
• This adds at runtime two properties to the obj • Object!
• Object is built – in data type
Class • You can create constructor function in JavaScript
Functions • Every function in JS is function object • Can be passed as arguments • Can store name / value pairs • Can be anonymous or named
• Usage (Don’t use this, it’s not efficient)
Anonymous Functions • Function can take function as arguments
• You can use anonymous functions
Getting Started Angular JS
First Example Template Title
Template
Directive
Download this file from: https://angularjs.org/
Directives
s app -->
Basic Concepts • Templates
– HTML with additional markup, directives, expressions, filters ... • Directives
– Extend HTML using ng-app, ng-bind, ng-model • Filters
– Filter the output: filter, orderBy, uppercase • Data Binding
– Bind model to view using expressions {{ }}
Directives • Directives apply special behavior to attributes or elements in HTML • Attach behavior, transform the DOM • Some directives • ng-app • Initializes the app
• ng-model • Stores/updates the value of the input field into a variable
• ng-bind • Replace the text content of the specified HTML with the value of given expression
Directives (Cont.) • Angular JS HTML Compiler supports multiple formats • ng-bind • Recommended Format
• data-ng-bind • Recommended Format to support HTML validaCon
• ng_bind, ng:bind, x-ng-bind • Legacy, don't use
Directives (Cont.) • Lot of Built in Directives • • • • • • • • • • • •
ngApp ngClick ngController ngModel ngRepeat ngSubmit ngDblClick ngMouseEnter ngMouseMove ngMouseLeave ngKeyDown ngForm
Expressions • Angular expressions are JavaScript-‐like code snippets that are usually placed in bindings • {{ expression }}
• Valid Expressions • {{ 1 + 2 }} • {{ a + b }} • {{ items[index] }}
• Control flow (loops, if) are not supported! • You can use filters to format or filter data
Title Directives Directives Number 1: Number 2: {{ number1 + number2 }} Expression
(Cont.) • Valid HTML5 version Title Add data-‐ Add data-‐ Number 1: Number 2: {{ number1 + number2 }}
(Cont.) • ng-‐init and ng-‐repeat directives Title Cool loop! {{ name }}
Filter • With filter, you can format or filter the output • Formatting • currency, number,date, lowercase, uppercase
• Filtering • filter, limitTo
• Other • orderBy, json
Title
Filter
Cool loop! {{ customer.name | uppercase }}
Filter
(Cont.) Title Customers { { customer.name | uppercase }}
(Cont.) • User Input Filters the Data Title Customers { { customer.name | uppercase }}
API Reference • https://docs.angularjs.org/api?PHPSESSID=cae8e98e7ca559 b4605d75c813b358ee
Angular is MVC
Angular is MVC • MVC = Model-View-Controller • Less dependencies • Improves maintainability • It is easier to read and understand code Model The data Controller The behavior Modifying / updating the models View The interface How the data is presented to the user
JavaScript
HTML
Model • Holds the data • Notifies the View and the Controller for changes in the data • Does not know about the View and the Controller
Model (Cont.) • Properties on the Controller’s $scope object • Standard JavaScript values • Can be used to separate the application into parts • Application module can include the other modules by listing them as dependencies
View • Displays stuff (buttons, labels, …) • This is what your users will see • Knows about the Model • Usually displays something related to the current state of the Model
View (Cont.) • Make use of special ng attributes (directives) on the HTML elements • ng-app • Determines which part of the page will use AngularJS • If given a value it will load that application module
• ng-controller • Determines which Javascript Controller should be used for that part of the page
• ng-model • Determines what model the value of an input field will be bound to • Used for two-way binding
View (Cont.) • More ng directives • ng-if=“” • Inserts HTML element if expression is true • Does not insert element in the DOM if it is false
• ng-repeat=“ in ” • Repeats the HTML element for each value in the array • Also a key-value pair version for JSON objects • “(, ) in ”
View (Cont.) • {{ }} • Angular expressions • Like JavaScript expressions except: • Evaluated in the current scope (see Controllers later on), not the global window • More forgiving to undefined and null errors • No control statements: conditionals, loops, or throw
• Insert model values directly into the view
Controller • Controls everything • Knows about both the Model and the View • The “logic” resides in it • What to happen, when and how
Controller (Cont.) • Function that takes at least one parameter: $scope • Function is a constructor • Ex: • function MyCtrl($scope) { … }
• We will see a different way of creating a controller constructor later
• $scope • JavaScript object • Contains data (i.e. models) and methods (i.e. functions) • Can add own properties • $scope. = ;
Controller (Cont.) • Dependency Injection
• Pass the modules and services that you need as parameters • In the previous case $scope is a service that will be injected • Can be passed as an array of strings to the controller function as well • Prevents errors when performing minification
• Other useful services • $http
• Used to handle Ajax calls • Wrappers around jQuery
Controller (Cont.) • Typically also contains module loading
• angular.module(, []); • Creates a module with the given name • This module can then be configured
Two-way data binding • View is updated automatically when the Model is changed • Model is updated automatically when a value in the View has changed • No DOM manipulation boilerplate needed
Bootstrap
What is Bootstrap? • Bootstrap is an open source product from Mark Otto and Jacob Thornton who, when it was initially released, were both employees at Twitter. • There was a need to standardize the frontend toolsets of engineers across the company. • Since Bootstrap launched in August 2011, it has taken off in popularity. • It has evolved from being an entirely CSS driven project to include a host of JavaScript plugins and icons.
What is Bootstrap? (Cont.)
Getting Started • Getting started with Bootstrap is as simple as dropping some CSS and JavaScript into the root of your site: • http://getbootstrap.com/getting-started/
• Customize variables, components, JavaScript plugins, and more: • http://getbootstrap.com/customize/
• The fastest way to get Bootstrap is to download the compiled and minified versions of our CSS and JavaScript, along with the included fonts. No documentation or original source files are included: • http://getbootstrap.com/getting-started/
Content Delivery Network • The folks over at NetDNA have graciously provided CDN support for Bootstrap's CSS and JavaScript:
• Read more: • http://www.bootstrapcdn.com/
Bootstrap Structure • This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. • Please note that all JavaScript plugins require jQuery to be included.
CSS • Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
HTML DOCTYPE • Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype.
Mobile First • Bootstrap 3 is mobile first. • To ensure proper rendering and touch zooming, add the viewport meta tag:
• Disable zooming capabilities on mobile devices by adding user-scalable=no:
Responsive images • Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies maxwidth: 100%; and height: auto; to the image so that it scales nicely to the parent element.
Typography and links • Bootstrap sets basic global display, typography, and link styles. These styles can be found within scaffolding.less.
Normalize • Normalize.css is a modern, HTML5-ready alternative to CSS resets. • Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements.
• Read more: • http://necolas.github.io/normalize.css/
Grid system • Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
• Read more: • http://getbootstrap.com/css/#grid
Typography • Headings • Body copy • Emphasis ( Small, strong, em ) • Abbreviations • Addresses • Blockquotes • Lists
• Read more: • http://getbootstrap.com/css/#type
Code • Inline ( ) • Basic block ( )
• Read more: • http://getbootstrap.com/css/#code
Tables • Basic tables • Striped rows • Bordered table • Hover rows • Condensed table • Contextual classes • Responsive tables
• Read more: • http://getbootstrap.com/css/#tables
Forms • Basic form • Inline form • Horizontal form • Supported controls • Static control • Control states • Control sizing • Help text
• Read more: • http://getbootstrap.com/css/#forms
Buttons • Options • Sizes • Disabled state • Button tags
• Read more: • http://getbootstrap.com/css/#buttons
Images • Add classes to an element to easily style images in any project:
• Read more: • http://getbootstrap.com/css/#images
Reference • Angular JS – Code School • Angular JS Framework – Jussi Pohjolainen • Angular JS - Christopher Foo • Bootstrap 3 - Cedric Spillebeen