How to load html inside a div on menu click using angular?

Question

I am new to angular, i have a menu and a container, when the user click the menu item i want the view to change dynamically. I have followed some samples but din't work. Here is my code,

1.Index.html 2.Dashboard.html

HTML:

 <ul id="side-menu" class="nav">
    <div class="clearfix"></div>
      <li class="active" ng-click="template='dashboard.html'"><a href="">
           <div class="icon-bg bg-orange"></div>
       <span class="menu-title">Dashboards</span>
       </a>
      </li>

app.js:

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

Here is the div:

<div class="page-content" ng-include src="template">
</div>

Are you using ui-router or want me to explain how to embed a nested view with it? — Ben Diamant
– Ben Diamant, Commented Dec 14, 2014 at 11:35
am notusing ui-router , just want to load an html inside the div page-content on clicking the dashboard menu — Sajeetharan
– Sajeetharan, Commented Dec 14, 2014 at 11:37
I followed this sample stackoverflow.com/questions/13943471/angularjs-ng-include — Sajeetharan
– Sajeetharan, Commented Dec 14, 2014 at 11:38

Ben Diamant · Accepted Answer · 2014-12-14 11:45:25Z

2

Looks like what you need is to add a routing mechanism (views are usually defined by route and not by a logical condition) Angular's way to make it clean is via routing module, it can be done with the ngRoute module or with ui-router module by the AngularUI team.

The idea is to define a state and attache a view to state, add a ui-view tag in your html and the view is dynamically injected into its parent wrapper:

app.js

var routerApp = angular.module('routerApp', ['ui.router']);

routerApp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/dashboard');

    $stateProvider          
        .state('dashboard', {
            url: '/dashboard',
            templateUrl: 'dashboard.html'
        })

});

index.html (please consider the ui-view tag as the html container)

<body ng-app="routerApp">

<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" ui-sref="#">AngularUI Router</a>
    </div>
    <ul class="nav navbar-nav">
        <li><a ui-sref="dashboard">Dashboard</a></li>
    </ul>
</nav>

<div class="container">

    <div ui-view></div>

</div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>

</body>

To extend angular-routing-using-ui-router

answered Dec 14, 2014 at 11:45

Ben Diamant

6,2264 gold badges39 silver badges51 bronze badges

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

5 Comments

Sajeetharan Over a year ago

This dint work, is it necessary to use your nav tags? since am using a twitter bootstrap sample

Ben Diamant Over a year ago

It's not, you have 3 key componenets to understand - 1. the state configuration in app.js 2. the ui-view directive assigned to the div and the ui-sref directive on the <a> tag which tell the router to go to state named 'dashboard'

Sajeetharan Over a year ago

i have checked all the three components, it there anyway to debug and check, or can you modify my code?

Ben Diamant Over a year ago

Let's move this dicussion to the chat

Ben Diamant Over a year ago

join @Sajeetharan chat.stackoverflow.com/rooms/66844/…

Collectives™ on Stack Overflow

How to load html inside a div on menu click using angular?

1 Answer 1

app.js

index.html (please consider the ui-view tag as the html container)

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

app.js

index.html (please consider the ui-view tag as the html container)

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related