Как создавать aplicaciónes ты будешь модулировать с AngularJS?

Я стараюсь учиться делать модульные приложения с Угловым, но чтобы это делать, экспериментирую с webs, которые я реализую в моей работе. Я не знаю, возможно ли, или если он будет довольно прикладным, но как я понимаю, что я хочу, состоит в том, чтобы создавать различные модули, например модуль для slider с его собственным драйвером, модулем для бруска навигации с Вашим соответствующим контролирующим и таким с каким-то другим компонентом.

Я использую routeProvider для маршрутов и я “думаю”, что только возможно добавлять драйвер, который возьмется за логику этого вида. Моя проблема состоит в том, что в каждом виде я буду нуждаться в том, чтобы использовать драйвер nav, драйвер slider и т.д. и не только 1 драйвер одновременно. Я не знаю, действительно становится ли это таким, в страховке я это понимаю плохо. Я новый с угловым и программирование в общем, но хочу остаться и привыкнуть с хорошими практиками.

Если это не так: они могли бы говорить мне, как строить модульные приложения? Например иметь приложение, у которого был бы в том же виде модуль пользователей, модуль статистики, модуль чего-нибудь в этом роде, которое приходило в голову бы нам и каждый функционировал независимой формы, с чем я мог бы включать или дезактивировать любой модуль посредством конфигурации в панели управления например.

0
задан 21.03.2016, 22:58
1 ответ

Способ отделять поведение модульной формы в угловом - используя директивные органы и(или) компоненты. Я помещаю тебе пример (Угловой 1.5 +):

layouts/header.component.js

function HeaderController() {
  var ctrl = this;
  ctrl.brand = 'NombreDeEmpresa';
}
angular.module('app.layouts').component('myHeader', {
  bindings: {},
  controller: HeaderController,
  template: '<div class="header">'+
            '<div class="brand">{{ $ctrl.brand }}</div>'+
            '</div>'
});

layouts/footer.component.js

function FooterController() {
  var ctrl = this;
  ctrl.author = 'NombreAutor';
}
angular.module('app.layouts').component('myFooter', {
  bindings: {},
  controller: FooterController,
  template: '<footer>Hecho por {{ $ctrl.author }} </footer>'
});

DefiniciГіn маршрутов:

//...
.when("/inicio", {
  controller: "InicioCtrl",
  templateUrl: "ruta/al/template/inicio.html"
})
//...

inicio.html

<my-header></my-header>
<div>....</div>
<my-footer></my-footer>

Это также ты можешь делать это с директивными органами завися случай (он проверяет documentaciГіn , чтобы знать, когда годится использовать больше директивные органы или компоненты).

С другой стороны, другая soluciГіn менее элегантный состоит в том, чтобы использовать директивный орган ng-include:

  <ng-include src="'app/layouts/header.html'"></ng-include>
  <div>Contenido de mi inicio controller</div>
  <ng-include src="'app/layouts/footer.html'"></ng-include>

И в каждый сдержись ты можешь распределять драйвер ng-controller=HeaderCtrl.

Из-за Гєltimo, вероятно лучшая soluciГіn для этого типа проблемы состоит в том, чтобы использовать угловой ui-router , чтобы заменять $routeProvider. С этим книжным магазином ты манипулируешь маршрутами как состояния, таким образом можешь объявлять состояние как "абстрактно", и который оставшаяся часть маршрутов "получила в наследство" Г©l.

$stateProvider
.state('root', {
  templateUrl: 'app/layouts/base.html',
  controller: 'MainCtrl as ctrl',
  abstract: true 
})
.state('perfil', { //hereda de la base 'root' 
  url: '/perfil',
  parent: 'root',
  templateUrl: 'app/usuarios/perfil.html',
  controller: 'ProfileCtrl as ctrl'
})

app/layouts/base.html

<div class="main">
  <my-header></my-header>
  <div ui-view></div>
  <my-footer></my-footer>
</div>

Надеялся помочь тебе. Привет.

1
ответ дан 24.11.2019, 14:42

Теги

Похожие вопросы