24
Single Page Applications with AngularJS RUMESH ERANGA HAPUARACHCHI [email protected] http://testedandwrote.blogspot.com

Single page applications with AngularJS

Embed Size (px)

DESCRIPTION

AngularJS Single Page Applications Basics

Citation preview

Page 1: Single page applications with AngularJS

Single Page Applications with AngularJSRUMESH ERANGA HAPUARACHCHI

[email protected]

http://testedandwrote.blogspot.com

Page 2: Single page applications with AngularJS

Project Sourceshttps://github.com/rehrumesh/spa-with-angularjs

Page 3: Single page applications with AngularJS

Tools Needed Any of following :

Visual Studio

MEAN stack (mean.io)

Sublime / Notepad ++ or any other good text editor

Page 4: Single page applications with AngularJS

Topics will be covering What is a Single Page Application

Other libraries for SPA

Features of AngularJs

Getting Started with our project

Directives, Filters and Data Binding

Views Controllers and $scope

Modules, Routes and Factories

Page 5: Single page applications with AngularJS

Single Page Applications

Example Sites:

www.gmail.com

www.Hotmail.com

www.trello.com

http://www.hipmunk.com

Page 6: Single page applications with AngularJS

Other libraries for SPA

Page 7: Single page applications with AngularJS

angularjs.orgFull-featured single page application framework

Page 8: Single page applications with AngularJS

Angular Framework

Data binding

MVC

Routing

Testing

Templates

History

Factories

ViewModel

Controllers

Views

Directives

Services

Dependency Injection

Validation

Page 9: Single page applications with AngularJS

Getting Started with our ProjectLETS START CODING

Page 10: Single page applications with AngularJS

Directives, Filters and Data Binding

Page 11: Single page applications with AngularJS

Directives Way to teach HTML to do new tricks

ng-app

ng-model

ng-controller

and many more

You can create your own directives also

Page 12: Single page applications with AngularJS

Directives, Filters and Data BindingDEMO

Page 13: Single page applications with AngularJS

Views, Controllers and $scope

Page 14: Single page applications with AngularJS

Views Controllers and $scope

Page 15: Single page applications with AngularJS

Views Controllers and $scopeDEMO

Page 16: Single page applications with AngularJS

Modules

Click icon to add picture

Page 17: Single page applications with AngularJS

Modules

Page 18: Single page applications with AngularJS

ModulesDEMO

Page 19: Single page applications with AngularJS

Angular Routing and Factory

Page 20: Single page applications with AngularJS

Routing /myvisits /visitors

Page 21: Single page applications with AngularJS

Routing and FactoryDEMO

Page 22: Single page applications with AngularJS

Customer Manager DemoBY : DAN WHALIN

URL : https://github.com/danwahlin/customermanager

Page 23: Single page applications with AngularJS

Questions?

Page 24: Single page applications with AngularJS

Thank you