308364 introduction to web mvc using angularjs

ICT@PSU 308-364 Advanced Web Programming 1 of 48

Introduction to Web MVC using AngularJS

308-364 Advanced Web Programming 1/2558

Simplicity is the ultimate sophistication

Leonardo da Vinci


The problem is Server-side Rendering

Actually...

DOM manipulation


Server vs client side rendering• For the decades of browsers, the HTML were rendered in the server and

send it to the browser.

• Front-end technologies and frameworks were young and immature, browsers had serious compatibility issues and, generally speaking, working with JavaScript was painful.

• HTML is great for declaring static documents, but it falters when we endeavor to utilize it for declaring dynamic views in web-applications.

• JQuery revolutionized the way we work with JavaScript by letting us manipulate DOM in a relatively easy way.

• Many other JS frameworks and libraries were released. However, until recently there was no substitute for the good old model-view-controller (MVC) pattern.

http://www.improgrammer.net/html5-cheat-sheet/

http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller


MVC JavaScript Framework• MVC frameworks let you elongate HTML lexicon for an application.

• The resulting environment is extraordinarily expressive, readable, and expeditious to develop.

• The following four features are very important• UI Bindings - A declarative approach to automatically updating the view layer

when the underlying model changes.

• Composed Views - Creating modular reusable codes or widgets and be able to compose views (preferably at the template layer).

• Web Presentation Layer - There is also no reason for a web framework to create it's own layout manager. HTML and CSS are already the richest way to do style and layout in existence, and should be used as such.

• Plays Nicely With Others - Let's face it, jQuery is pretty amazing. The framework should not come bundled with a sub-par jQuery clone.


Most Popular JavaScript Frameworks 2015

• AngularJS• AngularJS was first released in 2009 and made available as open source

framework under MIT license. Ever since its release, Angular ecosystem has grown beyond imagination. AngularJS framework gives super powers to HTML by adding all the necessary features required to build dynamic views

• Backbone.JS• Backbone.js is a lightweight MVC framework. Born in 2010, it expeditiously

grew popular as a lean alternative to cumbersomely hefty, full-featured MVC frameworks such as ExtJS. This resulted in many accommodations adopting it, including Pinterest, Flixster, AirBNB and others.

• Ember• Ember.js is an open-source client-side JavaScript web application framework

predicated on the model-view-controller (MVC) software architectural pattern. Starting its life as the SproutCore MVC framework, pristinely developed by SproutIt and later by Apple, it was forked in 2011 by Yehuda Katz, a core contributor to the popular jQuery and Ruby on Rails projects. Eminent Ember users include Yahoo!, Groupon, and ZenDesk.


Most Popular JavaScript Frameworks 2015


But server-side rendering is not that bad…

Can we combine both server-side and client-side

rendering together?

Just only modify where the DOMs are updated.


Upcoming JavaScript Frameworks 2016

• React• React is open-source JavaScript most popular framework which is used

by Facebook, Instagram and many more.• React is maintained by Facebook, Instagram and a community of

individual developers and corporations, and aims to address challenges encountered in developing single-page applications.

• ReactJS was first released as open source in 2013 under BSD license. • The community is growing rapidly ever since its release. • One can find tons of resources, tutorials and React component libraries

to get going within no time.• ReactJS is best at rendering complex user interfaces with high

performance. The basic fundamental behind React is the concept of virtual DOM. ReactJS utilizes a virtual DOM, which can be rendered either at client side or server side and communicate back and forth.


What is AngularJS• A JavaScript framework for creating dynamic Single-page web

applications.

• AngularJS changed the way we perceive MVC. It can be done in the client without sacrificing productivity.

• Open Source (MIT License)

• GitHub: https://github.com/angular/angular.js

• Versions• 1.X : https://angularjs.org/

• 2.X : https://angular.io/ (currently in alpha development)

https://angularjs.org/

https://github.com/angular/angular.js


https://angular.io/


MVC in AngularJS

•Model• The data

•Controller• The behavior

•Modifying / updating the models

• View• The interface

•How the data is presented to the user

JavaScript

HTML


Angular MVC

Module

Config

Routes

View

Directives

Controller

*Factory

$scope

• Module is an application that

control a single page website

• Routes are the way to change

the views (templates) of the

website

• The controller is used to control

the data in the view, which

require $scope variable

• Directives are used to bind the

data with view

• Factory is used to share the data between controllers


Installation

• AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:

• CDN• http://ajax.googleapis.com/ajax/libs/angularjs/version/angular.min

.js">

• Download• https://angular.io/download/

http://ajax.googleapis.com/ajax/libs/angularjs/version/angular.min.js

https://angular.io/download/


Two-way Data Binding• Views are declarative• The structure of the interface

• Controllers do not need to directly manipulate the view• Changes in the models / data are automatically reflected in the view

• Updates are managed by the frameworks

• ng-directives (ng-attributes)• The ng-app directive defines an AngularJS application.

• The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.

• The ng-bind directive binds application data to the HTML view.


Let's get started with ng-init• The ng-init directive initializes application data.


Try this… (1)

Line 6: Import AngularJS

Line 9:

• Create ng-app

• Initiate data named name

Line 11:

• ng-bind Bind the view with data

Line 12: • ng-model Bind input box with data

index.html

Lab/index.html


ng-bind="name"

ng-model="name"

Let's see what happen when you type in the input box

index.html

Lab/index.html


Views• 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


Try this, and let’s see what happen (2)

Index.html

MyApp.js


Result (2)

What happen when you type in the input box?

index2.html

Lab/index2.html


How does it work? (2)

Index.html

MyApp.js


• Angular expressions are written inside double braces: {{ expression }}.

• AngularJS expressions binds data to HTML the same way as the ng-binddirective.

• AngularJS will "output" data exactly where the expression is written.

• AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables.

• Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}

• 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

{{ Angular Expressions }}


Try this, and let’s see what happen (3)

Index.html

MyApp.js

Alter ng-bind in line 12 with {{ Expression }}


ng-repeat

• The ng-repeat directive repeats an HTML elemen

• ng-repeat=“<variable> in <array>”• Repeats the HTML element for each value in the array

• Also a key-value pair version for JSON objects

• (<key>, <value>) in <JSON>


Let's try this… (4)

JSON Array

JSON Name-Value


Let's see what happen (4) index3.html

Lab/index3.html


Add Functions in Controller


Let's see what happen (5) index4.html

Can you tell me what will happen when I click this button?

Lab/index4.html


Filter in ng-repeat• Filters can be added to expressions and directives using a pipe

character.

• AngularJS filters can be used to transform data:

Filter Description

currency Format a number to a currency format.

filter Select a subset of items from an array.

lowercase Format a string to lower case.

orderBy Orders an array by an expression.

uppercase Format a string to upper case.


We have many interests, Right? So let's search them.

Create input box to fill thesearch string.

Bind the input box withng-repeat, and use filter


Let's see the result

What will happen if I type 'Big' here?

Here it is!


Multiple views and controllers• We're going to need to learn how to deal with multiple views and

controllers, which we will accomplish using the wonderful ui-routerlibrary.

• AngularUI Router is a routing framework for AngularJS, which allows you to organize the parts of your interface into a state machine.• When passing variables across the web pages, it is very easy if we use

method GET or POST, but it is used only in Server-side script.• Angular ui-router allows us to do this using $stateProvider and

$urlRouterProvider

• Angular routing is used to control single-page web application • Multiple view templates• Passing variable across templates

https://github.com/angular-ui/ui-router/

http://angularjs.org/

https://en.wikipedia.org/wiki/Finite-state_machine


Install and Activate ui-router• A ui-router is in .js file, just include angular-ui-router.js (or angular-

ui-router.min.js) in your index.html, after including Angular itself.

• In MyApp.js, inject ui-router into angular module.


Create a stage

• Now we have one state

called 'home'• Set home a controller 'input'

Set home a first template to inject in ui-view


1. Move interest

section into a

template

2. Give the template an id '/home/html'

Create a '/contact.html' template and move the contact section into it

The ui-view is a containerwhere the template is inserted

HOW IT WORKS?


Let's see what happenURL is appended with #

and /home where home is the name of state{{ name }} is disappeared

because it is out of scope now

The content in ng-template

id='/home.html' is inserted in

<ui-view> area with the data

still blinded in controller 'input'


What if we change to #contact?

In MyApp.js, create a new stage 'contact'

Create a new controller

'contactCtl', then move and place

all the scopes and functions from controller 'input' here


'contact' Template

In index.html, crate a

template, give id

'/contact.html', then move

all contents from contact section here


Create Buttons

Finally, create the buttons and link to our templates


What is our web site looks like now?

/home.html /contact.html


Useful Links…• http://jonathanmh.com/best-javascript-mvc-frameworks-2013-

2014/

• https://thinkster.io/mean-stack-tutorial

• http://www.w3schools.com/angular/default.asp

• https://angular.io/

• https://angularjs.org/

• https://github.com/angular/angular.js

• https://github.com/angular-ui/ui-router

https://thinkster.io/mean-stack-tutorial

https://thinkster.io/mean-stack-tutorial

http://www.w3schools.com/angular/default.asp

https://angular.io/


https://github.com/angular/angular.js

https://github.com/angular-ui/ui-router


Assignment (10%)• Create at least 2 pages of your AngularJS web (4% each).

• You can design by your team which contents or multimedia you want to present on your website.

• Your website…• Should contain at least 2 states and 2 controllers

• Should have interaction with user such as input box, buttons, editable contents, links, etc.

• You can use front-end web development framework to decorate your website.

• Don’t forget to submit your lesson learn (2%). I think you have a lot of notes to write down in this assignment.


Index.html


MyApp.js

308364 introduction to web mvc using angularjs

Technology