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

在你的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>

导入Angular之前ngRoute或任何其他模块
使用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，则需要在<base href="/" />的末尾添加head。

由于某些原因，plunker不允许我这样做，但我确定你能让它在你的版本上工作。

Here你可以找到复制你申请的工作人员。

希望我能提供帮助。

Answer 2

剩下的和不可见的问题在这里：

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

模块对象的

config()函数作为参数，一个字符串数组而不是一个字符串＆＃34;，＆＃34;作为它内部的分隔符char。请参阅示例和doc： 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（有序的lib，拼写错误和配置函数调用）： http://plnkr.co/edit/NTn6Zmav5RX4V8zgHPOG?p=preview

我已移除$locationProvider.hashPrefix('!')，因为它不适合您正在使用的网址。请参阅@ 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>

Answer 3

加载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个文件，但如果没有jQuery库，Bootstrap将无法运行。因此，这意味着您应首先加载jQuery，然后加载Bootstrap.js。其他库应该重新排序（我在上面的例子中展示过）。

此外，您可以在浏览器中使用Console来查看是否存在错误以及您遇到的错误。

使用templateUrl进行AngularJS路由

3 个答案: