Question

我的dir的结构如下：

---/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);
    });
  }
]);

当我输入＆＃34; http://localhost:6001/index.html＆＃34;在Chrome的地址栏中，它会呈现：

单击“测试路线”按钮后，它将变为：

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

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

我需要

"http://localhost:6001/shop"

Chrome控制台显示：

我的问题是：如何使用以下代码正确呈现 shop.html 以及如何正确导航到/guoguo路径：

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

我对Angular很新。也许我没有考虑angularjs方法。谢谢你的观点。

Answer 1

显示您的.html＃的各种问题。试试这个。

1：添加头标记的第一行

<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/

Answer 2

我最终了解到AngularJS是基于 SPA（单页面应用程序）的框架。如果我只是跳转到另一个html，页面将加载另一个ng-app，它与原始应用程序无关（引导程序已重新启动）。

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

我稍后会粘贴完整的代码，谢谢大家!!!

Angularjs - $ routerProvider＆＃39;当＆＃39;功能和＆＃39; templateUrl＆＃39;导航到错误的＆＃39;路径？

2 个答案: