Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
30 views

AngularJS Tutorial

This document outlines key concepts in AngularJS including: 1. AngularJS is a JavaScript framework that uses HTML as a template and assigns controllers to elements. It uses directives like ng-app and ng-controller. 2. Scope is a model object assigned to each controller that can contain data and be inherited. It allows accessing parent scopes. 3. Controllers are methods that initiate variables and functions accessible via their scope. Directives assign controllers to elements. 4. Services allow sharing data and functions between controllers via dependency injection into modules.

Uploaded by

deve test
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
30 views

AngularJS Tutorial

This document outlines key concepts in AngularJS including: 1. AngularJS is a JavaScript framework that uses HTML as a template and assigns controllers to elements. It uses directives like ng-app and ng-controller. 2. Scope is a model object assigned to each controller that can contain data and be inherited. It allows accessing parent scopes. 3. Controllers are methods that initiate variables and functions accessible via their scope. Directives assign controllers to elements. 4. Services allow sharing data and functions between controllers via dependency injection into modules.

Uploaded by

deve test
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

Presented by:

ANGULARJS TUTORIAL Suhaib Qaiser


www.suhaibqaiser.com
CONTENTS
A. Introduction to JavaScript Frameworks
B. Comparing AngularJS with other JS Frameworks
C. What is Scope in AngularJS?
D. Controllers and Directives in AngularJS
E. AngularJS Services
F. Routing
G. Building a single page application with AngularJS
H. Discussion and Ideas
INTRODUCTION TO JAVA SCRIPT FRAMEWORKS
Unlike most server side languages which are strongly typed language, JavaScript is loosely
typed scripting language
JavaScript is a prototype based object oriented scripting language
JavaScript object definition can be changed at runtime. It is more dynamic in nature
Every JavaScript has a prototype object within it that is used to define object properties and
functions
JavaScript alone can be run in web browsers it could be used inline or within a separate file
There are many popular frameworks in JavaScript. Like: JQuery, DOJO, Amber.js, Node.js,
Knockout.js and especially AngularJS. All have their own design and principles.
AngularJS is mostly known as MVW. Which means Model-View-Whatever
Good to read: http://www.phpied.com/3-ways-to-define-a-javascript-class/
ANGULARJS VS OTHER JAVASCRIPT FRAMEWORKS
AngularJS is considered as HTML bootstrapping language
It is also called as assembly language for HTML DOM
AngularJS uses HTML elements as its templates and assigns controller to each of them
AngularJS model is a scope object which is assigned by default with each controller
Scopes can be nested, inherited or replicated based on directive and controller
definition
AngularJS uses ng-app directive to indicate that it is angular. It uses ng-controller and
ng-* for other functions
WHAT IS SCOPE IN ANGULARJS
Scope can be considered as a model object that gets assigned with each controller
Scope can have multiple objects and can also be inherited
Scope can be isolated and nested in cases where we need
From a scope object we can access $parent which is a link to its parent scope
We can also inject multiple objects inside scope that can be used on pages
CONTROLLERS AND DIRECTIVES
AngularJS binds a controller which is a method in JavaScript. Controller method runs
and behaves like a constructor
It initiates variables and functions but all of them are limited to Scope of that
controller
Each controller have a scope and can have access to its parent controllers through
$parent scope object
Controllers are defined on the page through ng-controller directive. It can also be
assigned through defining angular directive directly
One element in HTML can have only one controller
ANGULARJS SERVICE
AngularJS Service is a way in AngularJS through which controllers can share functions
and objects
In order to have functionality shared among different controllers, we use services
Services are defined through factory and injecting into module
Services can have private and public methods depending on the API
Usually, we keep REST calls in services and use $q to perform deffered and promise
ROUTING
Angular has two types of Routing:
A. ngroute – basic routing service from AngularJS
B. ng-router – Advanced Routing services
Routing defines navigation inside an application
Routing can also have states and each state can have navigation
Ng-router also gives ability to define nested states and nested views. This is helpful if
we need sidebar and header throughout applciation
BUILDING A SINGLE PAGE APPLICATION
Let us try
IDEAS & DISCUSSION
Q&A

You might also like