在AngularJS应用程序中使用封装指令和路由的推荐方法是什么?(What is the recommended way to use an encapsulated directive and routing within an AngularJS app?)

我正在尝试使用AngularJs 1.5应用程序的最佳实践 。 已经关注了Todd MottoJohn Papa的风格指南

问题是:我的应用程序使用ngRoute进行路由 。 所以这:

function RoutingConfig($routeProvider) {
    $routeProvider
        .when('/route1', {
            controller: 'Ctrl1 as vm',
            templateUrl: 'partials/route1.html',
            resolve: { myCoolService: myCoolService } // to abbreviate
        })
        .when('/route2', {
            controller: 'Ctrl2 as vm',
            templateUrl: 'partials/route2.html'
        })
        .otherwise({redirectTo: '/route1'}):

}

angular
    .module('myApp', ['ngRoute'])
    .config(RoutingConfig);

好。 到现在为止还挺好。

现在,让我们说,在我走向Angular 2的道路上, 我想采用指令方法封装所有内容 。 这样,我将使用AngularJS 1.5创建类似Web组件的东西。

如果我遵循正确的做法,我可以为我的route1创建一个指令,并直接为该指令定义一个控制器:

function MyCoolDirective() {
    var directiveDefObj = {
        controller: Ctrl1,
        controllerAs: 'vm',
        scope: {
            data: "=",
        },
        bindToController: true, // isolated scope
        link: linkFnc // just declared to abbreviate
    };

    return directiveDefObj;
}


angular
    .module('myApp')
    .directive('MyCoolDirective', MyCoolDirective);

那么, 我应该在哪里声明控制器? 在路由配置中? 在每个指令里面? 对我来说听起来有点冗余。


I'm trying to adopt best practices with an AngularJs 1.5 app. Already following Todd Motto's and John Papa's style guides

The thing is: my app has routes using ngRoute. So, this:

function RoutingConfig($routeProvider) {
    $routeProvider
        .when('/route1', {
            controller: 'Ctrl1 as vm',
            templateUrl: 'partials/route1.html',
            resolve: { myCoolService: myCoolService } // to abbreviate
        })
        .when('/route2', {
            controller: 'Ctrl2 as vm',
            templateUrl: 'partials/route2.html'
        })
        .otherwise({redirectTo: '/route1'}):

}

angular
    .module('myApp', ['ngRoute'])
    .config(RoutingConfig);

Ok. So far, so good.

Now, let's say that, in my road to Angular 2, I want to adopt the encapsulate everything in a directive approach. This way, I'll create something like web components, using AngularJS 1.5.

If I'm following the right practices, I could create a directive for my route1 and directly define a controller for that directive:

function MyCoolDirective() {
    var directiveDefObj = {
        controller: Ctrl1,
        controllerAs: 'vm',
        scope: {
            data: "=",
        },
        bindToController: true, // isolated scope
        link: linkFnc // just declared to abbreviate
    };

    return directiveDefObj;
}


angular
    .module('myApp')
    .directive('MyCoolDirective', MyCoolDirective);

So, where should I declare the Controllers? In the routing configuration? Inside each directive? Sounds a bit redundandt for me.


原文:https://stackoverflow.com/questions/37310516
2024-03-26 11:03

满意答案

这可以通过使用dcastdata.table来实现,它可以使用多个value.var

library(data.table)
dcast(setDT(data), id~rater, value.var=c("x", "y"), sep=".")
#   id x.1 x.2 x.3 y.1 y.2 y.3
#1:  1   0   1   2   0   1   2
#2:  2   0   1   2   0   1   2

This can be achieved by using dcast from data.table which can take multiple value.var

library(data.table)
dcast(setDT(data), id~rater, value.var=c("x", "y"), sep=".")
#   id x.1 x.2 x.3 y.1 y.2 y.3
#1:  1   0   1   2   0   1   2
#2:  2   0   1   2   0   1   2

相关问答

更多

R:你能指定reshape / cast中变量列的顺序吗?(R: Can you specify the order of variable columns from reshape/cast?)

我没有看到原因,为什么列顺序应该重要。 但是,您可以随时更改顺序: master[,c(names(master)[1:3], as.character(unique(master_long$factor)))] coy_name gvkey_iid variable sales cogs_xdep sga 1 Coy_1 111111 X20130930 1 4 7 2 Coy_1 111111 X20130831 2 ...

从广泛到长的一组变量重塑(reshape from wide to long group of variables)

如果你只有两个位置,你可以把它们放在正则表达式中,说明它们可能在名称的开头或结尾: library(tidyverse) df_wide %>% gather(variable, value, -Month) %>% mutate(location = sub('.*(Cabo|Acapulco).*', '\\1', variable), variable = sub('_?(Cabo|Acapulco)_?', '', variable)) %>%...

将R中的数据帧重新整形为宽格式[重复](Reshape data frame in R to wide format [duplicate])

您可以将公式创建为字符串,然后使用as.formula() 在lhs我使用setdiff()抓取所有不是DATA或measurement的列名。 library(reshape2) lhs <- paste0(setdiff(names(DF), c("DATA", "measurement")), collapse = "+") dcast(DF, as.formula(paste0(lhs, "~ measurement")), fun.aggregate = mean, value.var...

R:从长到宽重新整形,重新整理列的顺序为原始列顺序[重复](R: Reshape from long to wide, order of reshaped columns as original column order [duplicate])

这可以通过使用dcast的data.table来实现,它可以使用多个value.var library(data.table) dcast(setDT(data), id~rater, value.var=c("x", "y"), sep=".") # id x.1 x.2 x.3 y.1 y.2 y.3 #1: 1 0 1 2 0 1 2 #2: 2 0 1 2 0 1 2 This can be achieved by using dc...

将列(长)的级别重新整理为新列(宽)(Reshape levels of a column (long) into new columns (wide))

require(reshape2) mydat <- recast(test_data,hour~ride) mydat hour A B C 1 1 1 0 1 2 2 0 1 0 3 3 2 1 0 # 2nd part for(i in 2:ncol(mydat)){ for(ii in 1:nrow(mydat)){ if(mydat[ii,i] > 0) {mydat[ii,i] <- 1} } } hour A B C 1 1 1...

重塑从长到宽格式[重复](Reshape from long to wide format [duplicate])

你可以使用tidyr spread library(dplyr) library(tidyr) mutate(df1, var=factor(items, levels=unique(items), labels=paste0('items', seq(n_distinct(items))))) %>% spread(var, items, fill='') # customer_code items1 items2 items3 #1 ...

如何将具有两列的数据帧重新整形为宽格式?(How to reshape a data frame with two columns to wide format?)

你可以试试的东西: xmax <- max(table(x$conv)) xsplit <- split(x, x$conv) xsplit <- sapply(xsplit, function(tab){c(tab$name, rep(NA, xmax-length(tab$name)))}) x2 <- data.frame(conv=x$conv[!duplicated(x$conv)], t(xsplit), stringsAsFactors=F) colnames(x2)[-1]<-pa...

撤消使用创建的任意数量的列重新整形(Undo reshape with arbitrary number of columns created [duplicate])

这里是另一个选择,可以从data.table中melt ,这可以采用多种measure patterns 。 library(data.table) melt(setDT(toy_wide), measure = patterns("^colors", "^days"), value.name = c("colors", "days"), variable.name = "index")[order(first_key, second_key)] Here is another opti...

使用列名称中的id变量重新整形R [重复](Reshape with id-variable in column names R [duplicate])

我可能不称职,但似乎你已经将你的变量命名为reshape所假定的变量(例如v.mandate而不是mission.v )。 我改变了他们的命名,并可以让它工作: mydf <- data.frame(district = c(1:2), mandate.v = c(1, 3), mandate.s = c(2, 4), perc.v = c(.4, .3), ...

在大多数列具有多个值的情况下,重新变换为宽到宽(Reshape long to wide where most columns have multiple values)

在通过IDnum添加连续计数后,您可以使用基本函数reshape进行此IDnum 。 假设您的数据存储在名为df的data.frame : df2 <- within(df, count <- ave(rep(1,nrow(df)),df$IDnum,FUN=cumsum)) 提供名为“time”的连续计数的新列。 现在我们可以reshape为宽幅格式 reshape(df2,direction="wide",idvar="IDnum",timevar="count") IDnum z...

相关文章

更多

AngularJS资源

AngularJS是Google开源的一款JavaScript MVC框架,弥补了HTML在构建应用方 ...

2013年度最强AngularJS资源合集

AngularJS 是Google开源的一款JavaScript MVC框架,弥补了HTML在构建应用 ...

【JavaScript】 2013年度最强AngularJS资源合集

http://www.iteye.com/news/28651-AngularJS-Google-re ...

AngularJs视频教程

|----5-2:前端自动化测试(2).mp4 |----5-1:前端自动化测试(1).mp4 |-- ...

RabbitMQ 路由模式(Routing)-使用 direct Exchange

任何发送到Direct Exchange的消息都会被转发到RouteKey中指定的Queue。 ...

使用bootstrap和metroui设计的微网站或手机app界面

今天使用bootstrap和metroui设计了一个metro风格的移动app或者微信微网站的界面 程 ...

手机app

手机app是什么? 由于iPhone、三星等智能手机的逐步流行和广泛普及,手机app这个词语开始频繁的 ...

微信Web APP应用

微信Web APP即微信公众账号,对web APP的提供者来说这是一个门槛极低,容易到达数亿真实用户且 ...

App与微信WebAPP

我的App与微信搞上了   小麦积分墙摘自网络   最近有很多开发者关心的一个问题是如何提升app的 ...

Angularjs 中文视频教程

Angularjs 中文视频教程 029 - 自定义指令 controller 等属性_高清.mp4 ...

最新问答

更多

如何检索Ember.js模型的所有属性(How to retrieve all properties of an Ember.js model)

您可以简单地在模型上使用toJSON方法并从对象中获取密钥。 Ember.keys(model.toJSON()) 请注意,不会返回关键字。 You can simply use toJSON method on model and get the keys from object. Ember.keys(model.toJSON()) Note that will not return you keys for relations.

maven中snapshot快照库和release发布库的区别和作用

在使用maven过程中,我们在开发阶段经常性的会有很多公共库处于不稳定状态,随时需要修改并发布,可能一天就要发布一次,遇到bug时,甚至一天要发布N次。我们知道,maven的依赖管理是基于版本管理的,对于发布状态的artifact,如果版本号相同,即使我们内部的镜像服务器上的组件比本地新,maven也不会主动下载的。如果我们在开发阶段都是基于正式发布版本来做依赖管理,那么遇到这个问题,就需要升级组件的版本号,可这样就明显不符合要求和实际情况了。但是,如果是基于快照版本,那么问题就自热而然的解决了

arraylist中的搜索元素(Search element in arraylist)

您正在尝试搜索主题的arraylist,您需要编写一个小函数来将代码字符串与类的相应字符串进行比较。 您可以通过将其添加到主题类来完成此操作。 示例: @Override public boolean equals(String code) { return code.equals(this.); } 并将比较更改为需要匹配您匹配的代码的成员。 编辑:更简单的方法是将现有代码更改为: if (s.code.equals(codeNo[i])) //

从mysli_fetch_array中获取选定的值并输出(Get selected value from mysli_fetch_array and output)

这当然是一个重复的问题 。 编辑 : 循环执行后, $gg将指向列表中的最后一个值(在本例中为1002)。 我相信您正在尝试访问的用户选择的的值,可以通过以下方式完成: 在edit.php中 : "; while

Windows Phone上的可用共享扩展(Available Share Extensions on Windows Phone)

不可以。您只能作为图片的共享提供商。 对于其他所有内容,您可以为开发人员提供一个可以与您的应用关联的URI方案 ,因此如果他们决定与您分享内容,则可以稍后调用它。 但是,这不是系统范围的共享扩展。 No. You can only act as a share provider for pictures. For everything else, you can give developers an URI scheme that they can associate with your app

如何在命令提示符下将日期设置为文件名(How to set file name as date in command prompt)

首先,对于你的路径字符串,你应该将r前缀作为原始字符串,并且\不被视为转义字符。 其次,您可以使用datetime.datetime.now()来获取当前时间,然后使用strftime()来填充日期。 示例 - import datetime path = r'C:\soa11g\New\abc_%s.zip' % datetime.datetime.now().strftime('%d%m%Y') connect('weblogic','welcome','t3://localhost:700

如何在Laravel 5.2中使用paginate与关系?(How to use paginate with relationships in Laravel 5.2?)

请尝试以下方法: $messages = $user->contact_messages()->paginate(10); Try the following: $messages = $user->contact_messages()->paginate(10);

从iframe访问父页面的id元素(accessing id element of parent page from iframe)

您试图在父窗口上使用jQuery,尽管它没有在该上下文中定义。 它仅在子文档中定义。 而是更改您的子iframe脚本以在父窗口的元素上调用jQuery。 这是一个例子: 父文件 Parent click

linux的常用命令干什么用的

linux和win7不一样,win7都图形界面,都是用鼠标来操作打开,解压,或者关闭。而linux是没有图形界面的,就和命令提示符一样的一个文本框,操作linux里的文件可没有鼠标给你用,打开文件夹或者解压文件之类的操作都要通过linux常用命令。

Feign Client + Eureka POST请求正文(Feign Client + Eureka POST request body)

问题是Feign接口中的方法不能有多个“通用”参数。 您可以拥有任意数量的标头参数,但不能多于一个主体。 由于@RequestBody没有做任何事情,因此除了HttpServletRequest请求变量之外,它不被视为标题而是另一个变量。 所以我不得不改变我的业务逻辑只有一个参数。 The problem was that a method in Feign interface cannot have more than one 'general' argument. you can have