jomendez

Check out Mini-challenge 10 Instructions

Answer:

The $routeProvider service's resolve property allows delaying of route change until data is loaded.

First define a route with resolve attribute like this.

angular.module('myApp', ['myAppFilters', 'myAppServices', 'myAppDirectives']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/users', {
        templateUrl: 'partials/user-list.html', 
        controller: userListCtrl, 
        resolve: userListCtrl.resolve}).
      when('/users/:userId', {
        templateUrl: 'partials/user-detail.html', 
        controller: userDetailCtrl, 
        resolve: userDetailCtrl.resolve}).
      otherwise({redirectTo: '/users'});
}]);

Notice that the resolve property is defined on the route.

function userListCtrl($scope, users) {
  $scope.users = users;
}

userListCtrl.resolve = {
  users: function(user, $q) {
    var deferred = $q.defer();
    user.query(function(successData) {
            deferred.resolve(successData); 
    }, function(errorData) {
            deferred.reject(); 
    });
    return deferred.promise;
  },
  delay: function($q, $defer) {
    var delay = $q.defer();
    $defer(delay.resolve, 1000);
    return delay.promise;
  }
}

 

Notice that the controller definition contains a resolve object which declares users prop which should be available to the controller constructor and gets injected as dependency and it is defined in the resolve property.

The resolve.users function is responsible for returning a promise. All of the promises are collected and the route change is delayed until after all of the promises are resolved, in this example we are delaying the promise to better illustrate the example.

 

References:

https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

If you have a solution for this challenge, different from the proposal solution on this post, don’t be shy and share it with us 🙂

Check out Mini-challenge 9 Instructions

Answer:

There are several ways that one controllers can talk to another, This google group thread, http://groups.google.com/d/topic/angular/m_mn-8gnNt4/discussion, discusses 5 ways controllers can talk to each other.

1. Shared service.
2. Events.
3. Prudent pragmatic use of $root scope.
4. Watchers.
And a 5th - scope prototypical inheritance?
http://docs.angularjs.org/guide/scope

For a sake of simplicity we are going to show a possible answer to this challenge with Events, using $broadcasting and $on:
This is the view:

<div>
<div ng-controller="Ctrl1">
        <input type="text" ng-model="foo" />
        <input type="button" value="Talk to Ctrl2" ng-click="talkToCtrl2()" />
    </div>
<div ng-controller="Ctrl2">{{foo}}</div>
</div>

And this is the javascript:

var myApp = angular.module('myApp', []);


myApp.controller('Ctrl1', myController);
myController.$inject = ['$scope', '$rootScope']

function myController($scope, $rootScope) {
    $scope.foo = "setted in ctrl1";
    $scope.talkToCtrl2 = function () {
		$rootScope.$broadcast('emitedFromController1', $scope.foo);
    }
};

myApp.controller('Ctrl2', myController2);
myController2.$inject = ['$scope']

function myController2($scope) {
    $scope.foo = "setted in ctrl2";
     $scope.$on('emitedFromController1', function(event, args) {
     	$scope.foo = args;
     });

};

In the talkToCtrl2 function we can implement $rootScope.$broadcast('emitedFromController1', $scope.foo); and then in the second controller we can implement:
$scope.$on('emitedFromController1', function(event, args) {
$scope.foo = args;
});

You can see a working example in this jsFiddle:

If you have a solution for this challenge, different from the proposed solution on this post, don't be shy and share it with us 🙂

Check out Mini-challenge 8 Instructions (angular set focus)

Answer:

The Angular way to set the focus to an element inside a modal, is with a directive (since this is related to the DOM and Events).

When a Modal is opened, set focus on a predefined <input> inside this Modal.
Define a directive and have it $watch a property/trigger so it knows when to focus the element:

Name: <input type="text" focus-me="isOpen">

 

app.directive('focusMe', function($timeout, $parse) {
  return {
    //scope: true,   // optionally create a child scope
    link: function(scope, element, attrs) {
      var model = $parse(attrs.focusMe);
      scope.$watch(model, function(value) {
        if(value === true) { 
          $timeout(function() {
            element[0].focus(); 
          });
        }
      });
      // on blur event:
      element.bind('blur', function() {
         scope.$apply(model.assign(scope, false));
      });
    }
  };
});

Notice that we also added a code for when the element loose the focus (blur) it sets the isOpen property back to false.

Here is a working example:
http://jsfiddle.net/7L8vqf8u/3/

Recommendations:

It is highly recommended try to avoid as much as possible the use of the $watch service. This is another possible solution using angular events:

app.directive('focusOn', function($timeout) {
   return function(scope, element, attrs) {
      scope.$on(attr.focusOn, function(e) {
          $timeout(function() {
            element[0].focus(); 
          });
      });
   };
});

 

Now you can put your directive in the view:

<input type="text" focus-on="isOpen" />

 

and then, in your controller:

$scope.open = function () {
    $scope.$broadcast('isOpen');
};

 

 

If you have a better solution on how angular set focus, for this challenge, different from the proposed solution on this post, don't be shy and share it with us 🙂 you can leave a message on this blog or you can twit me @JoMendezdev.