372567 (12) [Avatar] Offline
#1
index.html
[ 2 KB ]
1. Is there a way I can get from GitHub the version of the code on Page 47? This questions is related to the Best Way To Use question. In the version of storyboard.html that I have, I don't see any ngRepeat. This version starts with

<!-- STORIES -->
<div class="list-area-animation"
ng-class="{'list-area-expanded':!storyboard.detailsVisible}">
<div class="list-wrapper">
<ul class="list my-repeat-animation"
ng-repeat="status in storyboard.statuses">
<h3 class="status">{{status.name}}</h3>
<hr/>
<li userstory
ng-repeat="story in storyboard.stories | filter: {status:status.name}"
drag-container="story" mime-type="application/x-angello-status"
drop-container="" accepts="['application/x-angello-status']"
class="story my-repeat-animation"
ng-click="storyboard.setCurrentStory(story)">

Where are the status and story ngRepeat loops that are on Page 47 of the book?

2. My question is on this part of a line:

| fliter: (status:status.name)

status.name refers is coming from storyboard.statuses (the outer loop). The status to its left is coming from story.status in story in storyboard.stories. (The inner loop.) What makes the first status refer to this? Is there a convention involved? Why isn't angularJS make is say

| filter: (story.status:status.name)?

In other words how does angularJS know what the two status on the filter line refer to?

3. Page 28.

<div ng-view=""></div>

What template gets placed here -- the template for all the routes or the template for a particular route selected by the user? In other words, as a user navigates from route to route, does the "content" of ng-view change?

By the way, I don't see the ng-view on the final version of client\index.html. (I have attached this.)

4. Page 27.

There are 4 icons on the right side of the header line. Only three are tied to routes. What does the fourth used for?

5. Page 29

There is an ng-show attribute on the div "with" glyphicon-home. Why isn't this needed for the others?

Thanks.

-------------------------
Here is the version on P 47 of the book:

<!-- STORIES -->
<div class="list-area">
<div class="list-wrapper">
<ul class="list my-repeat-animation"
ng-repeat="status in storyboard.statuses">
<h3 class="status">{{status.name}}</h3>
<hr/>
<li class="story"
ng-repeat="story in storyboard.stories
| filter: {status:status.name}"
ng-click="storyboard.setCurrentStory(story)">
<article>
<div>
<button type="button" class="close"
ng-click="storyboard.deleteStory(story.id)">×</button>
<p class="title">{{story.title}}</p>
</div>
<div class="type-bar {{story.type}}"></div>
<div>
<p>{{story.description}}</p>
</div>
</article>
</li>
</ul>
</div>
</div>

My question 2 above pertains to this. By the way, why doesn't this html file have the html, head, body tags? Aren't they needed? Does this file get placed inside another html file?

Thanks.
Lukas Ruebbelke (107) [Avatar] Offline
#2
Did you check out the branch for it on Github?

https://github.com/angularjs-in-action/angello/tree/ch03-views-and-controllers

Also, have you checked out the final version of the Angello on the web?

http://www.angelloinaction.com/

Give those a look and then we can work through the questions that you still have.
372567 (12) [Avatar] Offline
#3
I looked at https://github.com/angularjs-in-action/angello/tree/ch03-views-and-controllers but have not checked it out or have spent much time with it. I will and re-ask the question.

I can run http://www.angelloinaction.com/ on my PC but again have not spent much time with it.
--------------------------------------------------------------
I would like to ask the following based on my reading of Chapter 3 (which I think is the best chapter in the book):

1. <li userstory
ng-repeat="story in storyboard.stories | filter: {status:status.name}"
drag-container="story" mime-type="application/x-angello-status"
drop-container="" accepts="['application/x-angello-status']"
class="story my-repeat-animation"
ng-click="storyboard.setCurrentStory(story)">

In {status:status.name}, how does ng know that the first status refers to story.status and the second status refers to the status object in the ul? The ul is not shown in the above code snippet.

2. Page 28.

<div ng-view=""></div>

What template gets placed here -- the template for all the routes or the template for a particular route selected by the user? In other words, as a user navigates from route to route, does the "content" of ng-view change?

Please take as much time as you need to answer these questions. I hope that the answers may be of use to other readers also.

Thanks.
Lukas Ruebbelke (107) [Avatar] Offline
#4
Good questions...

1. Angular creates a child scope for each item in ng-repeat and so it knows that when we are referring to {scope:scope.name} as our filter expression, scope.name is referencing the name property of the current scope object in the iteration. That is one of the nice things about scope in Angular is that it is very good about creating context.

2. The ng-view gets populated by the partial for the routes. The content for the ng-view is updated at each route change with the new template. It is worth mentioning that the scope for the template is also destroyed at each route change i.e. state does not persist. If you need to persist data between states, make sure to store it in a service.

This is a post that I did awhile back that may be helpful http://onehungrymind.com/building-a-website-with-angularjs-pt-2-now-with-state/



372567 (12) [Avatar] Offline
#5
When I run http://www.angelloinaction.com/, I am guessing that the js code comes from your site (i.e., www.angelloinaction.com/) and not locally from my PC since I don't serve anything? Am I right?

I can see the js code via Chrome Developer Tools and can put breakpoints. I am not sure whether I can change the code for playing around. (I am going to spend some time soon trying to improve my knowledge of Chrome Developer Tools). If not, should I run angello from my PC (i..e, serving on Port 3000 etc.), change code an play around?

Thanks.
Lukas Ruebbelke (107) [Avatar] Offline
#6
That is correct. That website is being served by me.

I definitely recommend ramping up on Chrome Developer Tools and install Batarang while you are at it.

PROTIP: If you select an element in the browser and the go to the console and type scope = angular.element($0).scope() you will have access to the scope of the object you selected.

Also, as you start to play around with Angello, definitely run it locally so you can test it.
372567 (12) [Avatar] Offline
#7
Thanks. These tips are enormously helpful.