我应该在哪里放置要在AngularJS应用程序的组件/控制器之间使用的代码? [英] Where should I place code to be used across components/controllers for an AngularJS 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
回答这个问题可能有点主观,但是我个人在基于组件的Angular应用程序中所做的是创建一个将封装所有其他组件的组件./p>
我发现共享登录信息而不需要在每个组件中调用服务特别有用. (并且无需将用户数据存储在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>
内部的每个组件都将能够继承"主组件,如下所示:
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包括组件路由.
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
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.
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);
The master component will take care of the routing.
index.html:
<master></master>
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'
};
and in the component controller
var vm=this;
this.user = {};
this.$onInit = function() {
vm.user = vm.master.getUser();
};
You need to use the life cycle hook $onInit
to make sure all the controllers and bindings have registered.
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>'
})
which will effectively route and load your component inside <ui-view>
New versions of ui-router include component routing.
这篇关于我应该在哪里放置要在AngularJS应用程序的组件/控制器之间使用的代码?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!