AngularJS: Load page on link click

Question

I got 2 divs, first has links pointing to individual pages and another one to display the content of pages the links are pointing to. Here is how it looks:

<div id="navigation">
   <a href="http://mydomain/page1">
   <a href="http://mydomain/page2">
   <a href="http://mydomain/and-so-on">
</div>

<div id="content">
   <!-- display content here -->
</div>

Is there a way to prevent redirecting the page on link click and display the content of the URL they point to? I'm doing it this way for SEO purposes so each individual pages can also be crawlable on their own.

I've heard of ng-include but I want to be sure I'm heading the right direction so I reckon I should ask first before going with it.

Thank you in advance.

You can use an iframe and set the link's href as iframe's src. — 31piy
– 31piy, Commented Jul 29, 2017 at 6:57
Thanks. I prefer it the Angular way but I really do appreciate your feedback. — Jhourlad Estrella
– Jhourlad Estrella, Commented Jul 29, 2017 at 7:34

MUHAMMAD Siyab · Accepted Answer · 2017-07-29 07:03:39Z

0

Use AngularJS Routing for this purpose.

    <a href="#page1">
    <a href="#page2">
    <a href="#and-so-on">


    <div ng-view></div>

    <script>
    var app = angular.module("myApp", ["ngRoute"]);
    app.config(function($routeProvider) {
        $routeProvider
        .when("page1", {
            templateUrl : "http://yourDomain/page1.html"
        })
        .when("/page2", {
            templateUrl : "http://yourDomain/page2.html"
        })
        .when("/and-so-on", {
            templateUrl : "http://yourDomain/and-so-on.html"
        });
    });
    </script>

Note: Must include angular-route.js

answered Jul 29, 2017 at 7:03

MUHAMMAD Siyab

4661 gold badge10 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jhourlad Estrella Over a year ago

Is it possible to use the full URL on the links instead? The page acts as a sitemap, if I may add.

MUHAMMAD Siyab Over a year ago

No need to do that because you've mentioned the full URL in templateUrl

Collectives™ on Stack Overflow

AngularJS: Load page on link click

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related