Introduction to AngularJS

Marcell Kiss

Let's go to 

Codepen.io

and

create

something!

Angular services

https://docs.angularjs.org/api/ng/service

$scope

$rootScope

$q

$http

$route

Angular directives

https://docs.angularjs.org/api/ng/directive

ngClick

ngApp

ngInclude

ngModel

ngController

ngRepeat

Angular functions

https://docs.angularjs.org/api/ng/function

angular.extend

angular.bootstrap

angular.noop

angular.forEach

angular.copy

Repeat and filters

Get back to

Codepen.io

Templates

<script type="text/ng-template" id="template.html">
  Content of the template.
</script>


...
<div ng-include="'template.html'"></div>

Routing

myApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
      }).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html',
        controller: 'PhoneDetailCtrl'
      }).
      otherwise({
        redirectTo: '/phones'
      });
  }]);

Project structure

app/
----- controllers/
---------- mainController.js
---------- otherController.js
----- directives/
---------- mainDirective.js
---------- otherDirective.js
----- services/
---------- userService.js
---------- itemService.js
----- js/
---------- bootstrap.js
---------- jquery.js
----- app.js
views/
----- mainView.html
----- otherView.html
----- index.html

app/
----- shared/   
---------- sidebar/
--------------- sidebarDirective.js
--------------- sidebarView.html
----- components/   /
---------- home/
--------------- homeController.js
--------------- homeService.js
--------------- homeView.html
---------- blog/
--------------- blogController.js
--------------- blogService.js
--------------- blogView.html
----- app.module.js
----- app.routes.js
assets/...    
index.html

My service

myApp.factory('batchLog', ['$interval', '$log', function($interval, $log) {
  var messageQueue = [];

  function log() {
    if (messageQueue.length) {
      $log.log('batchLog messages: ', messageQueue);
      messageQueue = [];
    }
  }

  // start periodic checking
  $interval(log, 50000);

  return function(message) {
    messageQueue.push(message);
  }
}]);

My directive

myApp.directive('myDialog', function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: {},
    templateUrl: 'my-dialog.html',
    link: function (scope, element, attr) {
      scope.name = 'Jeff';
    }
  };
});

https://docs.angularjs.org/guide/directive

My filter

myApp.filter('reverse', function() {
  return function(input, uppercase) {
    input = input || '';
    var out = "";
    for (var i = 0; i < input.length; i++) {
      out = input.charAt(i) + out;
    }
    // conditional based on optional argument
    if (uppercase) {
      out = out.toUpperCase();
    }
    return out;
  };
})

Thanks for your attention

Q & A