Is this code snippet correct AngularJS syntax?

[Steve Husting]

var app = angular.module("app", ['ngRoute']); // Our module

// The following service provider $routeProvider will define the routes of our app

app.config(['$routeProvider', function($routeProvider) {

    $routeProvider

        .when('view/gallery_details', { // This URL, in index.html, will map to the following view

            templateUrl: 'views/gallery_details.html'

        }) // no comma here

        .otherwise({

            templateUrl: 'index.html'

        });

}]);

Thanks!

[Nicholas Smith]

Looks right to me, but won't know until you try to run it.

[Steve Husting]

Well, I have the following in index.html:

<a href="#views/gallery_details"> Details</a>

... which I assume will connect to the above code via <script src="angular/galleryApp.js"></script> and still views/gallery_details.html does not come on when the link is clicked. There are no errors or warnings in Dev Tools. All of my research indicates that these two codes are correct, so I'm trying to figure out why the link does not change pages. 

[ In the original post, "view/" should be "views/." This was corrected and still does not work. ]

Thanks for looking!

[Nicholas Smith]

Your route definition should start with a /

.when('/views/gallery_details' ...

instead of

.when('views/gallery_details' ...

[Nicholas Smith]

Working example with your code:

http://plnkr.co/edit/Cxu7G2kmMbz4gb5nUicj?p=preview

[Steve Husting]

Still not working (index.html doesn't change; only the URL box updates). I adapted your code this way:

Index.html:

<a data-ng-href="#views/gallery_details" alt="get the details" title="get the details"> Details</a>

galleryApp.js:

var app = angular.module("app", ['ngRoute']); 

app.config(['$routeProvider', function($routeProvider) {

    $routeProvider

        .when('views/gallery_details', {

            templateUrl: 'views/gallery_details.html'

        });

}]);

galleryDetails.html:

<div class="row">

      <img data-ng-src="{{x.photo}}" alt="Loading ...">

    <div class="panel">

      <h5>{{x.name2}}</h5>

      <p>{{x.caption}}</p>

      <p><a data-ng-href="{{x.resource}}" alt="Go online">Online</a></p>

    </div>

      <p><a href="../index.html" alt="Back">Return</a></p>

</div>

Thank you for looking!

[Nicholas Smith]

Make sure you have an ng-view defined in your main HTML template.  Such as:

<div ng-view></div>

That's where the content of the template will get displayed.

[Steve Husting]

Yes it's there. Based on all my research, the code should just work! Thanks for trying.

[Nicholas Smith]

Can you post your full html and javascript to plnkr or pastebin and send the link? 

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/vJgBaHRaCv0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Steve Husting]

Aaaargh. WatchGuard won't let me paste successfully.