Databases
StackOverflow2013
Postsdbo
POAngularJS routing for beginner
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAngularJS routing for beginner
    text
    copied!<p>I'm trying to reproduce routing example in my AngularJS book PDF. Having trouble to make it work, I have copy/paste the code in the book to avoid syntax error... But I don't understand what's wrong.</p> <p>When I load <code>http://127.0.0.1:8080/routes/</code> I should see the content of "index.html" and the content of list.html "inside".</p> <p>But I only see a blamk page with "A-Mail" (the content of index.html)</p> <p>I have set some breakpoints with chrome debug tools, it seems that I enter in "<code>when('/routes/')</code>" section of <em>routeProvider</em>, but never in <em>ListController</em> function... I don't have errors in console log</p> <p><strong>controllers.js</strong></p> <pre><code> // Creates a module for our core AMail services var aMailServices = angular.module('AMail', []); // Set up our mappings between URLs, templates, and controllers function emailRouteConfig($routeProvider,$locationProvider){ $routeProvider. when('/routes/', { controller: ListController, templateURL: 'list.html' }). // Notice that for the detail view, we specify a parameterized URL component // by placing a colon in front of the id when('/routes/view/:id', { controller: DetailController, templateURL: 'detail.html' }). otherwise({ redirectTo: '/routes/' }); $locationProvider.html5Mode(true).hashPrefix('!'); } // Set up our route so the AMail service can find it aMailServices.config(emailRouteConfig) // Some fake emails messages = [{ id: 0, sender: 'jean@somecompany.com', subject: 'Hi there, old friend', date: 'Dec 7, 2013 12:32:00', recipients: ['greg@somecompany.com'], message: 'Hey, we should get together for lunch sometime and catch up.' +'There are many things we should collaborate on this year.' } ]; // Publish our messages for the list template function ListController($scope){ $scope.messages = messages; } // Get the message id from the route (parsed from the URL) and use it to // find the right message object function DetailController($scope, $routeParams){ $scope.message = messages[$routeParams.id]; } </code></pre> <p><strong>index.html</strong></p> <pre><code>&lt;html ng-app="AMail"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Title...&lt;/title&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"&gt;&lt;/script&gt; &lt;script src="js/controllers.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;A-Mail&lt;/h1&gt; &lt;div ng-view&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>detail.html</strong></p> <pre><code>&lt;div&gt;&lt;strong&gt;Subject: &lt;/strong&gt;{{message.subject}}&lt;/div&gt; &lt;div&gt;&lt;strong&gt;Sender: &lt;/strong&gt;{{message.sender}}&lt;/div&gt; &lt;div&gt;&lt;strong&gt;Date: &lt;/strong&gt;{{message.date}}&lt;/div&gt; &lt;div&gt; &lt;strong&gt;To:&lt;/strong&gt; &lt;span ng-repeat='recipient in message.recipients'&gt;{{recipient}}&lt;/span&gt; &lt;div&gt;{{message.message}}&lt;/div&gt; &lt;a href='#/'&gt;Back to message list&lt;/a&gt; &lt;/div&gt; </code></pre> <p><strong>list.html</strong></p> <pre><code>&lt;table&gt; &lt;tr&gt; &lt;td&gt;&lt;strong&gt;Sender&lt;/strong&gt;&lt;/td&gt; &lt;td&gt;&lt;strong&gt;Subject&lt;/strong&gt;&lt;/td&gt; &lt;td&gt;&lt;strong&gt;Date&lt;/strong&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr ng-repeat="message in messages"&gt; &lt;td&gt;{{message.sender}}&lt;/td&gt; &lt;td&gt;&lt;a href="#/view/{{message.id}}"&gt;{{message.subject}}&lt;/a&gt;&lt;/td&gt; &lt;td&gt;{{message.date}}&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p>Thank you</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload