AngularJs 中的动态路由

Dynamic routing in AngularJs

本文关键字：路由 动态 AngularJs      更新时间：2023-09-26

我还是AngularJs的新手。网址在变化，但页面总是相同的。我期待着你的帮助。

配置：

var app = angular.module('MyApp', ['ngResource','ngRoute']);
app.config(['$routeProvider',
            function($routeProvider) {
        $routeProvider
        .when('/',{
             templateUrl: '../pages/.index1.html'
        })
    .when('/profile',{
         templateUrl: './profile.html'
    }).when('/messages',{
        templateUrl: 'file.html'
    });
 }]);

这是我的索引1.html我呼吁应用程序的地方.js

<script src="../angular/angular.js"></script>
<script src="../angular/angular-route.js"></script>
<script src="../angular/angular-resource.js"></script>
<script src="../js/app.js"></script>
<ul>         
   <li class="">
      <a ng-href="#/"><i class="fa fa-group"></i> Users</a>
   </li>
   <li class="">
      <a  ng-href="#/profile"><i class="icon-user-1"></i> Profile</a>
   </li>
   <li class="">
      <a ng-href="#/messages"><i class="icon-comment-fill-1"></i> Messages</a>
   </li>
</ul>

我猜上面没有包含所有 HTML，但在完整的 HTML 文件中，您需要定义将注入路由视图的位置。也许你错过了？有一个名为ng-view的特殊指令。您可以简单地将其用作：

 <div ng-view></div>

然后，该div 将成为您在应用程序中导航时显示视图的位置。

在 https://docs.angularjs.org/api/ngRoute/service/$route#example 的 angular 文档中有一个完整的示例

相关文章：