AngularJS 使用 templateUrl 进行路由

Question

我的 AngularJS 路由有问题：我没有收到页面的任何反馈。没有错误或视图切换。

我检查了模块的实现，但声明方式正确。然后我搜索了templateURL之类的错别字，但没有找到。我还尝试在列表中使用 ng-href 而不是 href，但是链接不再可点击。

还有我的代码：

创建了我的导航：

<body ng-app="Productportfolio">

<ul>
  <li>
    <a href="#/home">Home</a>
  </li>
  <li>
    <a href='#/privat'>Log in</a>
 </li>
</ul>

<ng-view></ng-view>

<!--own js -->
<script src="app.js"></script>
<!--Controller -->
<script src="ProductCtrl.js"></script>
<!--Services -->
<!--Direktives-->
</body>

制作模板：

//home.html
<div>
  <h1> Home </h1>
</div>

//private.html
<div>
  <h1> Private</h1>
</div>

声明了一个Angular模块：

angular.module('Productportfolio', ['ngRoute'])

将 $routeProvider 添加到我的配置中：

angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl'])

.config(['$routeProvider, $locationProvider', function ($routeProvider, $locationProvider) {

  $routeProvider

    .when('/home', {
        templateUrl: 'home.html',
        controller: 'ProductCtrl'
    })

    .when('/private', {
        templateUrl: 'private.html',
        controller: 'ProductCtrl'
    })

    .otherwise({
        redirectTo: '/home',
        controller: 'ProductCtrl'
    });

  $locationProvider.hashPrefix('!');

}]);

Answer 1

加载java个脚本文件的顺序非常重要。按以下顺序加载：

<link data-require="bootstrap@*" data-semver="4.0.0-alpha.2" rel="stylesheet" 
              href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="jquery@*" data-semver="3.0.0" 
              src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script>
<script data-require="bootstrap@*" data-semver="4.0.0-alpha.2" 
          src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>


<!--AngularJS-->
<script data-require="angularjs@1.5.8" data-semver="1.5.8" 
            src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script data-require="angular-route@*" data-semver="1.5.8" 
           src="https://code.angularjs.org/1.5.8/angular-route.js"></script>

这意味着您正在加载 Bootstrap.js 个文件，但是 Bootstrap 没有 jQuery 库就无法工作。所以这意味着你应该首先加载jQuery，然后加载Bootstrap.js。其他库应该重新排序（我已经在上面的示例中显示）。

此外，您可以在浏览器中使用Console查看是否有错误以及您有什么错误。

Answer 2

在您的 Plunker 中，存在一些与导入相关的问题。为了简单起见，我简单地删除了 jQuery 和 Bootstrap。我还将所有模块放在一个 app.js 文件中。

您的 html:

中有一些错误

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>

    <!--AngularJS-->
    <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <script data-require="angular-route@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
  </head>

  <body ng-app="Productportfolio">

  <ul>
    <li>
      <a ng-href="#home">Home</a>
    </li>
    <li>
      <a ng-href="#private">Private</a>
    </li>
  </ul>

    <ng-view></ng-view>

    <!--own js -->
    <script src="app.js"></script>
  </body>

</html>

在 ngRoute 或任何其他模块之前导入 Angular
使用ng-href='#routeName'，否则

并且在你的 js:

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

myApp.controller('ProductCtrl', ['$scope',function ($scope) {
  var vm = this;
}]);

myApp.config(['$routeProvider', function ($routeProvider) {

        $routeProvider
            .when('/home', {
                templateUrl: 'home.html',
                controller: 'ProductCtrl'
            })

            .when('/private', {
                templateUrl: 'private.html',
                controller: 'ProductCtrl'
            })

            .otherwise({
                redirectTo: '/home',
                controller: 'ProductCtrl'
            });
}]);

您只需要在您的应用程序模块中注入外部模块，而不是所有控制器、服务等

请注意，为了方便起见，我还删除了您的服务，因为您没有分享它而且它很有用。

最后但同样重要的是，如果你想使用$locationProvider.hashPrefix('!');来使用hashbangs，你需要在你的head末尾添加<base href="/" />。

出于某种原因，plunker 不允许我这样做，但我相信你会让它在你的版本上工作。

Here 您可以找到正在运行的 plunker 来重现您的应用程序。

希望对您有所帮助。

Answer 3

剩下的不可见的问题在这里:

angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl'])
.config(['$routeProvider, $locationProvider',

config() 模块对象的函数将一个字符串数组作为参数，而不是一个以“,”作为分隔符的字符串。请参阅此处的示例和文档： https://docs.angularjs.org/guide/providers#provider-recipe

所以，应该是：

angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl'])
.config(['$routeProvider', '$locationProvider',

更新 :

但事实上，在你的情况下，即使不精确数组也能工作:

angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl'])
.config(

我用这两个版本更新了 plunker 和 app.js。我的印象是数组不是强制性的（不再）。所以，忽略那个参数似乎更好，特别是，如果值不好，它可能会产生副作用。

这里是经过更正的 plunker（有序库、拼写错误和调用的配置函数）： http://plnkr.co/edit/NTn6Zmav5RX4V8zgHPOG?p=preview

我删除了 $locationProvider.hashPrefix('!')，因为它不适合您正在使用的 url。请参阅@AndreaM16 的回答。

此外，您还没有在控制器中声明要使用的服务。

app.js

angular.module('Productportfolio', ['ngRoute'])
       .config(['$routeProvider', '$locationProvider',
            function ($routeProvider, $locationProvider) {

        $routeProvider
            .when('/home', {
                templateUrl: 'home.html',
                controller: 'ProductCtrl'
            })

            .when('/private', {
                templateUrl: 'private.html',
                controller: 'ProductCtrl'
            })

            .otherwise({
                redirectTo: '/home',
                controller: 'ProductCtrl'
            });


        }]
    );

或app.js在config函数中没有数组参数：

angular.module('Productportfolio', ['ngRoute'])
       .config(
            function ($routeProvider, $locationProvider) {

        $routeProvider
            .when('/home', {
                templateUrl: 'home.html',
                controller: 'ProductCtrl'
            })

            .when('/private', {
                templateUrl: 'private.html',
                controller: 'ProductCtrl'
            })

            .otherwise({
                redirectTo: '/home',
                controller: 'ProductCtrl'
            });

       // $locationProvider.hashPrefix('!');
        }
    );

index.html :

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <!--Bootstrap-->
    <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>

    <script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script><!-- Tether for Bootstrap --> 
    <link data-require="bootstrap@*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
    <script data-require="bootstrap@*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>


    <!--AngularJS-->
        <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <script data-require="angular-route@*" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>


    <!--own js -->
    <script src="app.js"></script>
    <!--Controller -->
    <script src="ProductCtrl.js"></script>
    <!--Services -->
    <!--Direktives-->
  </head>

  <body ng-app="Productportfolio">

  <ul>
    <li>
      <a href="#home">Home</a>
    </li>
    <li>
      <a href="#private">Log in</a>
    </li>
  </ul>
  <div ng-view></div>


  </body>

</html>

AngularJS 使用 templateUrl 进行路由

AngularJS routing with templateUrl

angularjs

angular-routing