Question

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

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

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

这可能有点主观回答，但我个人在基于组件的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);

主组件将负责路由。

的index.html：

<master></master>

master.template.html：

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

这样，<ui-view>内注入的每个组件都能够继承＆＃39;主组件如下：

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包括组件路由。

我应该在哪里放置代码以跨AngularJS应用程序的组件/控制器使用？

1 个答案: