load html blocks with ngInclude when load other page with ngView

Question

Actually I want to make some html blocks and load them via ngInclude and when I call a page via a controller, ngView shows the page that contain my html blocks for example like this scaffold

root
index.html -----> contain ngView for loading pages
app.js
-------root/views
Dashboard.html ----> Contain dashboard's html blocks
--------------root/views/Dashboard
dashboard-profile.html ---->html block for dashboards ... ...

I tried the code below but it doesn't work

app.js

var demoApp = angular.module('sampleApp', ['ngRoute']);

demoApp.config(function ($routeProvider){
    $routeProvider
    .when('/dashboard',
          {
              controller: 'SimpleController1',
              templateUrl: 'views/dashboard.html'
          })
    .when('/page',{
        controller: 'SimpleController2',
        templateUrl: 'Sources/views/page2.html'
    })
    .otherwise({ redirectTo: '/dashboard' });
});

demoApp.controller('myCtrl', function($scope) {
    $scope.dashboardprofile = 'views/dashboard/dashboard-profile.html';
});

index.html

<body ng-app="sampleApp" >

<div ng-view ></div>

    <!-- compiled and minified Bootstrap JavaScript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.js"></script>
<script type="text/javascript" src="Sources/app2.js"></script>

</body>

dashboard.html

<div ng-include='dashboardprofile' ng-controller="myCtrl"></div>

dashboard-profile.html

  Some divs and text

Thanks for your help

possible Duplicate http://stackoverflow.com/questions/13943471/angularjs-ng-include — sam rodrigues, Jul 09 '14 at 10:22
@samrodrigues I tried both of them i doesn't work . Actually I want to ngInclude in html block not in index file — Vahidebr, Jul 09 '14 at 10:30
@Raghav here is the link : http://plnkr.co/edit/B5uSQGVv0qpIU79FxDMC — Vahidebr, Jul 09 '14 at 10:45

score 0 · Accepted Answer · answered Jul 09 '14 at 10:23

Try this..

 var demoApp = angular.module('sampleApp', ['ngRoute']);

 demoApp.config(function ($routeProvider){
  $routeProvider
.when('/dashboard',
      {
          controller: 'myCtrl',
          templateUrl: 'views/dashboard.html'
      })
.when('/page',{
    controller: 'SimpleController2',
    templateUrl: 'Sources/views/page2.html'
})
.otherwise({ redirectTo: '/dashboard' });
});

demoApp.controller('myCtrl', function($scope) {
$scope.dashboardprofile = 'views/dashboard/dashboard-profile.html';
});

load html blocks with ngInclude when load other page with ngView

1 Answers1