single page applications using angularjs - files.meetup.comfiles.meetup.com/14099052/angularjs...
TRANSCRIPT
Single Page Applications
using AngularJS
www.kratoes.com © kratoes
www.kratoes.com © kratoes
Session Objectives
History of AngularJS
Introduction & Features of AngularJS
Why AngularJS
Single Page Application and its challenges
Data Binding, Directives and Filters
What is MVC and MVVM
Practical's on AngularJS
www.kratoes.com © kratoes
AngularJS History
AngularJS is one of today’s hottest JavaScript MVC ( MVVM ) Frameworks .
AngularJS was originally developed in 2009 by Misko Hevery and Adam Abrons at
Brat Tech LLC, Now it was officially supported & maintained by Google .
Misko Hevery is a Google employee, started to work with AngularJS in 2009.
The idea turned out very well, and the project is now officially supported by
Google.
www.kratoes.com © kratoes
What is AngularJS
Library Vs Framework
AngularJS is a framework that makes it easier to communicate between your
HTML document and JavaScript
It is an open source web application framework and framework for dynamic web
apps.
If facilitates HTML as your template language.
AngularJS data binding and dependency injection eliminates extra code that
you may need to write.
www.kratoes.com © kratoes
Why AngularJS
MVC done right
Most frameworks implement MVC by asking you to split your app into MVC
components, then require you to write code to string them up together again.
That’s a lot of work. Angular implements MVC by asking you to split your app
into MVC components, then just let Angular do the rest. Angular manages your
components for you and also serves as the pipeline that connects them.
www.kratoes.com © kratoes
Why AngularJS
Eliminates DOM Manipulations
<p id="greeting2"></p>
<script>
$(function(){
$('#greeting2').text('Hello Kratoes!');
});
</script>
<p ng:init="greeting = 'Hello Kratoes!'">{{greeting}}</p>
www.kratoes.com © kratoes
Why AngularJS
Behaviour with directives
AngularJS has a set of built-in directives which offers functionality to your
applications.
AngularJS also lets you define your own directives.
<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
template : "<h1>Made by a directive!</h1>"
};
});
</script>
</body>
www.kratoes.com © kratoes
Why AngularJS
Dependency Injection (DI)
is a software design pattern that deals with how components get hold of their
dependencies.
The Angular injector subsystem is in charge of creating components, resolving their
dependencies, and providing them to other components as requested.
Why Demo? Lets see a real ti e usage….
www.kratoes.com © kratoes
Single Page Application
Single page application (SPA) is a web application that fits on a single page.
All your code (JS, HTML, CSS) is retrieved with a single page load.
And navigation between pages performed without refreshing the whole page.
Lets see how this works…….
www.kratoes.com © kratoes
Single Page Application
Pros
No page refresh
Better user experience
SPA feels like a native application: fast and responsive.
Ability to work offline
Cons
More complex to build
Initial load is slow
SPA needs to download more resources when you open it.
Client should have javascript enabled
www.kratoes.com © kratoes
Data Binding
Angular gives you the ability to define the binding between the data in your
scope and your views
• Most directives that are using expressions are creating a bidirectionnal data
binding for you
• You can create manually new bindings with the directive ngModel
• The changes are visible in real-time in all the expressions
www.kratoes.com © kratoes
Filters
Angular comes with a collection of filters that can change the way your data
are displayed
• Usage: {{expression | filter}}
•Ex : orderBy, lowercase, uppercase, limitTo , date, filter etc..,
www.kratoes.com © kratoes
Scope
Scope is a special javascript object which plays the role of joining controller
with the views.
Scope contains the model data. In controllers, model data is accessed via
$scope object.
Scope Inheritance
Scope are controllers specific. If we defines nested controllers then child
controller will inherit the scope of its parent controller.
www.kratoes.com © kratoes
Course Curriculum
Class 1 JavaScript MVC framework a AngularJS
Class 2 Services, Inheritance and Dependency Injection
Class 3 Routes, Nested Routes, Directive and Filters
Class 4 Custom Directives and Custom Filters
Class 5 Third-party Modules, ng-Router, ui-Router
Class 6 Angular with Bootstrap
Class 7 Unit Testing in AngularJS
Class 8 Project Discussion
www.kratoes.com © kratoes
Why Kratoes?
Industry Recognized
Certificates
Led-Live online classes
with experts
100% Placement
Assistance
Lifetime access to Course
Content via LMS
24x7 Support
www.kratoes.com © kratoes