A Basic tutorial for AngularJS basic features with examples: 2 way data binding directives Filters Views Providers Routing Examples of this presentation can be found here : https://github.com/msalahat/AngularJS-1.3-Basic-Tutorial#angularjs-13-basic-tutorial

1. AL-Mut'az Bellah Salahat
Senior Software Engineer
TechTalk
Amma/Jordan
v1.3

2. I play JavaScript
Everywhere
You can find me here :
@msalahat
http://github.com/msalahat
http://fb.me/msalahat

3. Agenda
• Why we need a modern JS Framework ?
• What is SPA ( Single Page Application )
• What is AngularJS?
• Why Angular is Awesome?
• 2 way data binding
• directives
• Filters
• Views
• Providers
• Routing

4. Examples of this presentation can be found here :
http://bit.ly/angularjs-tutorial

5. Why we need a modern JS Framework
• Build more complex web apps
• Enhance User Experience
• Make apps faster.
• Make JS code well structured and maintainable.
• Create SPA.

6. What is SPA ( Single Page Application ) ?
It's a web application or web site that fits on a single web page
with the goal of providing a more fluid user experience akin to a
desktop application.

7. SPA Challenges
• Navigation and back button
• Google analytics
• HTML templates
• Code structure
• JavaScript and HTML interaction

8. What is AngularJS ?
• It's an MVC [or MVW as the creators like to name it ] JS Framework that let's
you build a super awesome singe page applications with minimum effort,
solving all challenges mentioned before.
• You can use angular without any 3rd Party libs.
• Easy to learn.
• Let you built loosely coupled components.

9. AngularJS App Structure

10. Why Angular is Awesome?
Two way data binding
RegularWay

11. Angular Way

12. • AngularJS expressions are written inside double braces: {{ expression }}.
• AngularJS expressions binds data to HTML.
• AngularJS will "output" data exactly where the expression is written.
• AngularJS expressions are much like JavaScript expressions:They can
contain literals, operators, and variables.
Expressions

13. • Let’s build a character / word counter tool

14. They are one of the most powerful feature of AngularJS.They allow you to
extend HTML to answer the needs of web applications. Directives let you
specify how your page should be structured for the data available in a given
scope.
Directives
ng-show

15. ng-class

16. ng-repeat

17. Filters
• Filters are used to manipulate, transform or format data to be viewed
• Filters can be used inside expressions or directives using a pipe.
• Angular has built in list of filters :
• uppercase
• lowercase
• currency
• orderBy
• filter

19. Controller
• In AngularJS, the controller is where the behavior of your application is
located.
• DOM manipulation should not be done inside a controller.

20. $scope
• $scope is used to link the controllers and the views to which they are
binded. A controller can add data and function in its scope and then they will
be accessible in the view.

21. $rootScope
• Its the parent of all $scope(s), its models are accessible by all controllers,
• Any controller can get/set them.
• $scope models overrides $rootScope modes.

22. Provider
• It is a the piece of code you want to separate of controllers and want o re use
it into another controllers , you can create a provider using 3 recipes:
• Factory
• Service
• Provider

24. Dependency Injection
Dependency Injection is a software design pattern in which an object is given
its dependencies, rather than the object creating them itself. It is about
removing the hard-coded dependencies and making it possible to change
them whenever needed.

25. 3 ways to specify dependences

26. 3 ways to specify dependences

29. $routesProvider
• Using the route provider, we can configure the routes [ paths ] available in
our application.

30. • When using the router provider you do not need to define controllers inside
html using ng-controller.
• You only need to specify the element that Angular will display templates in
using ng-view.
• Each controller is assigned to a template.
• Each controller has a specific path after the # sting in the URL