Controllers and Services

  1. Controllers
    1. AngularJS controllers contain the app's business logic
    2. ngController directive attaches a controller class to the view
    3. Uses $scope to manipulate variables that are used in the view
    4. Example changing the yourName variable
      <html ng-app="myApp" ng-controller="studentController">
      
      skip...
      
      <script>
      
      var app = angular.module('myApp', []);
      app.controller('studentController', function($scope) {
      	$scope.yourName = 'AngularJS';
      });
      
      </script>
      
      </html>
      
    5. Use $scope to create methods accessible from the view
      <button ng-click="sayHello()">Greet</button>
      
      skip...
      app.controller('studentController', function($scope) {
      	$scope.yourName = 'AngularJS';
      	
      	$scope.sayHello = function() {
      		alert('Hello, ' + $scope.yourName);
      	};
      });
      
    6. Try example in Plunker
    7. $scope is an example of Dependency Injection (DI)
      1. DI is a software design pattern that addresses how components access their dependencies
      2. Used pervasively in Angular
      3. Using a minifier or obfuscater will break dependency injection unless using an array to list dependencies
        app.controller('studentController', ['$scope', 
        	function($scope) {		
        		// controller code
        	}
        ]);
        
  2. Services
    1. Service - an object used by the app to perform some type of logic
    2. They are lazily instantiated - only instantiated when an app component needs it
    3. They are singletons - each components dependent on a service gets a reference to a single instance of the service
    4. Many built-in services like $http
      app.controller('studentController', ['$scope', '$http', 
      	function($scope, $http) {		
      		
      		// Make HTTP request for test.html
      		$http.get('test.html')
      			.success(function(response) {
      				console.log('Success! ' + response);
      			})
      			.error(function() {
      				console.log('Request failed.');
      			});			
      	}
      ]);
      
    5. Creating a service
      1. Use a service factory function to generate a single object that entire app uses
      2. Two ways to create: .factory() or .service()
        1. Example with .factory()
          angular.module('myApp')
            .factory('notifyService', ['$window', 
              function(win) {
                var factory = {};
                
                factory.notify = function(msg) {
                   win.alert(msg);
                };
                
                return factory;
              }
            ]);
          
        2. Example with .service()
          angular.module('myApp')
            .service('notifyService', ['$window', 
              function(win) {
                
                this.notify = function(msg) {
                    win.alert(msg);
                };
              }
            ]);
          
      3. Example controller that uses the "notifyService" service
        angular.module('myApp')
          .controller('MyController', ['$scope', 'notifyService', 
            
            function($scope, notifyService) {
              $scope.callNotify = function(msg) {
                notifyService.notify(msg);
              };
            }
            
          ]);
        

        View in Plunker