Render New Views Within a Div Based on Click of Button | AngularJS

Question

Hi I am trying to render a new view based on clicks of a button in a navbar. However, it is not working.

Here is my HTML Code:

            <!-- Links to all the pages with data entry forms -->
            <div id="data_links" ng-controller="MainCtrl">
                <ul>
                    <li>
                        <a href="#" title="Home Page" ng-click = "ChangeView('instructions')"> Home </a>
                    </li>
                </ul>
            </div>
        </div>

        <!-- Modify views here -->
        <div class="main" ng-controller="MainCtrl">
            <main role="main">
                <div ng-view> <!-- Where we will inject html --> </div>
            </main>
        </div>

<!-- Application Files -->
<script src="js/app.js"></script>
<script src="js/controllers/main.js"></script>

Here is my app.js:

angular.module('DataEntry', [
  'ngRoute'
]).config(function ( $routeProvider ) {
  $routeProvider
    .when('instructions', {
      templateUrl: 'views/instructions.html',
      controller: 'MainCtrl'
    });
});

Here is my controller main.js:

angular.module('DataEntry')
  .controller('MainCtrl',
    function MainCtrl ( $scope, $location ) {
      'use strict';
      $scope.ChangeView = function(view) {
        alert(view);
        $location.url(view);
      }
    });

This is my instructions.html page for testing to see if it loads:

<div class="module instructions">
    <div class="module_instructions">
        <h1> Testing Loaded! </h1>
        <p> Test <br> 
            Test <br> Test <br> Test 
        </p>
    </div>
</div>

I want to eventually be able to click on multiple links within a navbar, such as home, instructions, etc. and render different views within the ng-view section. However, it is not working right now and I am not sure how to scale it so I can add more .html pages for the different views I want to render. Can someone help me move forward?

lwalden · Accepted Answer · 2015-02-14 00:05:43Z

2

This line <a href="#" title="Home Page" ng-click = "ChangeView('instructions')"> Home

Can be changed to this:

<a href="/instructions" title="Home Page"> Home </a>

You don't need to use a function on your controller to set the url, although you can navigate this way - sometimes you want to redirect the user programatically and this works for those cases.

Also, leaving href="#" in that line is causing you a problem. In a non-angular page # is used as a href placeholder but on an Angular href="#" is actually going to be picked up by $routeProvider which will try to change the contents of the ng-view container. What loads will depend upon how you set up your .config section, but is generally not desirable behavior.

As you create more pages, add paths to your .config section and you can link to them from your html the same way as I did above with the /instructions path.

Here's an example:

angular.module('DataEntry', ['ngRoute'])
.config(function ( $routeProvider ) {
  $routeProvider
   .when('instructions', {
      templateUrl: 'views/instructions.html',
      controller: 'MainCtrl'
   })
   .when('faq', {
      templateUrl: 'views/faq.html',
      controller: 'FaqCtrl'
   })
   .when('example', {
      templateUrl: 'views/example.html',
      controller: 'ExampleCtrl'
   })
});

and in your markup:

<a href="/instructions" title="Home Page"> Home </a>

<a href="/faq" title="FAQ"> FAQ</a>

<a href="/example" title="Example Page"> Example</a>

edited Feb 14, 2015 at 0:05

answered Feb 13, 2015 at 23:47

lwalden

8037 silver badges11 bronze badges

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

3 Comments

ajl123 Over a year ago

I don't want to reload a page, but I simply want to render different html views within the ng-view section everytime I click on a new button/link. Should I just use <button> instead so I don't run into the reload page problem?

lwalden Over a year ago

My wording was not correct - this won't actually cause a full page refresh but href="#" will reload the content of the ng-view container. The example in my answer will render html views in the ng-view container.

ajl123 Over a year ago

Oh thanks it works. I just don't need to add the href="/" actually because my controller will set the $location.path(view); based on my ng-click=ChangeView(view)

Collectives™ on Stack Overflow

Render New Views Within a Div Based on Click of Button | AngularJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related