Geek Answers Handbook

How to update sidebar content in AngularJS

I asked a question yesterday. How to make multiple views using Angular to support the title and sidebar? and based on this question, I was able to make some progress in having a title and sidebar for my AngularJS application.

I have a working fiddle here: http://jsfiddle.net/mcVfK/929/

JS looks like this:

angular.module('app', ['ngRoute'])
    .config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
    when('/header1', {
        templateUrl: 'header1.html',
        controller: DashboardCtrl
    })
    .when('/header2', {
        templateUrl: 'header2.html',
        controller: DashboardCtrl
    })
    .when('/dashboard',{
        templateUrl: 'dashboard.html',
        controller: DashboardCtrl
    })
    .when('/sidebar1',{
        templateUrl: 'sidebarlink1.html',
        controller: DashboardCtrl
    })
    .when('/sidebar2',{
        templateUrl: 'sidebarlink2.html',
        controller: DashboardCtrl
    })
    .otherwise({
        redirectTo: '/header1'
    });
}]);

function DashboardCtrl() {

}

This seems to work, however, I want to find out if there is a way to avoid being included sidebar.htmlin every link in the sidebar?

If you notice the fiddle, I do this:

<script type="text/ng-template" id="sidebarlink1.html">
    <div ng-include="'sidebar.html'" id="sidebar"></div>
    sidebar link 1 content - including sidebar
</script>
<script type="text/ng-template" id="sidebarlink2.html">
    <div ng-include="'sidebar.html'" id="sidebar"></div>
    sidebar link 2 content - including sidebar
</script>

, sidebar.html . , ? , Angular , ?

+4
2

, , . jsfiddle:

http://jsfiddle.net/mcVfK/931/

angular.module('app', ['ngRoute'])
    .config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
     when('/header1', {
        templateUrl: 'header1.html',
        controller: DashboardCtrl,
    resolve: {
      hasSidebar: function($rootScope) { 
          $rootScope.hasSidebar = false;
          return false; }
    }
})
0

ui-router ( angular -route angular -ui-router?) ngRoute. , . ng- :

//Parent template
<script type="text/ng-template" id="sidebarlinkparent.html">
    <div ng-include="'sidebar.html'" id="sidebar"></div>
    <div ng-switch="$state.current.name">
        <div ng-switch-when="sidebar1" ng-include="'sidebarlink1.html'"></div>
        <div ng-switch-when="sidebar2" ng-include="'sidebarlink2.html'"></div>
    </div>
</script>

//template sidebar 1
<script type="text/ng-template" id="sidebarlink1.html">
    sidebar link 1 content - including sidebar
</script>

//template sidebar 2
<script type="text/ng-template" id="sidebarlink2.html">
    sidebar link 2 content - including sidebar
</script>

templateUrl sidebarlinkparent.html /sidebar1 /sidebar2

ngRoute ngSwitch var, , -

EDIT:

2:

//Parent template
<script type="text/ng-template" id="sidebarlinkparent.html">
    <div ng-include="'sidebar.html'" id="sidebar"></div>
    <div ng-include="$state.current.name +'.html'"></div>
</script>

3:

//Parent template
<script type="text/ng-template" id="sidebarlinkparent.html">
     <div ng-include="'sidebar.html'" id="sidebar"></div>
     <div ng-include="$state.params.include +'.html'"></div>
</script>

.. ..

0

More articles:


All Articles