如何根据用户当前所在的页面在Web应用程序的右侧栏中动态添加数据？

Question

I have developed a web app in angular.js. My question is that I have the menu on left sidebar that remains constant. However, the data on the right sidebar changes depending on the page that the user is currently in. If the user is on home page, then the right sidebar will show, for example, "data 1". If the user is on analytics page, then the right sidebar will show a graph. I do not know how to implement this using angular in the most optimized way.

Any kind of help is greatly appreciated.

Thanks in advance

Answer 1

You have to implement the angular routing:

1. Keep the html element as a container (inside to right side bar) provided with a ng-view directive

2. You have to create different html template in separate folder, which will be rendered as per the menu selection

3. Write .config() , where you write down your specific logic to associate each state/ templateurl to particular controller and template

Answer 2

You should have a look at the ngInclude directive. That might be the best way for you to load a template (and the data in your corresponding controller). L

Answer 3

you can use ngRoute and call your separate html template and controller for each page like this

angular
.module('myApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
  .when('/', {
    templateUrl: 'home.html',
    controller: ['$scope', function($scope){
      $scope.page = 'Data 1';
    }]
  })
  .when('/analytics', {
    templateUrl: 'analytics.html',
    controller: ['$scope', function($scope){
      $scope.page = 'Show Graph';
    }]
  })
  .otherwise({redirectTo: '/'});
}]);

then add ng-view in your html like this

<div class="content">
    <div ng-view></div>
</div>

working demo plunker