Где я должен разместить код, который будет использоваться в компонентах/контроллерах для приложения AngularJS?

Должен ли он быть связан с модулем приложения? Это должен быть компонент или просто контроллер? По сути, я пытаюсь добиться общего макета для всех страниц, на котором я могу размещать или удалять другие компоненты.

Вот как примерно выглядит структура моего приложения:

-/bower_components
-/core
-/login
    --login.component.js
    --login.module.js
    --login.template.html
-/register
    --register.component.js
    --register.module.js
    --register.template.html
-app.css
-app.module.js
-index.html

angularjs angularjs-directive angularjs-controller angularjs-components
person dillib    schedule 11.07.2016    source источник
comment
Я бы создал папку services и поместил туда вещи, к которым вы хотели бы получить доступ с разных контроллеров.   -  person Alex Szabó    schedule 11.07.2016
comment
вы хотите поделиться кодом или иметь общий макет (верхний/нижний колонтитул)?   -  person gyc    schedule 11.07.2016
comment
Я хочу иметь общий макет, но мне также нужно будет управлять DOM этого макета, поэтому я предполагаю, что мне нужно будет использовать директивы? @gyc   -  person dillib    schedule 11.07.2016

Ответы (1)


arrow_upward
1
arrow_downward

Это может быть немного субъективно, чтобы ответить, но то, что я лично делаю в приложении Angular, основанном на компонентах, — это создание компонента, который будет инкапсулировать все остальные компоненты.

Я считаю особенно полезным делиться информацией для входа без необходимости вызывать службу в каждом отдельном компоненте. (и без необходимости хранить пользовательские данные внутри rootScope, хранилища браузера или файлов cookie.

Например, вы делаете родительский компонент следующим образом:

var master = {
    bindings: {},
    controller: masterController,
    templateUrl: 'components/master/master.template.html'
};

function masterController(loginService) {

    var vm = this;
    this.loggedUser = {};

    loginService.getUser().then(function(data) {
        vm.loggedUser = data;
    });

    this.getUser = function() {
        return this.loggedUser;
    };
}

angular
    .module('app')
    .component('master', master)
    .controller('masterController', masterController);

Главный компонент позаботится о маршрутизации.

индекс.html:

<master></master>

master.template.html:

<your common header>
<data ui-view></data>
<your common footer>

Таким образом, каждый компонент, внедренный внутрь <ui-view>, сможет «наследовать» главный компонент следующим образом:

var login = {
    bindings: {},
    require: {
        master: '^^master'
    },
    controller: loginController,
    templateUrl: 'components/login/login.template.html'
};

и в компонентном контроллере

var vm=this;
this.user = {};
this.$onInit = function() {
    vm.user = vm.master.getUser();
};

Вам нужно использовать хук жизненного цикла $onInit, чтобы убедиться, что все контроллеры и привязки зарегистрированы.

Последний трюк для навигации между компонентами — иметь такой маршрут (при условии, что вы используете стабильную версию ui-router):

.state('home',
{
    url : '/home',
    template : '<home></home>'
})

который будет эффективно маршрутизировать и загружать ваш компонент внутри <ui-view>

Новые версии ui-router включают маршрутизацию компонентов.

person gyc    schedule 11.07.2016