AngularJS is a JavaScript framework for building single-page applications. It enhances HTML with new attributes and uses MVC/MVVM patterns. Key features include data binding, directives, filters, expressions and dependency injection. AngularJS makes it easier to organize web apps at the client-side by defining ways to structure code and adding custom tags/attributes to HTML. It also helps with common tasks in SPAs like routing, data loading and handling user events.
2. Agenda
• Misunderstandings
• What is angular?
• SPAs
• Why angular?
• Features
• MVC/MVVM
• Directives, filters, expression
• Demo
• Why should we use it?
• Why developer should use it?
• Stats
3. Another JS Lib
Lots of new
learning
Difficult to learn
Useful for
web only
Used for styling
purpose
4. What is ANGULARJS?
• It’s not a JavaScript library (As they say).
There are no functions which we can
directly call and use.
• It is not a DOM manipulation library like
jQuery. But it uses subset of jQuery for
DOM manipulation (called jqLite).
5. What is ANGULAR JS? (contd…)
• Focus more on HTML side of web apps.
• For MVC/MVVM design pattern
• AngularJS is a Javascript MVC framework created by Google to build properly
architectured and maintenable web applications.
• “ANGULARJS is what HTML could have been if it had been designed for web application
development.”
• AngularJS extends HTML with new attributes.
9. Why ANGULARJS?
• Defines numerous ways to organize web application at client side.
• Enhances HTML by attaching directives, custom tags, attributes, expressions, templates
within HTML.
• Encourage TDD
• Encourage MVC/MVVM design pattern
• Code Reuse
• Good for Single Page Apps (SPA)
• Cool Features -> Next Slide
10. Key Features of ANGULARJS
ngularJS is a full-featured
SPA framework
Data Binding MVC Routing
Templates
ViewModel Views
Controllers Dependency Injection
Directives
Testing
Controllers
jqLite
Validation
FactoriesHistory
11. MVC : Model View Controller
View
ControllerModel
1. Event or User Action
or View Load
2. Maps to particular Model
after fetching the data
3. Implement the
Business Logic on
response data and
Bind it to View
View :
• Renders the Model data
• Send User actions/events to controller
• UI
Controller:
• Define Application Behavior
• Maps user actions to Model
• Select view for response
Model:
• Business Logic
• Notify view changes
• Application Functionality
• Data in general
12. MVVM: Model View ViewModel
View
ViewModelModel
UI
Presentation LogicBusiness Logic
and Data
• User actions, commands
• Data binding
• Notifications
• Data Access
• Update ViewModel about change
13. What are Directives?
• The directives can be placed in element names, attributes, class names, as well as
comments. Directives are a way to teach HTML new tricks.
• A directive is just a function which executes when the compiler encounters it in the DOM.
• <input ng-model='name'>
• Custom Defined Directives
• <span draggable>Drag ME</span>
14. What are Directives? (contd..)
<!DOCTYPE html>
<html ng-app>
<head>
<title></title>
</head>
<body>
<div class="container">
Name: <input type="text" ng-model="name" /> {{ name }}
</div>
<script src="Scripts/angular.js"></script>
</body>
</html>
Directive
Directive
Data Binding Expression
15. Iterating with ng-repeat Directive
<html data-ng-app="">
...
<div class="container"
data-ng-init="names=['Dave','Napur','Heedy','Shriva']">
<h3>Looping with the ng-repeat Directive</h3>
<ul>
<li data-ng-repeat="name in names">{{ name }}</li>
</ul>
</div>
...
</html>
Iterate through names
16. Filters
Angular filters format data for display to the user.
{{ expression [| filter_name[:parameter_value] ... ] }}
{{ uppercase_expression | uppercase }}
{{ expression | filter1 | filter2 }}
Can create custom filters
17. Using Filters
<ul>
<li data-ng-repeat="cust in customers | orderBy:'name'">
{{ cust.name | uppercase }}
</li>
</ul>
Order customers
by name property
<input type="text" data-ng-model="nameText" />
<ul>
<li data-ng-repeat="cust in customers | filter:nameText | orderBy:'name'">
{{ cust.name }} - {{ cust.city }}</li>
</ul>
Filter customers by model
value
20. Why should we use Angular JS?
• Bootstrap features
• Directives for animation & effects for interactive UI
• SPA : modern way to represent WEB APP
• Compatible with mobile app development
21. Why Developer should use Angular JS?
• It is developed by google.
• RESTful actions (Using one line of JS you can quickly communicate with server)
• Dependency Injection (DI) is a software design pattern that deals with how components
get hold of their dependencies.
• Provides several options for testing (TDD)
• Flexibility with filters
• Good documentation & resources.
23. More Statistics! (Interesting One)
• GITHUB Stats:
• Stars:
o if you star a repository, you basically want to show your appreciation as well as keep track of repositories
that you find interesting without it spamming your timeline.
o In top 3 of github stars project list, only bootstrap & node js is ahead of it.
o Check stars stats:
o https://github.com/search?utf8=%E2%9C%93&q=stars%3A%3E30000&type=Repositories&ref=searchresult
s
• fork:
o In software engineering, a project fork happens when developers take a legal copy of source code from one
software package and start independent development on it, creating a distinct piece of software.
o In top 7 of github fork project list.
o Check fork stats:
o https://github.com/search?utf8=%E2%9C%93&q=forks%3A%3E10000&type=Repositories&ref=searchresult
s
24. Resources
Documentation
• AngularJS Developer Guide
• AngularJS API
• AngularJS Tutorial
Videos
• AngularJS Fundamentals In 60-ish Minutes
• Introduction to Angular JS
• AngularJS end-to-end web app tutorial Part I