angularjs ngRoute not working

2019-07-20 21:03发布

站内问答 / 移动开发
1786 4 6

ngRoute not working while no errors are reported to console .

given no errors to console, how is it possible to follow execution of ngRoute procedures ?

i saw examples using $locationProvider.html5Mode(true), i don't understand when that should be used but i don't think it is required to make ngRoute work.

index.html has navigation links and ngView :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script src="bower_components/angular/angular.js"> </script>
  <script src="bower_components/angular-route/angular-route.js"> </script>
  <script src="main.js"> </script>
</head>

<body ng-app="Main">
<ul>
  <li> <a href="#content/first"> first partial </a> </li>
  <li> <a href="#content/second"> second partial </a> </li>
</ul>
<div ng-view></div>

</body>
</html>

main.js defines the router and the controllers :

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

function router($routeProvider) {

 var route = {templateUrl: 'partials/default.html'};
  $routeProvider.when('', route);

  route = {
    templateUrl: 'partials/first.html',
    controller: 'first'
  };
  $routeProvider.when('content/first', route);

  route = {
    templateUrl: 'partials/second.html',
    controller: 'second'
  };
  $routeProvider.when('content/second', route);
}

Main.config(['$routeProvider', router]);

Main.controller('first', function($scope) {
  $scope.list = [1,2,3,4,5];
});

Main.controller('second', function($scope) {
  $scope.list = [1,2,3];
});

partials simply make use of ngRepeat:

<header> First content </header>
<p ng-repeat="iter in list">
  first
</p>

solved : my problem was that my whole application is located under /ang/ prefix, and after adding that prefix to urls now it is working . shouldn't there be a way to use relative urls ? i guess there should and i will try to fix it .

the problem is NOT with the different syntax as everyone suggested, and that is alarming to the fact many JS developer do not in fact understand the one line syntax that they are using everywhere .

4条回答
淡お忘
2楼-- · 2019-07-20 21:37

Do not reuse the route object as it might cause problems. Consider using it in the form (as suggested by the docs https://docs.angularjs.org/api/ngRoute/service/$route#example ):

$routeProvider
   .when('content/second', {
    templateUrl: 'partials/second.html',
    controller: 'second'
});

If you want to debug the routes that angular goes through, you might want to look at angular's interceptors: https://docs.angularjs.org/api/ng/service/$http#interceptors

Also, $locationProvider.html5Mode(true) is not needed to make ngRoute work. It is simply a way of defining how the URLs should look like and work. in HTML mode you can change the links to not use # anymore and simply be www.yoursite.com/app/content/second instead of www.yoursite.com/app#content/second

查看更多
0人赞 添加讨论(0) 举报
姐就是有狂的资本
3楼-- · 2019-07-20 21:40

Please check this code HTML code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.js"> </script>
  <script src="script.js"> </script>
</head>

<body ng-app="Main">
<ul>
  <li> <a href="#/content/first"> first partial </a> </li>
  <li> <a href="#/content/second"> second partial </a> </li>
</ul>
<div ng-view></div>

</body>
</html>

Js file 

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

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
 $routeProvider.
      when('/content/first', {
        templateUrl: 'first.html', 
        controller: 'first'
      }).
      when('/content/second', {
        templateUrl: 'second.html',
        controller: 'second'
      }); 
}]); 

app.controller('first', function($scope) {
  $scope.list = [1,2,3,4,5];
});

app.controller('second', function($scope) {
  $scope.list = [1,2,3];
});

first page HTML

<header> First content </header>
<p ng-repeat="item in list">
{{item}}
</p>

here is your working code click

查看更多
0人赞 添加讨论(0) 举报
Root（大扎）
4楼-- · 2019-07-20 21:50

Define your Routes in routes.js

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

route.config(function ($routeProvider) {
    $routeProvider
        .when("/", {
            templateUrl: "views/home.html",
            controller : 'homeCtrl'
        })
        .when("/home", {
            templateUrl: "views/home.html",
            controller : 'homeCtrl'
        })
        .when("/product", {
            templateUrl: "views/product-info.html"
        })
        .otherwise({redirectTo :'/'});
});

Attach the router to your Main Module.

angular.module('myApp', ['route']);

Import both the scripts in your index.html

查看更多
0人赞 添加讨论(0) 举报
乱世女痞
5楼-- · 2019-07-20 21:51

your route configuration is not correct, you assume route function is execute for each and every link u click but its not.

so your route function should be like

  function router($routeProvider) {

      $routeProvider.
      when('/content/first', {
        templateUrl: 'partials/first.html',
        controller: 'first'
      }).
      when('/content/second', {
        templateUrl: 'partials/second.html',
        controller: 'second'
      }).
      otherwise({
        templateUrl: 'partials/default.html'
      });
  }

note that urls should be like <a href="#/content/first"> // note the slash after #

to match that the routes in route function should be like when('/content/first', { note the leading slash

here is the working Plunker

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)