slides - JS(Saturday)

From zero to HERO with
Trifon Statkov
About me
 Trifon Statkov
 Software developer at
 Co-owner at
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
 More efficiency in development
 Separation of concerns
Some more details
 Uses JQLite (a subset of JQuery) for DOM
 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
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)
 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
 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
(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
// where $scope is the child scope
Detecting events dispatched from child
scope in the parent scope
// where $scope is the parent scope
What is Angular module? (1)
 Container for
Configuration information
What is Angular module? (2)
 Each Angular JS app contains at least one
 Discrete logical part of the application
What is Angular directive? (1)
 Use them when you have to make DOM
 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
“record in records | filter: filter_name”
Providers (1)
 4 types
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() {
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
Module.controller(‘ControllerName’, function
ControllerName($scope, service_name) {
$scope.methodname = function() {
Providers - value
 Similar to constants
 Could be used to store configuration
Value example (1) - defining a value
module.value(‘value_name’, ‘value’);
Value example (2) - using a value in a
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
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() {
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
Configuration information
The ngApp directive
 <div data-ng-app=“”>
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
 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)
 - Angular JS video
course by John Lindquist (@johnlindquist)
 - a blog that
contains some great articles about Angular JS
 - Angular JS official website
 - Angular JS API
 Angular JS Google Group
Some great resources (2)
=en - Angular JS Batarang, a great solution for
debugging Angular JS applications
_embedded&v=q-7mhcHXSfM#! - A video demo
of using Batarang
Some great resources (3)
 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
 A guide to testing Angular JS applications
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)!
Thanks to our Sponsors:
Diamond Sponsor:
Platinum Sponsors:
Gold Sponsors:
Swag Sponsors:
Media Partners:

similar documents