11. Some facts
Licensed under MIT license
Active community:
http://groups.google.com/group/angular
https://github.com/angular/angular.js
12. Angular is built around the belief that
declarative code is better than imperative
code when it comes to building UIs and
wiring software components together,
while imperative code is excellent for
expressing business logic.
14. public MonthSpinner() {
super("Month Spinner");
setSize(200,100);
setDefaultCloseOperation(EXIT_ON_CLOSE);
Container c = getContentPane();
c.setLayout(new FlowLayout(FlowLayout.LEFT, 4,4));
c.add(new JLabel("Expiration Date:"));
Date today = new Date();
JSpinner s = new JSpinner(new
SpinnerDateModel(today,
null, null, Calendar.MONTH));
JSpinner.DateEditor de = new
JSpinner.DateEditor(s, "MM/yy");
s.setEditor(de);
c.add(s);
15. Example 1:
Hello World
A simple HTML5 page/app with AngularJS
16.
17. The Angular philosophy
Decouple DOM manipulation from app logic.
Decouple the client side of an app from the server side. This
allows development work to progress in parallel, and allows
for reuse of both sides.
It is very helpful indeed if the framework guides developers
through the entire journey of building an app: from designing
the UI, through writing the business logic, to testing.
It is always good to make common tasks trivial and difficult
tasks possible.
18. Angular is not...
It's not a Library. You don't just call its functions,
although it does provide you with some utility APIs.
It's not a DOM Manipulation Library. Angular uses
jQuery to manipulate the DOM behind the scenes,
rather than give you functions to manipulate the DOM
yourself.
It's not a Widget Library.
20. Angular vs JS
Angular expressions are not the same as JS
expressions:
- evaluate against the current scope (not the
window)
- forgiving ( {{a.b.c}} vs. {{((a||{}).b||{}).c}} )
- no control flow (also not ternary operator)
- support for filters
- the $ sign
23. Let’s take a step back
As developers we have 2 responsibilities:
Make the app work according to
requirements
Protect investment in code from changes
But no cheating, it still
has to work!
25. package com.rocketboots.app.business {
import com.rocketboots.app.vo.Customer;
class DependsOnCustomerToWork {
private var myCustomer : Customer;
function createCustomer() : void {
myCustomer = new Customer();
myCustomer.firstName = “Kai”;
} Our class “knows about” or has a
} dependency on Customer - if the
} Dependency arrows are the simplest class, property or method names
and yet the most important relationship and signatures change, our class
in a UML class diagram... will probably not work.
class Customer {
public var firstName : String;
27. Good and bad ...dependencies
Increasing
likelihood of Data (Model)
change schemas, entities, relationships, column/property names and
types
Business Logic
isCreditCardValid(s : String) : Boolean {
Application workflow (Controller)
When the customer finishes entering their details the credit card
is processed; if successful the order is recorded in the system
and a receipt number displayed to the user.
Interface (View)
<div class=”...”><input type=”text”...>
28. MVC
Model Business
Increasing
likelihood of
change
Data currently being displayed in the
application - knows about nothing else
Model properties
Server calls
Filters
details of data Validators
to display
how to make
something
happen
Controller 28
Application workflow - knows about
the model, and little if anything
about the view
View THE CRITICAL BIT: how to
update the view - while knowing
as little as possible!
Knows about everything - doesn’t
matter because view will change before
anything else does.
The important thing is the
dependencies that aren’t there...
30. Data (M)
The Model is referenced from properties on Angular scope
objects. The data in your model could be Javascript objects,
arrays, or primitives, it doesn't matter.
What matters is that these are all referenced by the scope
object.
Angular employs scopes to keep your data model and your UI
in sync. Whenever something occurs to change the state of the
model, angular immediately reflects that change in the UI, and
vice versa.
31.
32. Templates (V)
Templates, which you write in HTML and
CSS, serve as the View.
You add elements, attributes, and markup to
HTML, which serve as instructions to the
angular compiler.
33.
34. Logic & Behaviour (C)
Application Logic and Behavior, which you define in
JavaScript, serve as the Controller.
With Angular (unlike with standard AJAX
applications) you don't need to write additional
listeners or DOM manipulators, because they are
built-in.
This feature makes your application logic very easy
to write, test, maintain, and understand.
37. The injector that will be used for dependency injection
within this app is created.
The injector will then create the root scope that will
become the context for the model of our application.
Angular will then "compile" the DOM starting at the ngApp
root element, processing any directives and bindings found
along the way.
