levibotelho / learnangular Goto Github PK

Once I learned that my code would be lost if I navigated to another lesson and back, a couple of times I wanted to open an old lesson I'd already passed through in order to refresh my memory of how to do something. Unfortunately, since the links contain no actual URL, right-clicking offered no "open in new tab" option, and Ctrl-clicking also didn't open a new tab/window. For greatest accessibility and use to those using the tutorial, and for the least amount of annoyance to more advanced users who like to work with multiple tabs, consider making the navigation work as standard links for these uses (though staying in-page without reloading when a simple click occurs). (It might also be worth considering how tabbing with the tab key and pressing Enter or Ctrl+Enter behaves.)

In the tutorial for $watch, a functioning example is never given. This is fine, but later on when explaining the syntax of a $watch expression, there's this example:

$scope.$watch([expression returning watched value],
              [change handler],
              [objectEquality?]);

This teaches the syntax ambiguously, as it's hard to tell whether to input something like this (correct):

angular.module("root", [])
    .controller("index", ["$scope", function($scope) {
        $scope.$watch("factor", function (newValue) {
            $scope.product = newValue * 2;
        });

        $scope.factor = 6;
    }]);

or this (incorrect):

angular.module("root", [])
    .controller("index", ["$scope", function($scope) {
        $scope.$watch(["factor"], 
                      [function (newValue) {
                           $scope.product = newValue * 2;
                      }]);

        $scope.factor = 6;
    }]);

HTML uses favorite number, JS uses favorite word. Which is it!?

Unless I'm missing something, the Two-way bindings "Run" code doesn't seem to be doing anything. The page doesn't really describe what it should do but I'm guessing when a control loses focus it should update the "[Display selection here]" text?

In last tutorial in which you are explaining the $resources and AJAX, save functionality is not working. Data can be fetched from server but I can't submit data.

In Example section:

Below line needs to be added otherwise it throws an exception:
Reference your "Services" module in the HTML page.

Thanks,
Praveen

I feel like the lessons are really good, but the only I would say is that I would like it more it the lessons were broken down into smaller lessons. Also, I would like it if you told the user where to place the code during the lessons. For example, It never says "place the code below in the html tag on the index.html page", so I feel the user, especially beginners, will have trouble knowing what to do. Angular is pretty sweet though. Thanks :)

is this wrong because of 1.5x ???
https://plnkr.co/nd0kQ8

link this one
http://www.learn-angular.org/#!/lessons/binding-css-classes

thx before

Wouldn't be better to use the data-* directives from the beginning?

Failed to load resource: the server responded with a status of 404 (Not Found)
http://www.learn-angular.org/Scripts/angular/angular.min.js.map

I did this, though, and it worked fine. I looked up how here: https://docs.angularjs.org/guide/filter#using-filters-in-controllers-services-and-directives

<!-- index.html -->
<div ng-controller="index">
    <p>Value: <input type="text" ng-model="value" /></p>
    <p>{{ value | round:2 | dollars }}</p>
    <p>{{ testValue }}</p>
</div>

// root.js
angular.module("root", ["filters"])
    .controller("index", ['$scope', "roundFilter", "dollarsFilter", function($scope, roundFilter, dollarsFilter) {
        $scope.testValue = '';
        $scope.$watch('value', function (newValue, oldValue) {
            $scope.testValue = dollarsFilter(roundFilter(newValue, 2));
        });
    }]);

// filters.js
angular.module("filters", [])
    .filter("round", function () {
        return function(input, precision) {
            return input ?
                parseFloat(input).toFixed(precision) :
                "";
        };
    })
    .filter("dollars", function () {
        return function(input) {
            return input ? "$" + input : "";
        };
    });

I just went through the whole tutorial, and it's pretty awesome.

However sometimes you spend a few minutes wondering why something doesn't work, only to realize after much starring (or, sadly, using the solution) that you forgot to declare a dependency.

Of course I figured (way later than I'd like to admit to) that I could probably see these errors in my browser's console, but I think it could be helpful if some could be be reported to a "console", "log" or "error" view.

Very fun tutorial. Thanks.

This may be me being stupid but the site doesn't seem to specify which angular it's teaching you, 1.x or 2.0. And someone who has never seen angular before, like me, might not be able to just tell by looking at the code.

Make the introductory text shorter and start off with a code sample right away.

When I attempt to run the first sample app, I am getting the following javascript error:

Error: Blocked a frame with origin "http://www.learn-angular.org" from accessing a cross-origin frame.
    at Error (native)
    at h.n.run (http://www.learn-angular.org/bundles/scripts?v=f0y9mqEfGJgi7v47CYJOTsTHeGJYfrd2tWBpTm54HXg1:1:1741)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:163:57
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:179:344
    at h.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:102:456)
    at h.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:103:212)
    at HTMLButtonElement.<anonymous> (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:179:326)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:27:208
    at q (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:7:386)
    at HTMLButtonElement.Yc.c (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:27:190) angular.js:9435
(anonymous function) angular.js:9435
(anonymous function) angular.js:6846
h.$apply angular.js:12079
(anonymous function) angular.js:18002
(anonymous function) angular.js:2616
q angular.js:310
Yc.c angular.js:2615

I am using Chrome on Mac, version info bellow:

Google Chrome 34.0.1847.137 (Official Build 268882)
OS Mac OS X
Blink 537.36 (@173057)
JavaScript V8 3.24.35.33
Flash 13.0.0.214
User Agent Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.137 Safari/537.36

I'm not able to see if my code works after clicking Run, and even after doing the I'm Stuck! thing. The popup window shows no output whatsoever.

Maybe it's just that I'm not versed into the AngularJS terminology, but you say:

Now it's up to you to pick up where I left off. Use a $watch expression to update $scope.product when the value in the textbox is changed. Specifically, you will need to watch $scope.product and multiply the new value by 2 whenever it is changed.

I wou;d have thought you would need to watch factor (and the code solution agrees with me).

angular is the perfect tool for creating single page apps etc - but aren't you encouraging misuse using it for a content site that would be much better suited to largely server-side rendering (or an unobtrusive approach such as pjax)

"A Simple App"

... if you are unfamiliar with the concept of DI I strongly recommend that you at least get acquainted with the concept before continuing on.

If I were to look up DI in an internet search, who knows what I could come up with. If this is needed to understand angular, it would be nice to just click on the word DI, linked to an article or something similar that explains the concept.

The same with the MVC terminology; scope, module, view, controller, etc. And a "who this is for" that you often find at the beginning of computer books would also be nice.

While I did figure out how to navigate to the next part of the tutorial by clicking on the next item in the menu on the left, I did waste some time looking around for how to get to the next step, and wasn't 100% certain at first whether the menu at the left really did go to the next item. (In some web sites, a menu on the left might jump whole chapters instead of go to the next content item.) Consider adding "next" and "previous" buttons.

In the last chapter, called Ajax with $resource
imho, since the site can be accessed both with and without 'www.' prefix, the Ajax request url should be changed to a relative one, e.g. /ResourceLesson/Users/:id. Otherwise ajax request would fail cz of same-origin-policy violation ( tested on chrome ).

& thanks for the tutors!

"The following five lessons cover each of these recipes, an

Angular defines five different service types, or "recipes"."

Thanks for the tutorial! I spent a few sheepish minutes wondering why my code for the resource lesson wasn't working, until I realized that the browser was pointed to learn-angular.org, while the resource URL given in the lesson was from www.learn-angular.org, so I got the following error in the JavaScript console:

XMLHttpRequest cannot load http://learn-angular.org/ResourceLesson/Users/1. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.learn-angular.org' is therefore not allowed access.

Perhaps it's worth declaring that header?

Do you have any plans to translate the project or put a language pack on it?

Final example has a tiny CORS issue, need to change the endpoint url
to "http://learn-angular.org/ResourceLesson/Users/:id"

from "http://www.learn-angular.org/ResourceLesson/Users/:id"

(e.g. remove the "www.")

Thanks for the tutorial! Easy to follow and well written throughout!

In your instructions you show them the proper code to write the first module:
angular.module("root",[])

this is incorrect, it should be with single quotes:
angular.module('root',[])

Typo in this section of the repeater lesson.

Hello there, I recently found a bug in your website and I just wanna get you to know it in order to fix it.

If you access the link via Google you get this address: http://www.learn-angular.org/?_escaped_fragment_=#!/

Once you start the first lesson, any browser do not display the grid with the following lessons on the left side, and consequently, the guest isn't able to continue with the next lesson once finished the first one, and probably, leaves the page. This bug it's due to the address.

Your welcome,
Greetings.

I love the structure of your lesson but I'm afraid the the first lesson doesn't seem to be working correctly. I tried to rule out that it was my own faulty coding but even using the "I'm stuck" version of the code fails to display the "Hello World" message expected. Perhaps it's a versioning issue? I know Angular has modified their syntax recently. Here are a few screenshots:

Is it just me, or does the 'oddRow' gray background seem too light? I couldn't tell the difference, had to open inspector and change the colour to see that the background had actually been applied. Strangely, the class on the element in the DOM still reads "{oddRow: $odd}", rather than just "oddRow", which I guess is how Angular behaves.

Nice explanation. Thank you.

One more point. Can't make code work until one doesn't write with exact indention as your code. Even if i write code with proper logic and syntax, it doesn't accept.

At the bottom of the Simple App page, the link to Dependency injection for five year olds takes you to a Page Not Found error at Stack Overflow with the message "This question was removed from Stack Overflow for reasons of moderation."

I found that sometimes I wanted to build the code bit by bit, and then run each bit to see what it did. But the modal window made that less convenient than a non-modal interface like that of jsFiddle or Codepen.

Change

var users = $resource("http://www.learn-angular.org/ResourceLesson/Users/:id");

to

var users = $resource("ResourceLesson/Users/:id");

In the code sample and explanation.

http://savepic.org/8521873.jpg

Why would you put it there? The models get created on the fly if were parsed in html. Angular is very elegant.

The .config function isn't explained, but it's used here:
http://www.learn-angular.org/#!/lessons/the-provider-recipe

On one of the lessons I started writing my solution and then wanted to go back and review one of the previous lessons. When I went back to my code it was all gone. It would be nice if this state wasn't cleared.

Add a little bit of white chrome above the code window so the selected code tab appears to belong to the currently selected code pane. As it is now, when the cursor is on line 1 of a blank code window, the top line is the same color as deselected tabs, and especially in the case of there being just 2 code tabs, it appears as if the inactive/deselected tab is the current tab because it visually connects to the code window through the consistent color. I'm all for minimal interfaces, but there still needs to be an "information scent" in the UI to help people more quickly grasp it. I clicked on a tab more than once, not realizing I was already on the tab I wanted, because I thought the deselected one was active.

root.js has $scope.favoriteColour; while the controller used in the example is using ng-model="favoriteColor". Easy way for a person to run into a mistake while learning about how $scope binding works.

I get an error when i try to save the User in the below exercise
http://learn-angular.org/#!/lessons/ajax-with-resource

Error message: "XMLHttpRequest cannot load http://www.learn-angular.org/ResourceLesson/Users. Request header field Content-Type is not allowed by Access-Control-Allow-Headers"

Most of Angular documents online (including official docs) are very very ambiguous, but your tutorial have made it simple enough. Thanks!

Consider using single quotes consistently in JavaScript, because this makes it much easier, as a matter of habit, to include Html that uses double quotes. I understand that in general, especially when using something like angular that is in essence a templating mechanism, that we would usually not put html in strings in JavaScript. However, it does occur at times (and consider jQuery selectors such as $('div[data-flag="true"]').

I honestly don't know if this recommendation is truly a global one in the community, but I for one find JavaScript single quotes easier on the eyes, and enjoy the difference from the more "bulky" double quotes that are used in HTML.

when I run the program in constant recipe sample, the template displays {{message}}

the message.constant value does not appear. check the run tab