AngularJS is a toolset for building client-side web application frameworks. It uses concepts like client-side templates to assemble HTML and data in the browser rather than on the server. Angular follows an MVC pattern with controllers, views bound to models through data binding, and dependency injection to manage dependencies. Directives extend HTML with custom syntax to add functionality.

1. Angular JS
AngularJS is a toolset for building the
framework most suited to your application
development.
It is fully extensible and works well with other
libraries.
Every feature can be modified or replaced to
suit your unique development workflow and
feature needs.

2. Concepts
There are a few core ideas that you’ll use
throughout an Angular app. As it turns out,
we didn’t invent any of these. Instead, we’ve
borrowed heavily from successful idioms in
other development environments and
implemented them in a way that embraces
HTML, browsers, and many other familiar
web standards.

3. Concepts
●
Client-Side Templates
●
Model View Controller (MVC)
●
Data Binding
●
Dependency Injection
●
Directives

4. Client-Side Templates
●
●
Multi-page web applications create their
HTML by assembling and joining it with data
on the server, and then shipping the finished
pages up to the browser.
Angular is different in that the template and
data get shipped to the browser to be
assembled there.

5. Client-Side Templates
●
●
●
●
●
There are no classes or IDs in the HTML to identify
where to attach event listeners.
When HelloController set the greeting.text to Hello, we
didn’t have to register any event listeners or write any
callbacks.
HelloController is a plain JavaScript class, and doesn’t
inherit from anything.
HelloController got the $scope object that it needed
without having to create it.
We didn’t have to call the HelloController’s constructor
ourselves

6. Client-Side Templates
Example

7. ●
●
●
Model View Controller (MVC)
MVC application structure was introduced in
the 1970s as part of Smalltalk.
The core idea behind MVC is that you have
clear separation in your code between
managing its data (model), the application
logic (controller), and presenting the data to
the user (view).

8. ●
●
Model View Controller (MVC)
The view is the Document Object Model
(DOM)
●
The controllers are JavaScript classes
●
The model data is stored in object properties.

9. Data Binding
●
●
●
Before AJAX single-page apps were common,
platforms like Rails, PHP, or JSP helped us
create the user interface (UI) by merging
strings of HTML with data before sending it to
the users to display it.
Libraries like jQuery extended this model to
the client and let us follow a similar style, but
with the ability to update, part of the DOM
separately, rather than updating the whole
page.

10. Data Binding
●
This all works pretty well, but when you want
to insert fresher data into the UI, or change
the data based on user input, you need to do
quite a bit of non-trivial work to make sure you
get the data into the correct state, both in the
UI and in JavaScript properties.

11. Data Binding
●
●
●
But what if we could have all this work done
for us without writing code?
What if we could just declare which parts of
the UI map to which JavaScript properties and
have them sync automatically?
This style of programming is called
binding.
data

12. Data Binding
Example

13. Dependency Injection
●
●
●
The $scope object that does our data binding
is passed to us automatically
We didn’t have to create it by calling any
function.
We just asked for it by putting it in
HelloController’s constructor.

14. Dependency Injection
●
●
●
We get this magical effect through Angular’s
dependency injection system.
Dependency injection lets us follow a
development style in which, instead of
creating dependencies, our classes just ask
for what they need.
This follows a design pattern called the Law
of Demeter, also known as the principle of
least knowledge.

15. Directives
●
●
One of the best parts of Angular is that you
can write your templates as HTML.
You can do this because at the core of the
framework we’ve included a powerful DOM
transformation engine that lets you extend
HTML’s syntax.

16. Directives
●
●
●
●
Double-curly( {{ something }} ) notation for
data binding.
ng-app directive lets you tell Angular which
part of your page it should expect to manage
ng-controller for specifying which controller
oversees which part of the view.
ng-model, which binds an input to part of the
model.
●
And more...
●
And you can write your own

17. Examples
●
http://plnkr.co/edit/Vk6tt1WByib2AjA0ka7Z?p=preview
●
http://plnkr.co/edit/nOJqrklbC48i71ETHb6p?p=preview