ANGULARJSDEEP DIVE INTO

FOR BEGINNERS

VASSILIS PITSOUNISFRONT END DEVELOPER @ JEXIA IN INDUSTRY FROM 2000 - WORKED AS WEB & APPS DEVELOPER IN SEVERAL START UPS AND COS

GITHUB.COM/VAPITS

@VAPITS

AUTHOR

FOLLOW

LET’S STARTvar myApp = angular.module(‘myApp’,[]);

FRAMEWORK, NOT LIBRARY THERE ARE NO READY TO CALL FUNCTIONS

HTML AS IT SHOULD BE ANGULAR IS HERE TO GIVE PURPOSE TO THE DOM

angularjs.org

DEEP DIVE INTO ANGULARJS

WHY SHOULD I USE IT?

▸ Bootstrapping

▸ Templates

▸ 2-way data binding

▸ Module based

▸ Routing

▸ Directives

▸ Unit Test

▸ HUGE Community

DEEP DIVE INTO ANGULARJS

DOES CHUCK APPROVES?

+ SAVES YOU TIME! + LOT’S OF DEVS+ JOBS OPPORTUNITIES (WE ARE HIRING!!) + GOOGLE WILL BE THERE

ANGULARJS VS REACTJS VS EMBERJS VS BACKBONEJS

SOURCE: GOOGLE TRENDS

DIVE #1

M.V.C

MODEL VIEW CONTROLLEROUR ENTIRE MODEL CAN BE CONTAINED IN A

SINGLE JAVASCRIPT OBJECT.

var name = ‘Joe’;

MODEL VIEW CONTROLLEROUR ENTIRE MODEL CAN BE CONTAINED IN A

SINGLE JAVASCRIPT OBJECT.UPGRADED HTML WITH REFERENCES TO MODEL

<label>Name:</label> <input ng-model=“name”/> <h2>{{name}}</h2>

<button ng-click=“saveName()”> Save </button>

var name = ‘Joe’;

MODEL VIEW CONTROLLEROUR ENTIRE MODEL CAN BE CONTAINED IN A

SINGLE JAVASCRIPT OBJECT.

var name = ‘Joe’; function myCtrl( $scope ) {

$scope.name = ‘Joe’;

$scope.saveName = function() { alert( $scope.name ); };

}

UPGRADED HTML WITH REFERENCES TO MODEL

JS CODE THAT POPULATES THE VIEW AND REACTS WITH CHANGES IN IT

<label>Name:</label> <input ng-model=“name”/> <h2>{{name}}</h2>

<button ng-click=“saveName()”> Save </button>

A GRAPH ALWAYS HELPS

DIVE #2BEST OF

YOU CAN EASILY ADD A TWO WAY BINDINGTO THE MODEL BY JUST:

DEEP DIVE INTO ANGULARJS

BEST OF

▸ Two Way Binding

▸ Templates

▸ Dependency Injections

▸ Directives

▸ Filters

TEMPLATES AS EASY AS THE HTML…

DEEP DIVE INTO ANGULARJS

BEST OF

▸ Two Way Binding

▸ Templates

▸ Dependency Injections

▸ Directives

▸ Filters NGRPEAT IS AN AMAZING DIRECTIVE OF ANGULARJS.

I BET YOU WILL LOVE IT!

DEPENDENCY INJECTIONS… PIECE OF CAKE

DEEP DIVE INTO ANGULARJS

BEST OF

▸ Two Way Binding

▸ Templates

▸ Dependency Injections

▸ Directives

▸ Filters

DIRECTIVES, HARD AT THE BEGINNING BUT A MUST!

DEEP DIVE INTO ANGULARJS

BEST OF

▸ Two Way Binding

▸ Templates

▸ Dependency Injections

▸ Directives

▸ Filters

Code for directive

Directive in template

Browser result

DEEP DIVE INTO ANGULARJS

BEST OF

▸ Two Way Binding

▸ Templates

▸ Dependency Injections

▸ Directives

▸ Filters

DEEP DIVEPERFORMANCE

DEEP DIVE INTO ANGULARJS

IF YOU WANT PERFORMANCE JUST DON’T

▸ Watchers (Multiple two-way binders)

▸ $scope.$watch

▸ Fat controllers

▸ jQuery

▸ Complicated functions in expressions (templates).

DEEP DIVE INTO ANGULARJS

THREE SIMPLE RULES FOR SPEED

▸ Use one-way binding

▸ Use Service for data & http requests

▸ The more directives, the better.

DEEP DIVE INTO ANGULARJS

THREE SIMPLE RULES FOR SPEED

▸ Use one-way binding

▸ Use Service for data & http requests

▸ The more directives, the better.

DEEP DIVE INTO ANGULARJS

THREE SIMPLE RULES FOR SPEED

▸ Use one-way binding

▸ Use Service for data & http requests

▸ The more directives, the better.

DEEP DIVE INTO ANGULARJS

▸ Use one-way binding

▸ Use Service for data & http requests

▸ The more directives, the better.

WE WILL SPEAK FURTHER FOR DIRECTIVES ON A NEXT PRESENTATION.YES THEY ARE CHALLENGING ENOUGH TO HAVE THEIR OWN PRESENTATION

THREE SIMPLE RULES FOR SPEED

IS IT EASY TO LEARN?

DEEP DIVE INTO ANGULARJS

DOCUMENTATION

▸ https://docs.angularjs.org/api

▸ angularjs.org

GITHUB.COM/VAPITS @VAPITS

FOLLOW, CONTACT &FIND THE PRESENTATION & EXAMPLES IN MY GITHUB & LINKEDIN PAGE

NL.LINKEDIN.COM/IN/VAPITS