对于 AngularJS 应用程序，我应该在哪里放置跨组件/控制器使用的代码? [英] Where should I place code to be used across components/controllers for an AngularJS app?

问题描述

是否应该与应用模块相关联?它应该是一个组件还是只是一个控制器?基本上，我想要实现的是跨所有页面的通用布局，我可以在其中放置或删除其他组件.

Should it be associated with the app module? Should it be a component or just a controller? Basically what I am trying to achieve is a common layout across all pages within which I can place or remove other components.

以下是我的应用程序的大致结构:

Here is what my app's structure roughly looks like:

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

推荐答案

回答这个问题可能有点主观，但我个人在基于组件的 Angular 应用程序中所做的是创建一个将封装所有其他组件的组件.

This might be a bit subjective to answer but what I personally do in a components based Angular application is to create a component that will encapsulate all the other components.

我发现无需在每个组件中都调用服务即可共享登录信息特别有用.(并且无需将用户数据存储在 rootScope、浏览器存储或 cookie 中.

I find it particularly useful to share login information without needing to call a service in every single component. (and without needing to store user data inside the rootScope, browser storage or cookies.

例如，您像这样创建组件父级:

For example you make a component parent like so:

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:

index.html:

<master></master>

master.template.html:

master.template.html:

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

这样， 中注入的每个组件都可以像这样继承"主组件:

This way, every component injected inside <ui-view> will be able to 'inherit' the master component like so:

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 来确保所有控制器和绑定都已注册.

You need to use the life cycle hook $onInit to make sure all the controllers and bindings have registered.

在组件之间导航的最后一个技巧是拥有这样的路由(假设您使用 ui-router 稳定版本):

A last trick to navigate between components is to have a route like so (assuming you use ui-router stable version):

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

这将有效地在

新版本的 ui-router 包括组件路由.

New versions of ui-router include component routing.

这篇关于对于 AngularJS 应用程序，我应该在哪里放置跨组件/控制器使用的代码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！