0 0 0 0


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


 <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>


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

Here is the div:

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

Best Answer:

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:


var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
        .state('dashboard', {
            url: '/dashboard',
            templateUrl: 'dashboard.html'

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

<body ng-app="routerApp">
<nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" ui-sref="#">AngularUI Router</a>
    <ul class="nav navbar-nav">
        <li><a ui-sref="dashboard">Dashboard</a></li>
<div class="container">
    <div ui-view></div>
    <script src="//"></script>

To extend angular-routing-using-ui-router

Copyright © 2011 Dowemo All rights reserved.    Creative Commons   AboutUs