How to set up transition between pages in Angular?

Question

JavaScript

Hello, please tell me how to properly set up transitions between pages.
To display menu items, I use an array of entries:

$scope.lists = [
    {'name': 'Home'},
    {'name': 'SERVICES'} ...

And the output itself on the page:

<li  ng-repeat="list in lists">
   <a href="/">{{list.name}}</a>

The controller says:

$routeProvide
.when('/',{
  templateUrl:'template/home.html',
  controller:'PhoneListCtrl'
})
.when('/SERVICES',{
  templateUrl:'template/SERVICES.html',
  controller:'servCntrl'
}) ...

But I am constantly thrown to the root directory where a list of all project files is indicated
Tell me how to fix it

Answer 1

Links must begin with a # sign or with !# signs , if search engine optimization is needed, then it will not be redirected. Also, use ng-href .
There is a clear error here:

<li  ng-repeat="list in lists">
   <a href="/">{{list.name}}</a>
</li>

Your ALL links will lead to / . Do it right like this:

<li ng-repeat="item in links">
    <a ng-href="#/{{ item.link }}">{{ item.title }}</a>
</li>

In turn, the array of links should look something like this:

links = [
    { link: 'contacts', title: 'Контакты' },
    { link: 'profile',  title: 'Профиль'  }
];

Answer 2

You probably forgot to include -

$locationProvider.html5Mode({enabled:true,requireBase:false}).hashPrefix('!');