Skip to content
AngularJS : Advanced Topics
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

AngularJS : Advanced Topics

A project aimed to help the user master AngularJS advanced topics. Each unit contains a tutorial with concepts, examples and best practices.


  • Routing and ($routeProvider and $routeParams)
  • Directives ($scope and Scope)
  • Directives (Require and Link attributes)
  • Services (Factory Pattern and $resource)
  • Provider Service Pattern

Suggested prerequisites


Routes and $routeProvider

/* Routes*/
//Angular routes allow us to map URLs to use templates so that every time the current route changes,
//the included view changes with it

/* $routeProvider*/
//$routeProvider allows you to specify Routes in the Angular application

//It is a good practice to re-declare your application module in every new file
angular.module('advancedTopicsApp').config(function ($routeProvider) {

  //Inside module.config, we can use one of $routeProvider's methods to define routes

  /* .when (path, route)*/
  //Adds a new route definition to the $route service

  /* .otherwise (params)*/
  //Sets route definition that will be used on route change when no other route definition is matched

  //You only need to define $routeProvider once and use method chaining
      .when('/', {
        /* Routing Components*/
        //It is possible to associate routes with templates and controllers
        templateUrl: 'views/organization.html',
        //It is a good practice to link to an already existing controller
        controller: 'OrganizationCtrl',
        //You can use 'controllerAs' to assign an alias to this controller
        controllerAs: 'organization'
      .when('/service', {
        templateUrl: 'views/service.html',
        controller: 'ServiceCtrl',
        controllerAs: 'service'
      .when('/directives', {
        templateUrl: 'views/directives.html',
        controller: 'DirectivesCtrl',
        controllerAs: 'directives'
      //Declaring routes based on Id's
      //By passing in $routeParams we can obtain identifiers and utilize them
      .when('/module/:id', {
        templateUrl: 'views/module.html',
        controller: 'ModuleCtrl',
        controllerAs: 'module'
        redirectTo: '/'

Directives ($scope and Scope)

//Directives Inherit their parent's scope by default
  .directive("module", function () {

    /* $scope */
    return {
      restrict: "E",
      templateUrl: "views/a-module.html",
      //Isolating the Scope

      //By passing an object to the scope option, you create an isolated scope.
      //This tells the directive to keep scope inside itself and not to inherit or share with others
      scope: {
        //You can pass as many bindings as you need

        //title:"@" passes in a string
        title: "=",  // '=' is a two-way binding,
        id: "="
      //There are three options when binding data to an isolated scope: @,= and & characters

      //The link function is run after the directive has been compiled and linked up
      //This is the best place to do any DOM manipulation or logic functionality

      //element: refers to the outermost element of the directive
      //attrs stands for attributes
      link: function (scope, element, attrs) {
        element.on("click", function () {
          element("div.module p").toggleClass("hidden");

      // By using the $scope variable, you can avoid using alias by binding the local variables to $scope
      //This is very helpful in the views, since you don't need to reference any controller


    /*Important: Difference between $scope and Scope Object*/

    //The scope object is used to isolate a directive's scope
    //$scope is used to set values and functions on the scope

Directives (Require and Link attributes)

  .directive("innerDirective", function () {

    return {
      restrict: "E",
      templateUrl: "views/inner-directive.html",
      /*Require directive*/
      //It allows to share a controller between directives
      // ^ indicates that you are looking for a parent directive

      /*Link's 4th parameter*/
      //The required directive's controller is passed in as link's 4th parameter and can have any name
      link: function(scope,element,attrs,DirectivesCtrl){

        scope.makeActive = function(){

        scope.innerDirectiveActive = function (){
          return DirectivesCtrl.getActive() ===;


Services (Factory Pattern and $resource)

/* Services*/
//Services should hold functions responsible for connecting and fetching data, then sharing it across our application

//Service Factory
                                           //This a naming convention
angular.module("advancedTopicsApp").factory("Module",function ModuleFactory($http, $resource){

  //By using $resource you implement all the required methods for CRUD
  return $resource("angular2.json",{},{


Provider Service Pattern

/*Provider Service Recipe*/
//It allows more configuration than a factory

//Providers run before everything else,so the only thing you can inject to them is other providers
angular.module("advancedTopicsApp").provider("Gravatar2", function Gravatar2Provider() {

  var avatarSize = 80; //Default size
  var avatarUrl = "";

  this.setSize = function(size){
    avatarSize = size;

//The $get function is where you return an object and inject services
  this.$get = function() {
    return function(email) {
      return avatarUrl + CryptoJS.MD5(email) + "?size=" + avatarSize.toString();


Best Practices

  .controller('OrganizationCtrl', function ($http) {

    //It is a good practice to assign 'this' to a variable in order to use 'this' keyword inside the callback
    var controller = this;
    $http({method:'GET', url: 'angular.json'}).success(function(data){
      controller.modules = data.modules;


npm install
bower install

Run and Play

grunt serve


Continue Learning

You can’t perform that action at this time.