Angularjs

Question

我的目录结构如下：

---/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 方法。谢谢你的分数。

Answer 1

显示您的 .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/

Answer 2

我终于知道 AngularJS 是一个基于 SPA（单页应用程序） 的框架。如果我只是跳转到另一个 html，页面将加载另一个 ng-app，这与原始应用程序无关（bootstrap 已重新启动 ).

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

稍后会贴上完整的代码，谢谢大家！！！

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

Angularjs - $routerProvider's 'when' function and 'templateUrl' navigate to 'wrong' path?

google-chrome

angularjs-routing