Question

我多年来一直在使用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' }
 ]
};

所以，我看到它的方式我可以用状态配置将所有模块替换为带路由的组件，对吗？

我也在阅读这篇文章： Article

作者以下列方式显示他的状态配置，这与我目前所希望的更接近：

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的方向吗？

由于

带路径的AngularJS组件

0 个答案: