Pull to refresh

Легкие контроллеры с AngularJS

Reading time 2 min
Views 36K
В дополнение к этому посту.

Кто не знает, есть такая штука ui-router. Замена стандартного роутера Ангуляра. Учитывая, что в Ангуляре 2.0 планируют запилить нечто подобное, вскоре этот роутер станет стандартом.

С помощью него можно строить приложение, например, так:

Модуль main
$stateProvider.state('main', {
    abstract: true
    views: {
        'body': {
            templateUrl: '/main/views/body/template.html'
        },
        'header@main': {
            controller: 'mainBodyHeader'
            templateUrl: '/main/views/body/header/template.html'
        },
        'footer@main': {
            controller: 'mainBodyFooter'
            templateUrl: '/main/views/body/footer/template.html'
        }
    }
});

/main/views/body/template.html
<body>
    <ui-view name="header"></ui-view>
    <ui-view name="content"></ui-view>
    <ui-view name="footer"></ui-view>
</body>


Модуль article
$stateProvider.state('article', {
    parent: 'main',
    abstract: true,
    views: {
        'content@main': {
             templateUrl: '/article/views/content/template.html'
        },
        'navigation@article': {
            controller: 'articleContentNavigation'
            templateUrl: '/article/views/content/navigation/template.html'
        },
        'sidebar@article': {
            controller: 'articleContentSidebar'
            templateUrl: '/article/views/content/sidebar/template.html'
        }
    }
});
$stateProvider.state('article.popular', {
  url: '/article/popular',
  views: {
    'list': {
      controller: 'articleContentListPopular',
      templateUrl: '/article/views/content/list/popular/template.html'
    }
  },
});

/article/views/content/template.html
<content>
    <ui-view name="navigation"></ui-view>
    <ui-view name="sidebar"></ui-view>
    <ui-view name="list"></ui-view>
</content>

Таким образом можно дробить приложение на сколько угодно частей.

Так же можно писать свои директивы. Если контроллеры, по большому счету, используются для уникальных вещей, то в директивы стоит заворачивать любые компоненты, встречающиеся в приложении несколько раз. У директив, кстати, могут быть свои контроллеры.

app.directive('demo', function () {
  return {
      templateUrl: '/directives/demo/template.html',
      controller: 'demo'
  };
});


Еще есть директивы ng-include и ng-controller, которые, в общем, не нужны, но могут помочь, если пользуетесь стандартным роутером.

Есть сервисы, в которые стоит выносить общий код.

Есть resolve роутера, где можно делать общие асинхронные операции, чтобы не тащить их в каждый контроллер.

К чему это я всё пишу? К тому, что проблема толстых контроллеров высосана из пальца. Используя стандартные средства можно написать сколь угодно большое приложение, где средний контроллер будет занимать 200 строчек кода.
Tags:
Hubs:
+15
Comments 14
Comments Comments 14

Articles