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

Question

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

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

-/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 

Answer 1

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

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

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

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); 

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

index.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-маршрутизатор стабильной версии):

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

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

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