jomendez

Check out Mini-challenge 4 Instructions

Answer:

The parameters to the component (e.g. controller, factory, etc)  for dependency injection, will be converted to mangled variables. For example, $scope and $timeout may become a or b and not be found by Angular in the code inside the controller, factory, etc.

For example this:

(...)
myApp.controller('MyCtrl', function ($scope, $timeout) {
(...)
}
});

Could be converted in something like this.

(...)
myApp.controller('MyCtrl', function (a, b) {
(...)
}
});

If you don't use the $inject service and pass the array of dependencies, you could have errors in your application (see possible solution below).

Solution before minification:

Solution after minification:

You can visit John Papa's angular-styleguide for more information:

https://github.com/johnpapa/angular-styleguide#manual-annotating-for-dependency-injection

This is Todd Motto recommendation for dependency injection annotation:

http://toddmotto.com/angular-js-dependency-injection-annotation-process/ 

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

Answer:

In JavaScript when you copy a variable to another variable, like in the code below, the contain of the variable is get passed by reference and not by value, so when you update the origin variable, the destination variable gets updated too and vice versa:

var var1 = ['value1','value2','value3'];
var var2 = var1;

var2[1] = 'different value';

console.log(var1);
console.log(var2);

/*//result
var1: ["value1", "different value", "value3"]
var2: ["value1", "different value", "value3"]
*/

If you run the code above you will notice the value gets updated in both variables, this happened because JavaScript copy the data by reference not by value. The "Angular way" to solve this problem is with the copy method of the angular object: angula.copy().

var var1 = ['value1','value2','value3'];
var var2 = var1;
var var2 = angular.copy(var2);

var2[1] = 'different value';

console.log(var1);
console.log(var2);

/*//result
var1: ["value1", "value2", "value3"]
var2: ["value1", "different value", "value3"]
*/

 

There are few techniques to achieve this with JavaScript, check out this link:
http://stackoverflow.com/questions/728360/most-elegant-way-to-clone-a-javascript-object

 

This is a jsfiddle code to illustrate this method:

You can find more information here:

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

Mini-challenge 3

AngularJs Mini-Challenges is a growing collection of "Challenges" about the most quirky parts of the AngularJs framework. It encourage you to find and fix common mistakes and subtle bugs, as well as performance issues and bad practices, that non-expert AngularJs programmers may encounter on their endeavours into the depths of the framework.

AngularJs Mini-Challenges does not aim to teach you AngularJs. Former knowledge of the Framework is strongly recommended in order to understand the topics covered in this Challenges. In order to learn the basics of the Framework, please head over to this excellent book:

 

 

The Challenge:

We have an Angular application where we want to create a starting point with the "default" data in the Angular scope, so we can create a reset button and restore the scope to the initial values.

the controller:

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

function myCtrl($scope) {
    $scope.data = [{
        text: 'Lorem ipsum dolor sit amet',
        text2: 'consectetur adipiscing elit'
    }, {
        text: ' Nullam eu molestie mi',
        text2: 'Proin eu congue nisi.'
    }];

    $scope.origData = $scope.data;

    $scope.reset = function () {
        $scope.data = $scope.origData;
    };

}

This is the view:

<div ng-controller="myCtrl">
Modify the text in the inputs: 
<div ng-repeat="item in data"> <input type="text" ng-model="item.text"/> 
<input type="text" ng-model="item.text2"/> 
</div>
    <button type="button" ng-click="reset()">Reset</button>
</div>

Here is the fiddlejs: 

 

 

The code example above is not working because when a JavaScript object (such as $scope.origData) is assigned to a variable, it is assigned by reference, not by value, the point of this challenge is to find a solution to make the reset button works.

Here you can find a possible solution

If you feel that the solution is poor or incomplete or there is room for improvement, please share with every one, you can leave a comment.

Mini-challenge 1

AngularJs Mini-Challenges is a growing collection of "Challenges" about the most quirky parts of the AngularJs framework. It encourage you to find and fix common mistakes and subtle bugs, as well as performance issues and bad practices, that non-expert AngularJs programmers may encounter on their endeavours into the depths of the framework.

AngularJs Mini-Challenges does not aim to teach you AngularJs. Former knowledge of the Framework is strongly recommended in order to understand the topics covered in this Challenges. In order to learn the basics of the Framework, please head over to this excellent book:

 

 

 

The Challenge:

Lets suppose we have an angular app with a button, when you click that button, a text should appear in the view.
As requirement we have to handle the onclick event of the button with vanillaJs.
E.g.
document.getElementById('btn').onclick = function (e) {
...
});

This is how the view looks like:

<div><button id="btn" type="button">Click me</button>
<div>{{name}}</div>
</div>

This is how the controller looks like:

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

myApp.controller('MyCtrl', function ($scope) {

document.getElementById('btn').onclick = function (e) {
$scope.name = "Button clicked";
}
});

Here is a jsfiddle with the code:

Notes:

Even when for this challenge you can't use directives (see the constraint above), I strongly recommend to use directives to handling events all the time, when working with angularJs, try to avoid to use JavaScript Event handling in real life projects.
For the sake of this challenge as a constraints requirements, we can’t use the ng-click directive.
As a result, the code doesn't work, so, the challenge is to solve it without use ng-* angular directive.

Here you can find a possible solution

If you feel that the solution is poor or incomplete or there is room for improvement, please share with every one, you can leave a comment.