From zero to HERO with
Trifon Statkov
About me
 Trifon Statkov
 Software developer at
 Co-owner at

@Tricho340
The “Plan”
 I will make you feel confident using Angular
JS in less than 60 minutes
 Presentation comprises of 3 parts:
 Part I. Absolute introduction to Angular JS
 Part II. Angular JS building blocks
 Part III. Some coding
Part I. Absolute introduction to Angular JS
Angular JS facts (1)
 Open-source JavaScript framework
 Developed in 2009 by Miško Hevery and
Adam Abrons
 Maintained by Google
 Actively developed and supported
Why use it?
 The problem – HTML is great for static pages,
but has no tools for web applications
 The solution – extend and adapt HTML
vocabulary with some additional declarations
that are useful for web applications
More benefits
 Less boilerplate code
 Less effort in mundane tasks allowing for
better focus on what is ACTUALLY VALUABLE
– THE LOGIC
 More efficiency in development
 Separation of concerns
Some more details
 Uses JQLite (a subset of JQuery) for DOM
manipulations
 If you include jQuery before Angular, it will be
used instead of JQLite
Part II. Angular JS building blocks
Angular JS is MVC




MVC = Model-View-Controller
Less dependencies
Improves maintainability
It is easier to read and understand code
M for Model
 Holds the data
 Notifies the View and the Controller for
changes in the data
 Does not know about the View and the
Controller
V for View




Displays stuff (buttons, labels, …)
This is what your users will see
Knows about the Model
Usually displays something related to the
current state of the Model
C for Controller




Controls everything
Knows about both the Model and the View
The “logic” resides in it
What to happen, when and how
Two-way data binding
 View is updated automatically when the
Model is changed
 Model is updated automatically when a value
in the View has changed
 No DOM manipulation boilerplate needed!
Two-way data binding illustrated
Dependency Injection
 No more “global” objects
 Classes will get the objects they need (their
dependencies) in order to work
Anatomy of an Angular application (1)








Controllers
Models
Services
Directives
Modules
Filters
Factories
Scopes
 Templates
 Routes
 Animations
Controllers in Angular JS
 Define the application’s behaviour
What to put in the Controller?
 Focus on the application logic
 Don’t worry about the Model – Angular JS
will take care of it
Controllers in Angular JS (example)
The Scope object ($scope) (1)
 One scope for each controller
 The GLUE between the View and the
Controller
 A hash of key/values
 Holds the data to display in the View
 $rootScope object – visible in all controllers
Communication between scopes
Dispatching event from parent scope to
child scope
$scope.$broadcast(‘event_name’,
(optional) array of
arguments to pass
to event listeners);
// where $scope is the parent scope
Detecting events dispatched from parent
scope in the child scope
$scope.$on(‘event_name’, function(args) {
// code to invoke if the event occurs
});
// where $scope is the child scope
Dispatching events from child scope to
parent scope
$scope.$emit(‘event_name’);
// where $scope is the child scope
Detecting events dispatched from child
scope in the parent scope
$scope.$on(‘event_name’);
// where $scope is the parent scope
What is Angular module? (1)
 Container for






Controllers
Services
Directives
Factories
Filters
Configuration information
What is Angular module? (2)
 Each Angular JS app contains at least one
module
 Discrete logical part of the application
What is Angular directive? (1)
 Use them when you have to make DOM
manipulations
 Ever wanted to create your own tag or
attribute – this is how you do it!
 Takes you one step closer to creating
domain-specific markup
What is Angular directive? (2)
 Directives should not change a model or
controller’s logic
 All they handle is creating the page’s content
and structure of elements
What is Angular filter? (1)
 Reusable operation using which you can
modify the content that is shown on the page
 Examples: uppercase a value, filter search
results, etc.
Defining a new filter
module.filter(“filter_name”, function(data) {
// data is filtered or modified
// in a specific manner and returned
return data;
}
Using the filter we just defined
<div
data-ng-repeat=
“record in records | filter: filter_name”
>
</div>
Providers (1)
 4 types




Factory
Service
Value
Provider
Providers - Factory
 We define a function that returns an object to
which we have attached methods and
properties that will be accessible by factory
users later
 This object is available everywhere in the
module in which the factory was defined via
Dependency Injection
Factory example (1) – defining the factory
module.factory(‘factory_id’, function() {
return {
functionname: function() {
return “this is a function”;
},
anotherfunction: function() {
// make a request and get data from backend
return data;
}
}
});
Factory example (2) – using the factory
Module.controller(‘ControllerName’, function
ControllerName($scope, factory_id) {
$scope.methodname = function() {
factory_id.functionname();
}
});
Providers - Service
 You define a function in which additional
functions and properties are defined via the
this keyword
Service example (1) - defining a service
module.service(‘service_name’, function() {
this.function_name = function() {
return “this is a function’s result”;
};
this.anotherfunction = function() {
// make a request to backend
// and fetch data
return data;
});
Service example (2) - using a service in a
controller
Module.controller(‘ControllerName’, function
ControllerName($scope, service_name) {
$scope.methodname = function() {
service_name.function_name();
}
});
Providers - value
 Similar to constants
 Could be used to store configuration
properties
Value example (1) - defining a value
module.value(‘value_name’, ‘value’);
Value example (2) - using a value in a
controller
Module.controller(‘ControllerName’, function
ControllerName($scope, value_name) {
$scope.methodname = function() {
if (value_name == ‘1’) {
// do something based on
// specific value of the constant
}
}
});
Providers - provider
 Define $get method in a function that returns
the object to be injected
 The object can have various properties and
methods similar to the object returned by
factory
Provider example (1) - defining a provider
module.provider(‘provider_name’, function() {
this.$get = function() {
return {
function_name: function() {
},
another_function: function() {
}
}
});
Provider example (2) - Using a provider
Module.controller(‘ControllerName’, function
ControllerName($scope, provider_name) {
$scope.methodname = function() {
provider_name.function_name();
}
});
Angular JS best practices
Angular JS best practice #1
 Create a separate for module for
 Services
 Controllers
 Filters
 Parts are more isolated and decoupled
 Easier to test a part of the application
Angular JS best practice #2
 Write some tests using Jasmine
What is Angular module?
 Container for





Services
Directives
Factories
Filters
Configuration information
The ngApp directive
 <div data-ng-app=“”>
</div>
Angular animation = easy
 Introduced in latest build (05.04.2013) and
introduced by Misko in YouTube video
 Uses CSS3 transitions
 Use the ngAnimate Angular directive for the
element you wish to animate
A word of warning
 You better avoid using Angular JS for IE6 and IE7
projects
 Because of lack of support for custom tags and
hashchange events
Stuff you did not see today (and you should
definitely check out)





A lot because Angular JS is HUGE
Writing tests and executing test suite
Form validation with Angular JS
Internationalization with Angular JS (i18n)
Localization with Angular JS (l10n)
Some great resources (1)
 http://www.egghead.io/ - Angular JS video
course by John Lindquist (@johnlindquist)
 http://www.yearofmoo.com/ - a blog that
contains some great articles about Angular JS
 http://angularjs.org/ - Angular JS official website
 http://docs.angularjs.org/api/ - Angular JS API
reference
 https://groups.google.com/group/angular/ Angular JS Google Group
Some great resources (2)
 https://chrome.google.com/webstore/detail/ang
ularjsbatarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl
=en - Angular JS Batarang, a great solution for
debugging Angular JS applications
 https://www.youtube.com/watch?feature=player
_embedded&v=q-7mhcHXSfM#! - A video demo
of using Batarang
Some great resources (3)
 https://github.com/angular/angular-seed
 A starting point for Angular JS projects
 Includes end to end tests folder where you could
easily add some tests to your app using Jasmine
 http://docs.angularjs.org/guide/dev_guide.e2etesting
 A guide to testing Angular JS applications
Questions?
Thank you for your time
Expect very soon: SharePoint Saturday!
 Saturday, June 8, 2013
 Same familiar format – 1 day filled with sessions
focused on SharePoint technologies
 Best SharePoint professionals in the region
 Registrations will be open next week (15th)!
 www.SharePointSaturday.eu
Thanks to our Sponsors:
Diamond Sponsor:
Platinum Sponsors:
Gold Sponsors:
Swag Sponsors:
Media Partners: