Introduction to

By Ahmed EL-Harouny21 August 2014

Page / Copyright ©2014 by Readify Pty Ltd2

Agenda› What is AngularJS?

› Why?

› Getting Started

› AngularJS Building Blocks

› Controllers

› Directives

› Services

› Scope

Page / Copyright ©2014 by Readify Pty Ltd3

What is AngularJS?• A JavaScript framework for building client side

applications that runs in the browser.• Started by Google but quickly became a popular open

source project.• It aims to simplify development, maintaining and testing

applications.

Page / Copyright ©2014 by Readify Pty Ltd4

Why?

• Dependency Injection• Data Binding• Routing• Templates• MVC or MVVM• Ajax• Animation• And more!

/ Copyright ©2014 by Readify Pty Ltd5Page

Getting StartedDemo (link)

Page / Copyright ©2014 by Readify Pty Ltd6

AngularJS Building Blocks• Modules• Controllers• Directives• Filters• Services• Configs• Routes

Services Recipes Constant

Page / Copyright ©2014 by Readify Pty Ltd7

Modules- A module is a logical container for the different parts of your app

– controllers, services, filters, directives, etc.- A module is not a namespace.

DependenciesName

Page / Copyright ©2014 by Readify Pty Ltd8

Modules

/ Copyright ©2014 by Readify Pty Ltd9Page

ModulesDemo (link)

Page / Copyright ©2014 by Readify Pty Ltd10

Controllers- A Controller is a JavaScript constructor function that is used to

work with scope (view model).- Controllers are attached to DOM using ng-controller directive.

Name DependenciesConstruction Function

/ Copyright ©2014 by Readify Pty Ltd11Page

ControllersDemo (link)

Page / Copyright ©2014 by Readify Pty Ltd12

DirectivesDirectives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS to attach a specified behavior to that DOM.

Built-In Directives

Page / Copyright ©2014 by Readify Pty Ltd13

DirectivesCustom Directives

- Custom directive can be used to provide a declarative markup approach and reusability.

- There are many ways to declare a directive in markup using (HTML attributes, elements, comments and CSS classes).

- Prefixing directive names to prevent confusion with other HTML attributes and elements is a must.

/ Copyright ©2014 by Readify Pty Ltd14Page

DirectivesDemo (link)

Page / Copyright ©2014 by Readify Pty Ltd15

Services- Services is a way to organize and share code across app.- Services are lazy initialized and singleton.

Built-In Services• $http• $log• $window

Custom Services

/ Copyright ©2014 by Readify Pty Ltd16Page

ServicesDemo (link)

Page / Copyright ©2014 by Readify Pty Ltd17

Scope- Scopes are driven by directives.- Any scope belongs exactly to one DOM element.

Page / Copyright ©2014 by Readify Pty Ltd18

Scope- AngularJS will always create a root scope driven by the ng-app

directive.

ng-app

ng-controller

ng-controller

/ Copyright ©2014 by Readify Pty Ltd19Page

Tips• Prefix object names.• Install Batarang chrome extension.• Know all ng-* directives.• Read Developer Guide (link).  • Use chrome.

Thank you