angular js 1.3 basic tutorial
TRANSCRIPT
![Page 1: Angular js 1.3 basic tutorial](https://reader030.vdocument.in/reader030/viewer/2022032505/55c59e12bb61ebf96a8b47e4/html5/thumbnails/1.jpg)
AL-Mut'az Bellah SalahatSenior Software Engineer
TechTalkAmma/Jordan
v1.3
![Page 2: Angular js 1.3 basic tutorial](https://reader030.vdocument.in/reader030/viewer/2022032505/55c59e12bb61ebf96a8b47e4/html5/thumbnails/2.jpg)
I play JavaScript Everywhere
You can find me here :@msalahathttp://github.com/msalahathttp://fb.me/msalahat
![Page 3: Angular js 1.3 basic tutorial](https://reader030.vdocument.in/reader030/viewer/2022032505/55c59e12bb61ebf96a8b47e4/html5/thumbnails/3.jpg)
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
![Page 4: Angular js 1.3 basic tutorial](https://reader030.vdocument.in/reader030/viewer/2022032505/55c59e12bb61ebf96a8b47e4/html5/thumbnails/4.jpg)
Examples of this presentation can be found here :
http://bit.ly/angularjs-tutorial
![Page 5: Angular js 1.3 basic tutorial](https://reader030.vdocument.in/reader030/viewer/2022032505/55c59e12bb61ebf96a8b47e4/html5/thumbnails/5.jpg)
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.
![Page 6: Angular js 1.3 basic tutorial](https://reader030.vdocument.in/reader030/viewer/2022032505/55c59e12bb61ebf96a8b47e4/html5/thumbnails/6.jpg)
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.
![Page 7: Angular js 1.3 basic tutorial](https://reader030.vdocument.in/reader030/viewer/2022032505/55c59e12bb61ebf96a8b47e4/html5/thumbnails/7.jpg)
SPA Challenges
• Navigation and back button
• Google analytics
• HTML templates
• Code structure
• JavaScript and HTML interaction
![Page 8: Angular js 1.3 basic tutorial](https://reader030.vdocument.in/reader030/viewer/2022032505/55c59e12bb61ebf96a8b47e4/html5/thumbnails/8.jpg)
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.
![Page 9: Angular js 1.3 basic tutorial](https://reader030.vdocument.in/reader030/viewer/2022032505/55c59e12bb61ebf96a8b47e4/html5/thumbnails/9.jpg)
AngularJS App Structure
![Page 10: Angular js 1.3 basic tutorial](https://reader030.vdocument.in/reader030/viewer/2022032505/55c59e12bb61ebf96a8b47e4/html5/thumbnails/10.jpg)
Why Angular is Awesome?
Two way data binding
Regular Way
![Page 11: Angular js 1.3 basic tutorial](https://reader030.vdocument.in/reader030/viewer/2022032505/55c59e12bb61ebf96a8b47e4/html5/thumbnails/11.jpg)
Angular Way
![Page 12: Angular js 1.3 basic tutorial](https://reader030.vdocument.in/reader030/viewer/2022032505/55c59e12bb61ebf96a8b47e4/html5/thumbnails/12.jpg)
• 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
![Page 13: Angular js 1.3 basic tutorial](https://reader030.vdocument.in/reader030/viewer/2022032505/55c59e12bb61ebf96a8b47e4/html5/thumbnails/13.jpg)
• Let’s build a character / word counter tool
![Page 14: Angular js 1.3 basic tutorial](https://reader030.vdocument.in/reader030/viewer/2022032505/55c59e12bb61ebf96a8b47e4/html5/thumbnails/14.jpg)
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
![Page 15: Angular js 1.3 basic tutorial](https://reader030.vdocument.in/reader030/viewer/2022032505/55c59e12bb61ebf96a8b47e4/html5/thumbnails/15.jpg)
ng-class
![Page 16: Angular js 1.3 basic tutorial](https://reader030.vdocument.in/reader030/viewer/2022032505/55c59e12bb61ebf96a8b47e4/html5/thumbnails/16.jpg)
ng-repeat
![Page 17: Angular js 1.3 basic tutorial](https://reader030.vdocument.in/reader030/viewer/2022032505/55c59e12bb61ebf96a8b47e4/html5/thumbnails/17.jpg)
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
![Page 18: Angular js 1.3 basic tutorial](https://reader030.vdocument.in/reader030/viewer/2022032505/55c59e12bb61ebf96a8b47e4/html5/thumbnails/18.jpg)
![Page 19: Angular js 1.3 basic tutorial](https://reader030.vdocument.in/reader030/viewer/2022032505/55c59e12bb61ebf96a8b47e4/html5/thumbnails/19.jpg)
Controller
• In AngularJS, the controller is where the behavior of your application is located.
• DOM manipulation should not be done inside a controller.
![Page 20: Angular js 1.3 basic tutorial](https://reader030.vdocument.in/reader030/viewer/2022032505/55c59e12bb61ebf96a8b47e4/html5/thumbnails/20.jpg)
$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.
![Page 21: Angular js 1.3 basic tutorial](https://reader030.vdocument.in/reader030/viewer/2022032505/55c59e12bb61ebf96a8b47e4/html5/thumbnails/21.jpg)
$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.
![Page 22: Angular js 1.3 basic tutorial](https://reader030.vdocument.in/reader030/viewer/2022032505/55c59e12bb61ebf96a8b47e4/html5/thumbnails/22.jpg)
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
![Page 23: Angular js 1.3 basic tutorial](https://reader030.vdocument.in/reader030/viewer/2022032505/55c59e12bb61ebf96a8b47e4/html5/thumbnails/23.jpg)
![Page 24: Angular js 1.3 basic tutorial](https://reader030.vdocument.in/reader030/viewer/2022032505/55c59e12bb61ebf96a8b47e4/html5/thumbnails/24.jpg)
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.
![Page 25: Angular js 1.3 basic tutorial](https://reader030.vdocument.in/reader030/viewer/2022032505/55c59e12bb61ebf96a8b47e4/html5/thumbnails/25.jpg)
3 ways to specify dependences
![Page 26: Angular js 1.3 basic tutorial](https://reader030.vdocument.in/reader030/viewer/2022032505/55c59e12bb61ebf96a8b47e4/html5/thumbnails/26.jpg)
3 ways to specify dependences
![Page 27: Angular js 1.3 basic tutorial](https://reader030.vdocument.in/reader030/viewer/2022032505/55c59e12bb61ebf96a8b47e4/html5/thumbnails/27.jpg)
![Page 28: Angular js 1.3 basic tutorial](https://reader030.vdocument.in/reader030/viewer/2022032505/55c59e12bb61ebf96a8b47e4/html5/thumbnails/28.jpg)
![Page 29: Angular js 1.3 basic tutorial](https://reader030.vdocument.in/reader030/viewer/2022032505/55c59e12bb61ebf96a8b47e4/html5/thumbnails/29.jpg)
$routesProvider
• Using the route provider, we can configure the routes [ paths ] available in our application.
![Page 30: Angular js 1.3 basic tutorial](https://reader030.vdocument.in/reader030/viewer/2022032505/55c59e12bb61ebf96a8b47e4/html5/thumbnails/30.jpg)
• 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
![Page 31: Angular js 1.3 basic tutorial](https://reader030.vdocument.in/reader030/viewer/2022032505/55c59e12bb61ebf96a8b47e4/html5/thumbnails/31.jpg)