Introduction to AngularJS
16
LEARNING & DEVELOPMENT Introduction to AngularJS Presented by: Shyjal Raazi
-
Upload
shyjal-raazi -
Category
Technology
-
view
52 -
download
0
Transcript of Introduction to AngularJS
LEARNING & DEVELOPMENT
Introduction to AngularJSPresented by: Shyjal Raazi
Agenda
● Need of framework in SPA● What is angularJS● Features of angular● Angular concepts● How an angular app starts● Two way data binding● Directives● Controllers● View - Controller interaction● Modules● Services● Routing
Why a framework
Things to consider for developing SPA
DOM manipulation- how to manipulate view effectively
History- What happens when pressing back button
Routing- Readable urls
Data binding- How to bind data from model to view
View Loading- how to load view in html
Hence use Frameworks
SPA framework in JavascriptImplements client side mvc patternNo direct manipulation of DOM, less code, less complexitySupported by major browsersLarge and fast growing open source communityHelp developers write more meaningful html
Features
● Dependency injection● Two way data binding● Declarative html approach● Reusable components● Routing● Module based
Angular Concepts
● Templates● Directive● Expressions● Data binding● Scope
● Controllers● Modules● Filters● Services● Routing
How angular app starts
Two way binding
https://gist.github.com/shyjal/878ade7231c9a2ceab27
Directives
Directives are markers on a DOM element (such as an attribute, element name, comment or CSS class)
Directives tell AngularJS's HTML compiler to attach a specified behavior to that DOM element or even transform the DOM element and its children.
<body ng-app=”myapp”>
<ng-view></ng-view>
</body>
Controllers
Provides logic to your appng-controller directive specifies controller in html
Don't modify dom from controller. so how we communicate with view?
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope',
function($scope) {
$scope.greeting = 'Hola!';
}]);
View - Controller interaction
$scope is an object that can be used to communicate between view and controller
https://gist.github.com/shyjal/aa9a0e4b15029f7ea624
Modules
Re usable container for different features of an app or app itself - controllers, services, filters, directives, etc.
Modules can be loaded in any order
No need of use require js like AMD’s as angular have dependency injection mechanism
var myApp = angular.module('myApp',[ngRoute]);
Services
View-Independent business logic should not be in controller it should be in serviceControllers are view specific but services are app specific
Demos
Angular tabs implementation :
https://gist.github.com/shyjal/bc40f48fbd8293caca6e
ng-repeat Example : https://gist.github.com/shyjal/f0ab059d4df553991ea2
Routing
ngRoute (a module in angular package) / UI router ( Thirdparty )
Linking between pages, what should happen on back button, readable urls
Further
https://www.codeschool.com/courses/shaping-up-with-angular-js/
https://docs.angularjs.org/guide
https://www.airpair.com/angularjs/posts/angular-vs-react-the-tie-breaker
