使用templateUrl进行AngularJS路由

发布时间：2020-12-17 07:27:33 所属栏目：安全来源：网络整理

导读：我对AngularJS路由有问题：我没有得到任何页面反馈.没有错误或视图切换. 我检查了模块的实现,但它以正确的方式声明.然后我搜索了诸如templateURL之类的拼写错误,但我没有找到任何拼写错误.我也尝试在列表中使用ng-href而不是href,但是链接不再可以点击了. He

我对AngularJS路由有问题：我没有得到任何页面反馈.没有错误或视图切换.

我检查了模块的实现,但它以正确的方式声明.然后我搜索了诸如templateURL之类的拼写错误,但我没有找到任何拼写错误.我也尝试在列表中使用ng-href而不是href,但是链接不再可以点击了.

Here is my plunker.

我的代码：

>创建我的导航：

<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('!');

}]);

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

>导入角度BEFORE 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 =“/”/>在你的头脑中.

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

Here您可以找到复制您的应用程序的工作plunker.

希望我一直很有帮助.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!