This document is a slide presentation on AngularJS that covers: installing and running a basic AngularJS application; understanding the MVC architecture and how models, views, and controllers work; working with models including using the $http service to retrieve JSON data and filters; dividing an app into partials using the $routeProvider service; and includes references for additional learning. The presentation provides an introduction to AngularJS and the key concepts needed to build single page applications using this JavaScript framework.

1. SLIDE TITLE
▪ Click to edit Master text styles
▪ Second level
▪ Third level
▪ Fourth level
▪ Fifth level
By Jay Gajjar
Angular JS
© 2014 KNOWARTH

2. SLIDE TITLE
▪ Click to edit Master text styles
▪ Second level
▪ Third level
▪ Fourth level
▪ Fifth level
▪ Introduction
▪ Installing & running a basic application
▪ Understading the MVC architecture
▪ Working with Models
– $http service to read a JSON file
– Filtering content using directives
▪ Dividing your App into Partials
– Working with the $routeProvider service
Agenda
2© 2014 KNOWARTH

3. SLIDE TITLE
▪ Click to edit Master text styles
▪ Second level
▪ Third level
▪ Fourth level
▪ Fifth level
3
Introduction
© 2014 KNOWARTH

4. SLIDE TITLE
▪ Click to edit Master text styles
▪ Second level
▪ Third level
▪ Fourth level
▪ Fifth level
AngularJS is a JavaScript framework for creating single page
web applications.
A framework implies that instead of writing code however you
want, you change the way you write your applications and
follow the standards set by the framework. By doing this, you
can take advantage of some of the built-in features and with
AngularJS that means templating, filters, two-way data-
binding and more.
What is AngularJS?
4© 2014 KNOWARTH

5. SLIDE TITLE
▪ Click to edit Master text styles
▪ Second level
▪ Third level
▪ Fourth level
▪ Fifth level
5
Installing & Running a Basic
Application
© 2014 KNOWARTH

6. SLIDE TITLE
▪ Click to edit Master text styles
▪ Second level
▪ Third level
▪ Fourth level
▪ Fifth level
You can go into the AngularJS.org website, and you have a
couple of options as to where to get the library from.
Presentation/1Degree.html
(“{{“ and “}}”) : Expressions to return variable values
Installing & running a basic application
6© 2014 KNOWARTH

7. SLIDE TITLE
▪ Click to edit Master text styles
▪ Second level
▪ Third level
▪ Fourth level
▪ Fifth level
ng-app : directive is responsible for bootstrapping your app
defining its scope.
ng-controller: directive defines which controller will be in
charge of your view.
ng-repeat: directive is one of the most commonly used and
serves to define your template scope when looping through
collections.
Understanding Basic Directives
7© 2014 KNOWARTH

8. SLIDE TITLE
▪ Click to edit Master text styles
▪ Second level
▪ Third level
▪ Fourth level
▪ Fifth level
8© 2014 KNOWARTH
Understading The MVC
Architecture

9. SLIDE TITLE
▪ Click to edit Master text styles
▪ Second level
▪ Third level
▪ Fourth level
▪ Fifth level
9© 2014 KNOWARTH
Understanding the MVC architecture
▪ Model
– Data from either a static JSON file, or a database like
SQL.
▪ View
– Display the data you have stored in a model, you can
create an Angular view.
▪ Controller
– The Javascript that links your view to your model.
Presentation/2Degree.html

10. SLIDE TITLE
▪ Click to edit Master text styles
▪ Second level
▪ Third level
▪ Fourth level
▪ Fifth level
10© 2014 KNOWARTH
Working With Models

11. SLIDE TITLE
▪ Click to edit Master text styles
▪ Second level
▪ Third level
▪ Fourth level
▪ Fifth level
11© 2014 KNOWARTH
$http service to read a JSON file
Access to HTTP service and ask it to get some information
from a JSON file.
So our JSON file is in the js folder and its called data.json.
Presentation/3Degree.html

12. SLIDE TITLE
▪ Click to edit Master text styles
▪ Second level
▪ Third level
▪ Fourth level
▪ Fifth level
12© 2014 KNOWARTH
Filtering content using directives
We can easily add a filter to one of these pieces of
data by just typing in a pipe character, which right
above one of the slashes on your keyboard.
https://docs.angularjs.org/guide/filter
Presentation/4Degree.html

13. SLIDE TITLE
▪ Click to edit Master text styles
▪ Second level
▪ Third level
▪ Fourth level
▪ Fifth level
13
Dividing Your App Into Partials
© 2014 KNOWARTH

14. SLIDE TITLE
▪ Click to edit Master text styles
▪ Second level
▪ Third level
▪ Fourth level
▪ Fifth level
14© 2014 KNOWARTH
$routeProvider service
Presentation/5/5Degree.html
The $route service is usually used in combination with the
ngView directive.
The role of the ngView directive is to include the view
template for the current route into the layout template.

15. SLIDE TITLE
▪ Click to edit Master text styles
▪ Second level
▪ Third level
▪ Fourth level
▪ Fifth level
 http://www.lynda.com/AngularJS-tutorials/Up-Running-
AngularJS/154414-2.html
 http://www.toptal.com/angular-js/a-step-by-step-guide-
to-your-first-angularjs-app
References
15© 2014 KNOWARTH

16. SLIDE TITLE
▪ Click to edit Master text styles
▪ Second level
▪ Third level
▪ Fourth level
▪ Fifth level
QUERY & QUESTIONS
16© 2014 KNOWARTH

17. SLIDE TITLE
▪ Click to edit Master text styles
▪ Second level
▪ Third level
▪ Fourth level
▪ Fifth level
THANK YOU
© 2014 KNOWARTH