Angularjs - $ routerProvider的'when'函数和'templateUrl'导航到'错误'路径？

我目录的结构是这样的：

---/public 
     | 
     ---index.html 
     ---shop.html 
     | 
     ---/js 
      | 
      ---index.js 
      ---index_controller.js 
      ---/lib 
      ---/css 
      ---/plugins 
       | 
       ---...

我的index.html：

<!doctype html> 
<html class="signin no-js" lang=""> 
<head> 

<meta charset="utf-8"> 
<meta name="description" content="Flat, Clean, Responsive, application admin template built with bootstrap 3"> 
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> 

<title>Index</title> 

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> 
<link rel="stylesheet" href="css/font-awesome.css"> 
<link rel="stylesheet" href="css/themify-icons.css"> 
<link rel="stylesheet" href="css/animate.min.css"> 

<link rel="stylesheet" href="css/skins/palette.css"> 
<link rel="stylesheet" href="css/fonts/font.css"> 
<link rel="stylesheet" href="css/main.css"> 

<script src="js/lib/angular/angular.js"></script> 
<script src="js/lib/angular/angular.min.js"></script> 
<script src="js/lib/angular/angular-route.js"></script> 
<script src="js/lib/angular/angular-route.min.js"></script> 

<script src="js/index_controller.js"></script> 
<script src="js/index.js"></script> 

<script src="plugins/modernizr.js"></script> 

</head> 
<body class="bg-primary" ng-app="myApp.index"> 
    <div class="cover" style="background-image: url(img/cover3.jpg)"></div> 
    <div class="overlay bg-primary"></div> 
    <div class="center-wrapper"> 
    <div class="center-content"> 
    <div class="row"> 
    <div class="col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4"> 
     <section class="panel bg-white no-b"> 
      <ul class="switcher-dash-action"> 
      <li class="active"><a href="#" class="selected">Index</a></li> 
      </ul> 
      <div class="p15" ng-controller="IndexCtrl"> 
       <form role="form" > 
        <div > 
         <button class="btn btn-primary btn-lg btn-block" ng-click='testRoute()'> 
          TestRoute 
         </button> 
        </div> 
       </form> 
      </div> 
     </section> 
     <p class="text-center"> 
      Copyright &copy; 
      <span id="year" class="mr5"></span> 
     </p> 
    </div> 
    </div> 
    </div> 
    </div> 
    <script type="text/javascript"> 
      var el = document.getElementById("year"), 
       year = (new Date().getFullYear()); 
      el.innerHTML = year; 
    </script> 
</body> 
</html>

而且shop.html呈现以下内容：（仅供测试使用）：

SHOP

和index_controller.js是：

function IndexCtrl($scope, $http, $location, $route, $window) { 
    $scope.testRoute = function() { 
    console.log(">>>TestRoute>>>"); 
    $location.url('/shop'); 
    } 
} 

function ShopCtrl() { 
console.log("ShopCtrl"); 
}

而且index.js：

'use strict'; 
//Angular-js 
var module = angular.module('myApp.index', ['ngRoute']); 

module.config(['$routeProvider', function($routeProvider) { 
     $routeProvider. 
       when('/shop', {templateUrl: 'shop.html', controller: ShopCtrl 
       }); 
}]); 

/*My Controllers*/ 
module. 
    controller('IndexCtrl', ['$scope', '$http', '$location', '$route', '$window', IndexCtrl]); 

module. 
run([ 
    '$rootScope', '$location', 
    function($rootScope, $location) { 
    $rootScope.$on('$routeChangeStart', function(event, next, current) { 
     var nextTemplate = next.templateUrl; 
     var nextController = next.controller; 
     console.log("location.path:" + $location.path()); 
     console.log('Template Starting to leave %s to go to %s\n', "", nextTemplate); 
     console.log('Controller Starting to leave %s to go to %s\n', "", nextController); 
    }); 
    } 
]);

当我在Chrome的地址栏中输入 “http://localhost:6001/index.html”，它呈现：

一下考试路线按钮后，它将变为：

只有url地址改变了，看起来很奇怪：

"http://localhost:6001/index.html#/shop"

而我需要

"http://localhost:6001/shop"

Chrome的控制台显示：

我的问题是：如何使shop.html以及如何导航到/guoguo请使用如下代码：

$routeProvider.when('/shop', {templateUrl: 'shop.html', controller: ShopCtrl 
        });

我是Angular的新手。也许我没有想到angularjs方法。谢谢你的观点。

来源

2016-03-14 Al2O3

我finaly去知道AngularJS是SPA（单页APP）基于framwork。如果我只是跳转到另一个HTML，页面将加载另一个ng-app，这与原始应用程序无关（引导程序已重新启动）。

我采取的解决方案是在index html内使用ng-view。它允许加载不同的ng-view（位于'<div></div>'，来自其他html文件），并通过声明template url和controller来配置routeProvider。

我以后会粘贴完整的代码，谢谢大家！

来源

2016-03-15 03:29:50 Al2O3

这是你的.html＃显示的问题的混合。尝试这个。

1：添加在head标签的第一行

<head><base href="/"> 
    ... 
</head>`

2：使用此$locationProvider.html5Mode(true);

app.config(function($routeProvider,$locationProvider){ 
    $routeProvider 
    .when('/',{ 
     templateUrl: 'views/home.html', 
     controller:'homeCtrl' 
    }) 
    .when('/about',{ 
     templateUrl: 'views/about.html', 
     controller:'aboutCtrl' 
    }) 
    .otherwise({ 
     redirectTo: '/home' 
    }); 
    $locationProvider.html5Mode(true); 
});

这应该从页面中删除＃。但是，在您的服务器化妆index.html作为服务的路径http://localhost:6001/默认的文件，那么它会载入http://localhost:6001/index.html作为http://localhost:6001/

来源

2016-03-14 04:33:05 Gary

Angularjs - $ routerProvider的'when'函数和'templateUrl'导航到'错误'路径？

回答

相关问题