308364 introduction to web mvc using angularjs
TRANSCRIPT
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
ICT@PSU 308-364 Advanced Web Programming 2 of 48
The problem is Server-side Rendering
Actually...
DOM manipulation
ICT@PSU 308-364 Advanced Web Programming 3 of 48
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.
ICT@PSU 308-364 Advanced Web Programming 4 of 48
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.
ICT@PSU 308-364 Advanced Web Programming 5 of 48
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.
ICT@PSU 308-364 Advanced Web Programming 6 of 48
Most Popular JavaScript Frameworks 2015
ICT@PSU 308-364 Advanced Web Programming 7 of 48
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.
ICT@PSU 308-364 Advanced Web Programming 8 of 48
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.
ICT@PSU 308-364 Advanced Web Programming 9 of 48
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)
ICT@PSU 308-364 Advanced Web Programming 10 of 48
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
ICT@PSU 308-364 Advanced Web Programming 11 of 48
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
ICT@PSU 308-364 Advanced Web Programming 12 of 48
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/
ICT@PSU 308-364 Advanced Web Programming 13 of 48
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.
ICT@PSU 308-364 Advanced Web Programming 14 of 48
Let's get started with ng-init• The ng-init directive initializes application data.
ICT@PSU 308-364 Advanced Web Programming 15 of 48
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
ICT@PSU 308-364 Advanced Web Programming 16 of 48
ng-bind="name"
ng-model="name"
Let's see what happen when you type in the input box
index.html
ICT@PSU 308-364 Advanced Web Programming 17 of 48
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
ICT@PSU 308-364 Advanced Web Programming 18 of 48
Try this, and let’s see what happen (2)
Index.html
MyApp.js
ICT@PSU 308-364 Advanced Web Programming 19 of 48
Result (2)
What happen when you type in the input box?
index2.html
ICT@PSU 308-364 Advanced Web Programming 20 of 48
How does it work? (2)
Index.html
MyApp.js
ICT@PSU 308-364 Advanced Web Programming 21 of 48
• 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 }}
ICT@PSU 308-364 Advanced Web Programming 22 of 48
Try this, and let’s see what happen (3)
Index.html
MyApp.js
Alter ng-bind in line 12 with {{ Expression }}
ICT@PSU 308-364 Advanced Web Programming 23 of 48
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>
ICT@PSU 308-364 Advanced Web Programming 24 of 48
Let's try this… (4)
JSON Array
JSON Name-Value
ICT@PSU 308-364 Advanced Web Programming 25 of 48
ICT@PSU 308-364 Advanced Web Programming 26 of 48
Let's see what happen (4) index3.html
ICT@PSU 308-364 Advanced Web Programming 27 of 48
Add Functions in Controller
ICT@PSU 308-364 Advanced Web Programming 28 of 48
Let's see what happen (5) index4.html
Can you tell me what will happen when I click this button?
ICT@PSU 308-364 Advanced Web Programming 29 of 48
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.
ICT@PSU 308-364 Advanced Web Programming 30 of 48
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
ICT@PSU 308-364 Advanced Web Programming 31 of 48
Let's see the result
What will happen if I type 'Big' here?
Here it is!
ICT@PSU 308-364 Advanced Web Programming 32 of 48
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
ICT@PSU 308-364 Advanced Web Programming 33 of 48
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.
ICT@PSU 308-364 Advanced Web Programming 34 of 48
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
ICT@PSU 308-364 Advanced Web Programming 35 of 48
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?
ICT@PSU 308-364 Advanced Web Programming 36 of 48
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'
ICT@PSU 308-364 Advanced Web Programming 37 of 48
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
ICT@PSU 308-364 Advanced Web Programming 38 of 48
'contact' Template
In index.html, crate a
template, give id
'/contact.html', then move
all contents from contact section here
ICT@PSU 308-364 Advanced Web Programming 39 of 48
Create Buttons
Finally, create the buttons and link to our templates
ICT@PSU 308-364 Advanced Web Programming 40 of 48
What is our web site looks like now?
/home.html /contact.html
ICT@PSU 308-364 Advanced Web Programming 41 of 48
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
ICT@PSU 308-364 Advanced Web Programming 42 of 48
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.
ICT@PSU 308-364 Advanced Web Programming 43 of 48
Index.html
ICT@PSU 308-364 Advanced Web Programming 44 of 48
ICT@PSU 308-364 Advanced Web Programming 45 of 48
ICT@PSU 308-364 Advanced Web Programming 46 of 48
ICT@PSU 308-364 Advanced Web Programming 47 of 48
MyApp.js
ICT@PSU 308-364 Advanced Web Programming 48 of 48