Dynamic routing in AngularJs

Question

I'm still new with AngularJs. The url is changing but the page is always the same. I'm looking forward for your help.

Config:

var app = angular.module('MyApp', ['ngResource','ngRoute']);

app.config(['$routeProvider',
            function($routeProvider) {

        $routeProvider
        .when('/',{
             templateUrl: '../pages/.index1.html'

        })
    .when('/profile',{
         templateUrl: './profile.html'

    }).when('/messages',{
        templateUrl: 'file.html'
    });
 }]);

and here is my index1.html where i'm calling for app.js

<script src="../angular/angular.js"></script>
<script src="../angular/angular-route.js"></script>
<script src="../angular/angular-resource.js"></script>
<script src="../js/app.js"></script>
<ul>         
   <li class="">
      <a ng-href="#/"><i class="fa fa-group"></i> Users</a>
   </li>
   <li class="">
      <a  ng-href="#/profile"><i class="icon-user-1"></i> Profile</a>
   </li>
   <li class="">
      <a ng-href="#/messages"><i class="icon-comment-fill-1"></i> Messages</a>
   </li>
</ul>

Answer 1

I'm guessing that all your HTML isn't included above, but in your full HTML file you need to define the location where the views for your routes will be injected. Perhaps you are missing that? There is a special directive called ng-view. You use it simply as:

 <div ng-view></div>

That div will then become the location where your views are displayed as you navigate through your app.

There is a full example in the angular docs at https://docs.angularjs.org/api/ngRoute/service/$route#example