Angular JS & Bootstrap. Single Page App Framework for Javascript & Front End Framework for Web Application

Angular JS & Bootstrap Single Page App Framework for Javascript & Front End Framework for Web Application Contents • Web Development & SPA • What is...
Author: Rosemary Rogers
0 downloads 1 Views 3MB Size
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

Suggest Documents