AngularJS: ngRoute not working

I am getting attached to get this simple routing to work and can't figure out what the problem is.

This is HTML:

<html lang="en" ng-app="app">
     .
     .
     .  
     <a href="#voip">
       <div class="col-lg-3 service">
        <img src="assets/img/voip.svg"/>
        <h4 ng-bind-html="content.home.voip_header"></h4>
        <p ng-bind-html="content.home.voip_txt"></p>
      </div>
    </a>

    <section id="view">
      <div ng-view></div>
    </section>
Run codeHide result

This is the routing:

var app = angular.module('app',[
  'ngRoute',
  'ngSanitize'
]);
    app.config(['$routeProvider',function($routeProvider){
      $routeProvider
      .when('/voip',{
        templateUrl:'assets/templates/voip.html'
      });
    }]);

The template loads if I specify "otherwise", as shown below. I thought maybe I was using the wrong syntax in my href attribute, but I looked everywhere and it seemed to be the way it should be.

      .otherwise({
       redirectTo:'/voip'
      })

Another thing, if I listen $routeChangeSuccess, the event fires, but the view does not load.

Any ideas?

+3
source share
3 answers

This is correct because you are using angular 1.6 and the default hash prefix has been changed:

- aa077e8 - , $location hash-bang URL- ('') bang ('!'). HTML5 , HTML5, -, URL- ! . , mydomain.com/#/a/b/c URL- mydomain.com/#!///.

-, , :

appModule.config(['$ locationProvider', function ($ locationProvider) {
$ LocationProvider.hashPrefix( ''); }]);

, :

1. HTML5mode true

$locationProvider.html5Mode(true);

html html:

<base href="/">

, <a ng-href="#voip">

<a ng-href="voip">

2. 1.6

<a ng-href="#voip">

 <a ng-href="#!voip">

3. 1.5 - -

app.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);
+18

html5 + ajs 1.6.

, href= "# home"..... href= "#! home". 4 .

+2

5 and I understood why this does not work before

I missed include the following in index.html

0
source

Source: https://habr.com/ru/post/1684172/


All Articles