APPROVAL PAGE FOR GRADUATE THESIS OR PROJECT

deliriousattackInternet και Εφαρμογές Web

4 Δεκ 2013 (πριν από 3 χρόνια και 4 μήνες)

143 εμφανίσεις






APPROVAL PAGE FOR GRADUATE THESIS OR PROJECT











GS
-
13



SUBMITTED IN PARTIAL FULFILLMENT OF REQUIREMENTS FOR DEGREE
OF,
MASTER OF SCIENCE
AT CALIFORNIA STATE UNIVERSITY, LOS
ANGELES BY






Alberto Gutierrez


Candidate






Computer Science


Department/Field of Concentration













TITLE:


Web Application Client Side Architecture

with AngularJS




























APPROVED:

Eun
-
Young (Elaine) Kang, Ph.D.




Committee Chairperson


Signature



Russell J. Abbott, Ph.D.




Faculty Member


Signature



Raj S. Pamula, Ph.D.




Department Chairperson


Signature







DATE:

March 20
, 2013






WEB APPLICATION CLIENT SIDE ARCHITECTURE WITH ANGULARJS










A
Thesis


Presented to


The Faculty of the Department

(or School)

of
Computer Science



California State University, Los Angeles








In Partial Fulfillment


of the Requirements for the Degree



Master of Science








By


Alberto Gutierrez


March 2013








ii











































© 2013


Alberto Gutierrez


ALL RIGHTS RESERVED






iii


ACKNOWLEDGEMENTS


I’d like to thank Dr. Abbott for giving me the oppo
rtunity to work on this project.
I would also like to thank the computer science
department for the support throughout the
years.












































iv


ABSTRACT

Web Application Client Side Architecture with AngularJS

By

Alberto Gutierrez

With the rapid growth of web development various web applications have
emerged,
along with the architectures with which they are built. For the most part, there
has been quite a uniform schema utilized in the designing and architecting of the
applications; this schema consists of a client and a server in which the client is typically
concerned with interfacing information retrieved from the server. The server typically
deals with data storage and most commonly, data processing/operations.

More recently, a different approach to building web applications is being explored
and utilized. W
ith the development of more robust and capable client
-
side programming
tools and libraries, developers are able to program applications in such a way that the
client is responsible for many operations that once heavily relied on the server side.

By handlin
g application actions and operations on the client side, stress on the server side
machine is relieved, and user experience is enhanced by making for a smoother and more
native feel, as most processing is handled on the client via the web browser installed

on
the user’s computer.

The goal of this project is to architect a web application in such a way that the
majority of operations, such as data processing, data transfer and data presentation, are
handled on the cli
ent side in an efficient manner.





v


TABLE OF CONTENTS

Acknowledgments

................................
................................
................................
.................

iii

Abstract

................................
................................
................................
................................
.

iv

List of Tables

................................
................................
................................
.......................

vii

List of Figures

................................
................................
................................
.....................

viii

Chapter


1.
Introduction

................................
................................
................................
.................

1

1.1
AngularJS

................................
................................
................................
.....

2

1.1.1
Why AngularJS?

................................
................................
..............

3

1.1.2
Application Architecture

................................
................................
..

3


2.
Building HTML Templates

................................
................................
........................

9

2.1
Static HTML

................................
................................
................................
.

9

2.2

Designating HTML Areas for Templating

................................
.................

12

2.3
AngularJS Templates

................................
................................
..................

13

2.3.1
ngApp

................................
................................
.............................

14

2.3.2
ngInclude

................................
................................
........................

14

2.3.3
ngController

................................
................................
...................

14

2.3.4

ng
Repeat

................................
................................
.........................

15


3.
Controllers

................................
................................
................................
................

16

3.1
Functions

................................
................................
................................
.....

16

3.2
Scope

................................
................................
................................
...........

16

3.3

Modules

................................
................................
................................
......

17





vi


3.4

Services

................................
................................
................................
.......

18

3.5

UI Functions

................................
................................
...............................

19

3.6

Directives

................................
................................
................................
....

19


4.
Conclusion

................................
................................
................................
...............

22

References

................................
................................
................................
............................

23







































vii


LIST OF
FIGURES



1.

Figure 1.1

AngularJS Seed Project Structure

................................
................................
..

4

2.

Figure 1.2

Angular Seed Scripts Directory

................................
................................
......

5

3.

Figure 1.3

Angular Seed App Directory

................................
................................
..........

5

4.

Figure 1.4 Angular Seed Project js Directory

................................
................................
..

6

5.

Figure 1.5 app,js File

................................
................................
................................
.......

7

6.

Figure 1.6 Sample controller,js File

................................
................................
.................

8

7.

Figure 2.1 Basic HMTL Template

................................
................................
.................

10

8.

Figure 2.2

CSS File

................................
................................
................................
........

11

9.

Figure 2.3
Sample Angular Template

................................
................................
............

13

10.
Figure 3.1 Angular Scope Example

................................
................................
...............

17

11.
Figure 3.2 Angular Directive Example

................................
................................
..........

20










1


CHAPTER 1


Introduction



Web development is one of the most prominent fields in computer programming
these days. There are web sites and web applications for almost everything; companies,
products, places, etc. Along with the various types of web sites and web applications,
there
are various ways of developing them.
There is a vast expanse of web development
technologies available for developers to use in order to develop and deploy their web
sites or web applica
t
ions.
For the most part, the
majority of we
b

applications are
develop
ed with a combination of server side
and client side technologies, but with the
help of more sophisticated libraries, JavaScript, the most wi
dely used programming
language o
n the web, is being used to eliminate dependence on server side coding.


The major
ity of web applications are built to
support
create, read, update and
delete (CRUD)

operations. These are the typical operations that a web application is
responsible for.
For example, take a simple web application where a user would create an
account in order to view information specific to
them
.
A user will have to submit a form
that will
pass information back to the web server in order to be stored in a database. This
wou
ld be the create operation of the application. Once a user has created an account and
has logged in, the server will then post information specific to them based on their
account information. This represent
s

the read operation of the web application.
If a
user
wishes to change a piece of information corresponding with their account such as their
username, they would have to interact with the update operation of the web application. If
a user no longer desires to have an account they can choose to delete the
ir
account, which

would represent the delete operation of the web application.






2



This paper will describe one way to take advantage of JavaScript and its
capabilities and apply it t
o a building a web application. In this project we will focus on
how to mai
ntain a Model View Controller (MVC) architecture using JavaScript with the
help of AngularJS, a structural framework.

In addition, the use of HTML, CSS and other
Java
Script libraries such as jQuery, and how they all fit together when building a web
applica
tion with the use of AngularJS will be discussed.



The web technologies described specifically in this paper will be AngularJS,
JavaScript, jQuery, HTML5, and CSS3.
With the combination of these client side web
technologies we will aim to build a web syst
em that is highly efficient and capable.

1.1

ANGULARJS

AngularJS is an open
-
source JavaScript framework used to build web applications. It
is essentially a structural framework for dynamic web pages/applications.
AngularJS,
which is commonly referred to simpl
y as Angular, uses HTML as
a template language as
well as extends the HTML syntax to express the web application’s
components clearly.
According to Google, who maintains the AngularJS project, “Angular is what HTML
would have been had it been designed for
applications”

[1]
.

One of the main

goals of
Angular is to be an overall solution in building web applicat
ions in JavaScript that is run
i
n the browser, thus acting as a client side application.
In order to do this Angular comes
with everything you need to
be a typical CRUD a
pplication out of the box;
data
-
binding,
basic templating directives, form validation, routing, deep
-
linking, reusable components,
dependency injection
.
Perhaps most importantly, Angular does all this while maintaining
the MVC capability
.
Doing all of the things that a web application is responsible for in





3


JavaScript can become messy, but Angular aims to maintain a
cleanly structured
application, coding wise.

1.1.1 Why AngularJS?


There are many ways of building web applications and many

frameworks to build
them with, y
ou may think, why use AngularJS?

One of the main philosophies behind
Angular is that
declarative code
, a programming paradigm that expresses the logic of a
computation without describing its control flow,

is better than imp
erative
,
a programming
paradigm
that describes computation in terms of stateme
nts that change a program state
,

when it comes to building UIs and wiring software components together, while
imperative code is excellent for expressing business logic

[1
]
.

This philosophy ties in to
Angular’s framework component and application structure. It is important to separate
the
client side of a web application from its server side components.
It is also a good idea to
separate DOM manipulation that takes place in th
e web application from the application/
business logic of the web application.

1.
1.2

Application Architecture


As there are many different ways and technologies for building web applications,
each different paradigm encompasses a different architecture.

B
uilding a web application
with PHP would take on a different structure than an application being built with JSP as
well as building a web application with AngularJS would take on a different structure
than one being built with Backbone.js.

It is important
to know the structure of the type of
web application you are
building,

as it is important in maintaining code and the logic of
your application.
Knowing where certain files and certain resources are supposed to go in
the file structure of the application is very important, it becomes crucial to know this





4


information when programming your application. In web applications/projects it is
especially
im
portant,

as there are many resources that the application may use such as
images, CSS files, JavaScript libraries and other types of external files.


AngularJS projects consist of many resources that are important to keep track of.

The basic AngularJS p
roject seed comes with a file structure as shown
in Figure 1.1.


Figure 1.1

AngularJS Seed Project Structure


As you can see, it is not initially apparent that an AngularJS project has the same type of
file structure as traditional web applications.
Angula
r comes with extra resources specific
to Angular projects. It may be important to note that the scripts file here is not the same
as the scripts files that your web application will be using. AngularJS provides a test web

server to run your application on

for testing, this directory contains those we server files.

The web server that AngularJS uses for testing is Node.js.







5



Figure 1.2 Angular
Seed
Scripts Directory


For the purposes of developing a web application with AngularJS, the files that we
will be working with will be contained in the app directory of the Angular project seed.

The typical file structure of a web application or web site will be found here, in addition
to
directories specific to an Angular web project which will be explained.
The root
directory of the app directory will contain the HTML files (templates) of your web

application, which may consist of many HTML pages.



Figure 1.3
Angular

Seed

App Directory


The two directories that may stand out here are the lib and partial directories. For Angular
projects the lib directory contains
libraries specific to AngularJS in order
to create a
project. They can be thought of as the special scripts that make Angular r
un.
The partials





6


directory in this structure would be equivalent to the “includes” directory of other web
applications. It would be the place where you would store template files for the elements
of your web application that remain consistent throughout di
fferent screens.

These are
typically HTML files that will contain the code for elem
en
ts such as the header, footer, or
sidebar of a page in a web application.


As to be expected, perhaps the most important directory within the web
application structure i
s the js directory of the project.
This directory will contain all of the

JavaScript files required to run your application and make it do what you want it to.


Figure 1.4

Angular

Seed Project

js Directory

Every file within this directory will play a role

in making your AngularJS application run.
As described before, everything that happens in the web application will be programmed
using JavaScript. It is important to know what each script file is responsible for and what
type of code should go in which sc
ript file. It is also good to know that you are not
limited to just the script files listed, you can add script files as you find necessary.

Here I will explain the different script files and their purpose. The first script file
listed in figure 1.4 is the app.js file, you can think of this file as the file that contains the
JavaScript code to
wire the pages of your web application. It will let

the application know





7


which files are available and where there are located, such as the header, footer and other
files under the partial directory.
You will do this with the use of modules in Angular, the
module is a
collocation of services, directives,
filters, and configuration information

and
they are used to configure injection for the application.
Another concept that you will
come across in the app file is routing
, the Angular routeProvider gives direction to where
the files of your templates are at
. In the below example, the application
consists of two
views. The routeProvider tells the app to navigate to the template for view1 when the
/view1 URL is navigated to and when /view2 is navigated to, show view2
. Otherwise the
application will default to
showing /view1 of the application.

Also to be noted is the
declaration of the controllers for each of the different views. View1 has the controller of
MyCtrl1 and view2 has the controller of MyCtrl2.


Figure 1.5 app.js File

The next file in this director
y is very important in building Angular applications.
The controller.js file will contain all of the logic of your application in JavaScript. It will
contain all of the functions needed to
make your application run the way you desire.
Each
JavaScript funct
ion in the controller file will be thought of as a controller itself. It will
control some part of the application behavior.
For the most part, a controller can be





8


thought of as
the code behind view, the view being an HTML template.

Figure 1.6 shows
a samp
le controller file with two sample controller functions.


Figure 1.6 Sample controllers.js File

The next three files in the directory are the directives.js, filters.js and services.js
files. The directives script file will contain all JavaScript code for
the directives to be
used in the applications. Directives in Angular are to be responsible for the DOM
behavior of the applications. Directives are an important and sometimes difficult concept
in Angular and will be

discussed more in depth.

The filters scr
ipt file will be responsible
for any type of filtering you

may have in your application such as specific data
transformations.
The services script file is also a very important part of an Angular
application. As with most web applications
we will need to i
nteract with an external
server to retrieve information to be processed with the application.
Angular provides
services that make it easy to request information from external sources
via HTTP
requests. These work seamlessly with RESTful services.









9


CHAPT
ER 2

Building HTML Templates


As with the most web applications the initial structure will be built using HTML.
This initial structure can be thou
ght of as the HTML skeleton of
the application.

This
HTML skeleton will change as we are building dynamic web
pages, but it will serve as a
good initial structure where placeholder can be set and you can get a general idea of
which elements of the page will have to be made dynamic.

Before building the html
templates, you should have a general idea of how the appli
cation is going to look.

It is
important that while building your HTML templates that you have a good understanding
of what each part of your HTML code means and which part of the page it corresponds to
as controllers will be written for these pages and An
gular tags will be added into your
HTML code in order to link those controllers.
It is generally not a good idea to use any
generated HTML code, it is always better to hand write the HTML code.

2.1

Static HTML

To begin with, the HTML skeleton will be a static HTML page or pages.
It will
consist of standard HTML markup and CSS. To keep up the current
web markup
convention the use of HTML5 is recommended.
In addition to HTML, for increased
compatibility we will al
so focus on the use of CSS3.
It is important to keep in mind that
the HTML skeleton code should be as clean as possible so that is easy for you and others
to understand.
HTML aids in the production of clean markup with its enhanced syntax.
At the minimum
,
your HTML template will consist of the standard HTML document
attributes as shown in figure 2.1.
The document will consist o
f the standard HTML
declaration,

HTML5 in this case.

A head section which will be where all of your external





10


resources will be refer
enced as well as the title of the document or page.
The body of the
document will likely consist of a header portion, which will represent the header of the
web page as it is viewed in the browser. Here we use the HTML5 markup convention for
this attribute

of the page, traditionally we would use a div with the id of value “header”.
Another attribute of the page that takes on the new HTML5 markup convention is the
footer element of the page. These new tags make for a more clean and understandable
document la
yout.


Figure 2.1 Basic HTML Template


Depending on the requirements of your web application, the actual HTML can
become a lot more complex and contain many more attributes.
CSS will become a very
important part of your HTML template, it will aid in the a
ppearance of the web pages
greatly.
As with your HTML templates, your CSS coding should be very clean and
organized as well. It is good to keep both your HTML code and CSS code logically





11


structured as they correspond with each other, this makes it easy to locate pieces of your
web pages when changes need to be made.
The typical structure of a CSS document will
be shown in figure 2.2. You may notice that the CSS blocks that correspond with
the
elements on the HTML page will be defined in the same order as they are in the HTML
template.

Figure 2.2 CSS File

Plan for both the HTML and CSS files to be changed frequently as application
development takes place. As you application is developed you

will come across things
that will need to be tailored for your application. When controllers are being written they
may begin to manipulate elements of the web page that will need to be edited
i
n order to
facilitate what is happening on the web page.







12


2.
2
Designating HTML Areas for Templating

As discussed previously, there will be areas of your web page or application that
will remain consistent throughout all other pages and phases of the application cycle.
It is
good to identify these areas early on in
development in order to reduce structural changes
late in the development process.

Most commonly, the header and footer of a web page
or
application
will remain consistent throughout subsequent pages.
For
this
reason it is a
good idea to
separate these attributes of the web page into different files for various
reasons. For example, if a change needs to be made in the header of the web page, when
the header is contained in various HTML files the change would have to be made in each
of thos
e files in order for it to be consistent. When the code for the header portion of the
page is extracted into its own separate HTML file, you can use a mechanism to include
this file into all documents requiring it.
This way
, when a change needs to be made,

it
will be done in that file only and will reflect across all other files which contain a
reference to the fil
e containing the code.

Other areas of the web page may be eligible for extracting into separate files to be
included. Some web pages may be more
intricate and contain attributes that may be
beneficial to be separated into their own files.
You may designate these areas by looking
at the web page and recognizing which elements would remain consistent throughout the
application. Some attributes may in
clude sub headers, different sidebars or any section of
the page that may be required to be updated frequently or attributes of the page that may
not be needed on any specific page.
Sometimes there may be different sidebars for
different pages or in terms
of an application, there may be elements of the page that will





13


only be available to different users, in this case it may be a good idea to extract these
attributes into their own files.

2.3

AngularJS Templates

Once you have an HTML template to work with, you
can then start turning that
template into an Angular template, that is, prepare it to be a dynamic web page.
The
Angular template will become quite different than your HTML template as your
application develops. Not only will its structure change, but its
markup will change as
well.
As mentioned before Angular introduces in extended syntax to HTML. The added
syntax will help Angular to

recognize things about your we
b application that are crucial
to its operation.
Figure
2.3

will show how your template may l
ook with Angular
directives introduced to it, the directives will be explained in section
the following
sections
.


Figure 2.3 Sample Angular Template








14


2.3.1

ngApp


One of the first Angular directives to be in
troduc
e
d

is the ngApp

directive. This
directive is used to auto
-
bootstrap an application.

This directive designat
es the root of the
application, which

is why it is typically placed at the root of the HTML page.

This
Angular directive can be placed anywhere you want the root of

your application to be.
For examp
le, if you wanted the application to start at the body of the page, you would
insert the ng
-
app tag there.

Placing it at the top of the page tells Angular to treat the
whole page as an application.
It is important to note
that only one ng
-
app directive can be
used per HTML document.

Although you can only load one app directive per HTML
page, you can designate different modules in the ng
-
app call.
Meaning you can have
different modules to be run on different pages
.


2.3.2

ngInclud
e

As can be inferred from looking at figure 2.3, the ng
-
include directive helps
Angular to tie in the designated template files of your application. It is used to fetch and
include external HTML fragments.

From the figure you can see that the header an
d

footer
are the external HTML files to be included in the document as a whole.

When a
particular fragment is not required on any specific page, you would simple not use the ng
-
include directive.
Includes can become so intricate in web applications that a
whole
document can consist of includes with no internal markup.
As you may remember from
the discussion of the file structure, the place to store these HTML fragment files will be
in the partials directory of the structure.

2.3.3

ngController

Every web applicat
ion has
a
controller, it is the code that controls what happens
on the page

and how actions are handled.
In Angular, this directive assigns behavior to an





15


application scope.
This directive links the functions that contain the business logic of
the
applicat
ion to the HTML template consisting of the Angular bindings.
As mentioned
before the Angular controller s
cript file can contain more than

one controller. As shown
in figure 2.3, the name of the desired controller will be
defined in the ng
-
controller tag.

2.3.4

ngRepeat

Almost every web application consists of data that is listed in some way or
another on one of the pages of the application.

It is common for web application to have a
method in which a data set is iterated through and information is displayed on a page. In
Angular, the way to do this is by using ng
-
repeat.

Ng
-
repeat is an Angular repeater, it
tells angular to create an element

of the type that the ng
-
repeat tag is placed in for each
object in the specified list.
As for the example in figure 2.3, Angular will create an
HTML <p> element containing the information for each entry in the content list.
This can
be thought of as a typ
ical for each or for loop that would display a paragraph tag
containing the information of the list. As noted before, one of the philosophies of Angular
is that
declarative programming should be used for building UIs, that is why this simple
tag is used, r
ather than actually writing out a for or for each loop in the code responsible
for the UI.













16



CHAPTER 3

Controllers


The controllers of the application will be where most of the logic of the
application takes place.
Within the controllers will be
functions that determine the
behavior of the application as well as other Angular components such as scopes,
modules, services and directives.

3.1
Functions


The functions in Angular are written entirely in JavaScript. Each function in the
controller file
will specify the behavior for a specific part or page of the application.

The
behavior of each application is different, thus the JavaScript code for different controllers
will be different. One thing to keep in mind is that all though it is possible to ma
nipulate
the DOM or UI in a controller file, it is not ideal.

Separation from the view and
controller is very important, the application logic should be decoupled from DOM
manipulation. To aid with this concept, Angular uses Directives, which will be disc
ussed
in later sections.

3.2 Scope

The scope in Angular provides the execution context for expressions in the
controller and view.
It is also responsible for detecting changes to the mo
del section of
the application, they watch expressions and propagate events.
When a change is made by
the application the change will reflect on the view, such as updated expressions and other
types of data displayed on the page.
Figure 3.1 shows an exampl
e of scope, it shows how





17


the name expression will evaluate into a different value depending on which scope it is
evaluated in.

Figure 3.1 Angular Scope Example

3.3 Modules


Angular applications do not have a main method which instantiates, wires and
boots
traps the application, instead Angular uses modules to
specify how an application
should be bootstrapped.
For larger applications it is recommended that the application is
broken up into multiple modules; a service module, a directive module, a filter modu
le





18


and an application level module which depends on all other modules and contains
initialization code.

3.4 Services


Angular services are features from the server side of a web application
that
Angular helps bring to the client side.

Services in Angular carry out common operations
that are usually handled on the server side, but are handled on the client side in Angular
web applications. Perhaps the most common of these types of operations is the
XMLHttpRequest

object which provides a
n easy
way to retrieve data from a URL [4].

To
use an Angular service,
you identify it as a dependency for the dependent (a controller, or
another servi
ce) that depends on the service and

Angular's dependency injection
subsystem takes care of the rest.


Th
e Angular http service
is the built in core Angular service that facilitates
communication with remote HTTP servers
via the browser’s XMLHttpRequest
object or
via JSONP.

The Angular http service provides support for each of the CRUD operations
of the web a
pplication.
The list of methods it contains are;
http.get, http.post, http.delete,
http.put, http.head and http.jsonp.
Although the core Angular services are very powerful
and useful, it is poss
ible to create custom service that depend on the needs of your

application.

3.5 UI Functions


It is important to remember that the application/business logic in Angular
applications should be decoupled from DOM manipulation. That is, code in the controller
file should focus on the logic and behavior of the application and not on DOM
manipulation su
ch as appearance.
Often times, DOM manipulation is
required immensely





19


for appearance
qualities in the application. In the occurrence that the application requires
a significant amount of user interface manipulation through the DOM, it is a good idea to
create a separate scr
ipt file to handle the functions. Some of these functions may consist
of images sliders, pop up boxes, or any type of other functions that help the appearance of
the web application.



While Angular projects do not depend on or requir
e jQuery or any other
JavaScript libraries, it is sometimes a good idea to include and use these libraries if you
see it helpful to the development of the application. One thing that is very useful in the
development of web applications, especially in term
s of appearance and effects is jQuery
or jQuery UI. These JavaScript libraries make it easy to enhance the appearance of web
applications
with the help of their widgets and simplified methods for DOM
manipulation. Other components that may be useful are th
e transition and animation
effects of these libraries.
Although it is useful to separate JavaScript libraries and
functions responsible for UI functions, sometimes applications depend on both
application logic coupled with DOM manipulation. Such as, the DO
M reacting a certain
way when a piece of data is loaded from a function in the controller.

In this case the use
of directives is recommended, they will be discussed in the next section.

3.6

Directives


Directives in Angular can be a very complicated concep
t, it is perhaps
the hardest
to learn in Angular
JS.

As mentioned before, Angular consists of its own set of
built in
directives, but to enhance the application based on its needs custom directives can be
created.

Figure 3.2 shows an example of an Angular d
irective.






20




Figure 3.2 Angular Directive Example






21


In this example you can see how the directive is defined and how it incorporates into the
HTML/Angular template of the application.

Directives help to keep the code clean and
organized and aims to keep th
e

HTML code as declarative as possible.















































22


CHAPTER 4


Conclusion



Web applications are becoming a large portion of computer programming, as the
web development field emerges, so will technologies that will aim to make it better.
There are many ways to develop web applications and there may not be one correct way,
dependi
ng on what type of application is being developed certain technologies wi
ll have
advantages over others. As there are many benefits to AngularJS as a JavaScript MVC
framework, there may also be disadvantages depending on the project to be developed.


One
of the main goals of this project was to develop a web application in which
the majority of the operations were handled by JavaScript which in turn would be handle
by the client to make for a more efficient web application. AngularJS
aided us in doing
this

by providing a clean robust framework to inhibit MVC principles in a web
application written in JavaScript. Although there are other JavaScript frameworks that aid
in this process, AngularJS is becoming one of the dominant frameworks in this type of
web a
pplication development.














23


References

[1] AngularJS Developer Guide

<
http://docs.angularjs.org/guide/
>