From zero to HERO with

1. From zero to HERO with TrifonStatkov

2. About me • TrifonStatkov • Software developer at • Co-owner at • @Tricho340

3. 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

4. Part I. Absolute introduction to Angular JS

5. Angular JS facts (1) • Open-source JavaScript framework • Developed in 2009 by MiškoHevery and Adam Abrons • Maintained by Google • Actively developed and supported

6. 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

7. 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

8. 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

9. Part II. Angular JS building blocks

10. Angular JS is MVC • MVC = Model-View-Controller • Less dependencies • Improves maintainability • It is easier to read and understand code

11. 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

12. 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

13. C for Controller • Controls everything • Knows about both the Model and the View • The “logic” resides in it • What to happen, when and how

14. 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!

15. Two-way data binding illustrated

16. Dependency Injection • No more “global” objects • Classes will get the objects they need (their dependencies) in order to work

17. Anatomy of an Angular application (1) • Templates • Routes • Animations • Controllers • Models • Services • Directives • Modules • Filters • Factories • Scopes

18. Controllers in Angular JS • Define the application’s behaviour

19. What to put in the Controller? • Focus on the application logic • Don’t worry about the Model – Angular JS will take care of it

20. Controllers in Angular JS (example)

21. 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

22. Communication between scopes

23. Dispatching event from parent scope to child scope $scope.$broadcast(‘event_name’, (optional) array of arguments topass toeventlisteners); // where $scope is the parent scope

24. 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

25. Dispatching events from child scope to parent scope $scope.$emit(‘event_name’); // where $scope is the child scope

26. Detecting events dispatched from child scope in the parent scope $scope.$on(‘event_name’); // where $scope is the parent scope

27. What is Angular module? (1) • Container for • Controllers • Services • Directives • Factories • Filters • Configuration information

28. What is Angular module? (2) • Each Angular JS app contains at least one module • Discrete logical part of the application

29. 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

30. 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

31. 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.

32. Defining a new filter module.filter(“filter_name”, function(data) { // data is filtered or modified // in a specific manner and returned return data; }

33. Using the filter we just defined <div data-ng-repeat= “record in records | filter: filter_name” > </div>

34. Providers (1) • 4 types • Factory • Service • Value • Provider

35. 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

36. 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; } } });

37. Factory example (2) – using the factory Module.controller(‘ControllerName’, function ControllerName($scope, factory_id) { $scope.methodname = function() { factory_id.functionname(); } });

38. Providers - Service • You define a function in which additional functions and properties are defined via the this keyword

39. 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; });

40. Service example (2) - using a service in a controller Module.controller(‘ControllerName’, function ControllerName($scope, service_name) { $scope.methodname = function() { service_name.function_name(); } });

41. Providers - value • Similar to constants • Could be used to store configuration properties

42. Value example (1) - defining a value module.value(‘value_name’, ‘value’);

43. 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 } } });

44. 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

45. Provider example (1) - defining a provider module.provider(‘provider_name’, function() { this.$get = function() { return { function_name: function() { }, another_function: function() { } } });

46. Provider example (2) - Using a provider Module.controller(‘ControllerName’, function ControllerName($scope, provider_name) { $scope.methodname = function() { provider_name.function_name(); } });

47. Angular JS best practices

48. 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

49. Angular JS best practice #2 • Write some tests using Jasmine

50. What is Angular module? • Container for • Services • Directives • Factories • Filters • Configuration information