0

我多年来一直在使用 AngularJS 1.4.7。主导航基于模块定义中定义的状态，可能如下所示：

var htmlReports = angular.module('app.htmlreports', []);
htmlReports.config(
function ($stateProvider) {
    $stateProvider
        .state('body.htmlreports', {
        templateUrl: 'htmlReports.html',
        controller: 'htmlReportsController',
        url: 'htmlreports'
    });
 });

所以每个模块都有它的状态配置。很简单，而且效果很好。现在我正在尝试迁移到 AngularJS 1.5 并将我的应用程序更改为基于组件的应用程序。我正在阅读一些文章，他们谈论带有路由的组件。像这样的东西：

var app = {
template: `
<p>Name: {{app.name}}</p>
<nav>
  <ul>
    <li><a ng-link="['Home']">Home</a></li>
    <li><a ng-link="['About']">About</a></li>
    <li><a ng-link="['User', {id: 'A'}]">User A</a></li>
    <li><a ng-link="['User', {id: 'B'}]">User B</a></li>
  </ul>
</nav>
<ng-outlet></ng-outlet>
 `,
 controller: AppController,
 controllerAs: 'app',
 $routeConfig: [
   { path: '/', component: 'home', as: 'Home' },
   { path: '/about', component: 'about', as: 'About' },
   { path: '/user/:id', component: 'user', as: 'User' }
 ]
};

所以，按照我的看法，我可以将所有带有状态配置的模块替换为带有路由的组件，对吧？

我也在读这篇文章： 文章

作者以以下方式显示他的状态配置，这更接近于我目前所拥有的：

angular.module('app', [
uiRouter
])
.config(($locationProvider, $stateProvider, $urlRouterProvider) => {
"ngInject";

// Define our app routing, we will keep our layout inside the app component
// The layout route will be abstract and it will hold all of our app views
$stateProvider
    .state('app', {
        url: '/app',
        abstract: true,
        template: '<app></app>'
    })

    // Dashboard page to contain our goats list page
    .state('app.home', {
        url: '/home',
        template: 'Home page'
    })

    // Create route for our goat listings creator
    .state('app.create', {
        url: '/create',
        template: 'Create Page'
    });

    // Default page for the router
   $urlRouterProvider.otherwise('/app/home');
   })
  .component('app', AppComponent);

有人可以帮助我了解在应用程序导航方面从 1.4.7 迁移到 1.5 的方向吗？

谢谢

4

0 回答 0