AngularJS
By: Omnia Gamal
email :- omnia.gamal1988@gmail.com
twitter @Omnia_G
Agenda
● What is AngularJS ?
● Why Angular?
● Angular Vs Backbone
● Getting Started With AngularJS
What is AngularJS ?
● is an open-source MVC framework
● single-page applications
● maintained by Google
Why AngularJS ?
● helps you organize your JavaScript
● helps create responsive (as in fast)
websites.
● plays well with jQ...
Angular Vs Backbone
keys:
o size (BB 18kb vs angular 77kb but … )
o memory management
o nested model
o binging (angular is...
Getting Started With AngularJS
Agenda:
o Directives
o Modules
o Expressions
o Controllers
o Model
o Filters
o Create Direc...
Directives
Ex:-
● ng-app
● ng-controller
● ng-show
● ng-hide
● ng-repeat
● ng-model
Modules
angular.module('readingListApp', [])
<html ng-app="readingListApp" ></html>
Expressions
Controllers & Model
Filters
Create Directives
● restrict
● templeate or templateUrl
● scope (Isolated Scope & Binding)
● controller
● controllerAs
Services
● $http
● injector (if you want to read more about dependency injection in JS
http://krasimirtsonev.com/blog/arti...
Code Example
Unit Testing
● Karma :- (previously known as Testacular)
o is Google’s JavaScript test runner
o the natural choice for AngularJS
o it i...
● Yeoman :-
o is a toolset containing 3 core components:
i. Grunt
ii. Bower
iii. the scaffolding tool Yo
o Yo generates bo...
Angular Mock
● angular.mock
o module
o inject
o services
 $controller
 $rootScope
 $httpBackend
Ref :-
● Code :- https://github.com/OmniaGM/learn_AngularJS
● AngularJS screencasts hosted by John Lindquist, JetBrains Ev...
Getting Started With AngularJS
Upcoming SlideShare
Loading in …5
×

Getting Started With AngularJS

1,373 views

Published on

What is AngularJS ?
Why Angular?
Angular Vs Backbone
Getting Started With AngularJS ( Directives - Modules- Expressions - Controllers - Model - Filters - Create Directives - services - Unit Testing )
The code example here:- https://github.com/OmniaGM/learn_AngularJS

Published in: Software, Technology, Education
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,373
On SlideShare
0
From Embeds
0
Number of Embeds
74
Actions
Shares
0
Downloads
29
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • AngularJS is an open-source web application framework, maintained by Google, that assists with creating single-page applications
  • backbone is much stronger debency on jquery, it’s need too _, json2
    Angular it take care of memory management, layout management, events but backbone if you use marionette for exp you will never have to worry about memory management but if you not you will need to handle this by yourself
    Not supported in backbone
  • p#15
  • p#19
  • p#23
  • P#52
  • The “&” operator allows you to invoke or evaluate an expression on the parent scope of whatever the directive is inside of.
    = two binding , can be of any type. These work like actual bindings, any changes to a bound value will be reflected in everywhere.
    @, One binding, they are always strings. Whatever you write as attribute value, it will be parsed and returned as strings. Which means anything inside curly braces {{ }}, will reflect the value. {{::color}}
  • P#173
  • If you work with JavaScript, it’s highly probable that you already know of at least one of these tools.
    Let’s briefly review each of these technologies and what it’s useful for:
  • Karma it is also test framework agnostic; which means that you can use it in conjunction with any test framework of your choice (such as Jasmine, Mocha, or QUnit, among others).
    Grunt is a task runner that helps automate several repetitive tasks, such as minification, compilation (or build), testing, and setting up a preview of your application.
    Bower is a package manager that helps you find and install all your application dependencies, such as CSS frameworks, JavaScript libraries, and so on. It runs over git, much like Rails bundler, and avoids the need to manually download and update dependencies.

  • since we’re focusing here on Angular, we’re going to use the generator-angular project.
  • Getting Started With AngularJS

    1. 1. AngularJS By: Omnia Gamal email :- omnia.gamal1988@gmail.com twitter @Omnia_G
    2. 2. Agenda ● What is AngularJS ? ● Why Angular? ● Angular Vs Backbone ● Getting Started With AngularJS
    3. 3. What is AngularJS ? ● is an open-source MVC framework ● single-page applications ● maintained by Google
    4. 4. Why AngularJS ? ● helps you organize your JavaScript ● helps create responsive (as in fast) websites. ● plays well with jQuery ● is easy to test
    5. 5. Angular Vs Backbone keys: o size (BB 18kb vs angular 77kb but … ) o memory management o nested model o binging (angular is better than why?) o RESTFUL ( angular will need ngResource ) o Validation o Template Support
    6. 6. Getting Started With AngularJS Agenda: o Directives o Modules o Expressions o Controllers o Model o Filters o Create Directives o services o Unit Testing
    7. 7. Directives Ex:- ● ng-app ● ng-controller ● ng-show ● ng-hide ● ng-repeat ● ng-model
    8. 8. Modules angular.module('readingListApp', []) <html ng-app="readingListApp" ></html>
    9. 9. Expressions
    10. 10. Controllers & Model
    11. 11. Filters
    12. 12. Create Directives ● restrict ● templeate or templateUrl ● scope (Isolated Scope & Binding) ● controller ● controllerAs
    13. 13. Services ● $http ● injector (if you want to read more about dependency injection in JS http://krasimirtsonev.com/blog/article/Dependency-injection-in-JavaScript)
    14. 14. Code Example
    15. 15. Unit Testing
    16. 16. ● Karma :- (previously known as Testacular) o is Google’s JavaScript test runner o the natural choice for AngularJS o it is also test framework agnostic (What that mean?) ● Jasmine :- (is the best choise for many and It will be our choice for testing now) o Its syntax is quite similar to that of RSpec ● Bower :- o is a package manager that helps you find and install all your application dependencies o It runs over git, much like Rails bundler
    17. 17. ● Yeoman :- o is a toolset containing 3 core components: i. Grunt ii. Bower iii. the scaffolding tool Yo o Yo generates boilerplate code with the help of generators and automatically configures Grunt and Bower for your project. You can find generators for almost any JavaScript framework (Angular, Backbone, Ember, etc.) o generator-angular
    18. 18. Angular Mock ● angular.mock o module o inject o services  $controller  $rootScope  $httpBackend
    19. 19. Ref :- ● Code :- https://github.com/OmniaGM/learn_AngularJS ● AngularJS screencasts hosted by John Lindquist, JetBrains Evangelist + Productivity addict. ● codeschool - shaping up with angularJS ● Your First AngularJS App : Scaffolding, Building, and Testing ● Why AngularJS is generally better in Angular vs Ember vs backbone

    ×