我正在玩新的角度路由器,并想尝试一个用例,我有一个组件和一个嵌套组件.
下面是我编写的用于定义两个组件和路由的JavaScript代码:
angular.module('app', ['ngNewRouter'])
.controller('AppController', function ($router) {
$router.config([
{
path: '/parent',
component: 'parent'
}
]);
})
.controller('ParentController', function ($router) {
this.name = 'Parent component';
$router.config([
{
path: '/child',
component: 'child'
}
]);
})
.controller('ChildController', function () {
this.name = 'Child component';
})
.config(function ($componentLoaderProvider) {
$componentLoaderProvider.setTemplateMapping(function (compName) {
return compName + '.html';
});
});
和HTML部分:
<!-- index.html -->
<body ng-controller="AppController as app">
<a ng-link="parent">Go to parent</a>
<div ng-viewport></div>
</body>
<!-- parent.html -->
{{ parent.name }}<br/>
<a ng-link="child">Show …我有一个编辑表单,用户可以在其中更新单个"拍卖".如何在更新功能中正确使用$ state.go('auctions'),以便在更新成功后用户被定向到拍卖视图？
或者更好:如何将参数传递给$ $ state.go('auction')
// Update auction
$scope.updateAuction = function(auction){
auctions.updateAuction(auction, {
product: $scope.product,
condition: $scope.condition
}).success(function() {
$state.go('auctions'); // I think I need to add auction parameters here
ToastService.show('Auction updated');
});
};
拍卖$ state函数如下所示:
// state for showing single Auction
.state('auctions', {
url: '/auctions/{product}/{id}',
templateUrl: 'auctions/auction-view.html',
controller: 'AuctionViewCtrl',
resolve: {
auction: ['$stateParams', 'auctions', function($stateParams, auctions) {
return auctions.get($stateParams.id);
}]
}
})
编辑表格只能通过相关的拍卖视图加入,所以也许有更好的选择使用$ state.go而不发送新的GET请求,因为拍卖已经加载？
尝试迁移angularjs应用程序以使用新版本的angular-ui-router1.0.14,并在尝试更改$stateParams状态的解析时偶然发现问题.
例如,之前(当使用angular-ui-router0.3.2时)修改$stateParams工作如下:
$stateProvider.state('myState', {
parent: 'baseState',
url: '/calendar?firstAvailableDate',
template: 'calendar.html',
controller: 'CalendarController',
controllerAs: 'calendarCtrl',
resolve: {
availableDates: ['CalendarService', '$stateParams', function(CalendarService, $stateParams) {
return CalendarService.getAvailableDates().then(function(response){
$stateParams.firstAvailableDate = response[0];
return response;
});
}]
}
})
问题是firstAvailableDate在解决后填充,我不知道$transition$.params()在使用新版本的angular-ui-router1.0.14 时如何更新解决方案.
我试过,并设法用更新url参数
射击$state.go('myState', {firstAvailableDate : response[0]})但这会重新加载状态,因此屏幕闪烁
修改$transition$.treeChanges().to[$transition$.treeChanges().length-1].paramValues.firstAvailableDate = response[0];为实际覆盖参数.在查看了实现之后,我已经完成了这项params()工作$transition$.
虽然这些选项都有效,但它们似乎是黑客而不是书籍实施.
尝试修改解析中的参数时,使用的正确方法是什么？
我想对我的服务器进行真正的调用进行集成测试,所以,我不想使用angular-mocks的$ httpBackend模块,所以我试试这个:
beforeEach(inject(function($rootScope,_MembersDataSvc_){
service = _MembersDataSvc_;
}));
it('test',function(done){
service.me().then(function(){done();});
});
服务是:
function me() {
return $http
.get('urlBase/me')
.then(meSuccess);
function meSuccess(response) {
return response.data.members[0];
}
}
这从来没有调用$ http,似乎angular-mocks覆盖了$ http服务从未拨打过电话.
一些想法？
编辑1:
根据这篇文章:http://base2.io/2013/10/29/conditionally-mock-http-backend/
你可以为那些你不想模拟的$ http调用做一个passThrough,所以你试试这个:
var service;
var scope;
var $httpBackend;
beforeEach(inject(function($rootScope,_MembersDataSvc_,_$httpBackend_){
service = _MembersDataSvc_;
scope = $rootScope.$new();
$httpBackend = _$httpBackend_;
}));
it('test',function(done){
//this.timeout(10000);
$httpBackend.whenGET(/views\/\w+.*/).passThrough();
$httpBackend.whenGET(/^\w+.*/).passThrough();
$httpBackend.whenPOST(/^\w+.*/).passThrough();
service.me().then(function(response){console.log(response);done();});
scope.$apply();
//service.getDevices(member).then(function(response){console.log(response);done();})
});
但是passThrough在这里是未定义的.
编辑2:
我读过这篇文章:http://blog.xebia.com/2014/03/08/angularjs-e2e-testing-using-ngmocke2e/,但我认为这是一个独立的测试??,我想用业力和茉莉花.
这是我的全部测试.
describe('integration test', function () {
beforeEach(function () {
module('MyAngularApp');
});
var service; …AngularJS支持带有-start和-end后缀的多元素指令.官方文档仅提及ng-repeat-start和ng-repeat-end.其他内置指令是否支持此功能？
例如,这工作正常:
<tbody>
<tr ng-controller="myController">
<td>{{firstName}}</td>
<td>{{lastName}}</td>
</tr>
</tbody>
这两个{{firstName}}和{{lastName}}被替换为它们应有的价值.
但这只能部分起作用:
<tbody>
<tr ng-controller-start="myController">
<td>{{firstName}}</td>
</tr>
<tr ng-controller-end>
<td>{{lastName}}</td>
</tr>
</tbody>
{{firstName}}被正确替换.但是{{lastName}}空的.由于{{firstName}}作品,似乎ng-controller-start被AngularJS认可.这是一个错误,或者我做错了,那{{lastName}}是行不通的？
更新
如果ng-controller-start并且ng-controller-end未得到官方支持.如何ng-controller跨越多个元素？我可以使用comment-style指令吗？如果有,怎么样？
下午好!
我正在尝试使用UI-Select来填充与模型相关联的表单.使用控制器通过以下方式从服务器接收模型数据:
<form action="index.php" method="post" class="form-horizontal" ng-controller="WorkPlanController as ctrl" ng-init="init(6)">
<!-- this work perfectly! -->
<textarea name="workplan_approver_post" ng-model="workplan.approver_post"></textarea>
<!-- here I have troubled -->
<div ng-controller="LookupController as lookupCtrl" ng-init="lookupCtrl.initLookup('corriculum_speciality_directions')">
<ui-select ng-disabled="disabled" multiple ng-model="workplan.profiles" theme="select2">
<ui-select-match placeholder="???????? ???????? ?? ??????">{{$item.value}}</ui-select-match>
<ui-select-choices repeat="item.key as item in items track by $index | filter: $select.search">
<div ng-bind-html="item.value | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
</div>
</form>
WorkPlanController是一个简单的REST服务:
application
.controller("WorkPlanController", [
'$scope',
'WorkPlan',
function($scope, workPlanFactory){
$scope.workplan;
$scope.workplan = {
profiles: []
};
$scope.init = function($id){
workPlanFactory.get({id: $id}, …如何在 Gradle 中添加类似于 Maven 属性的属性？
用例是这样的：我想要一个文件，它声明 repo 依赖项的所有版本，以便它们在多模块项目的一个地方统一
compile group: 'javax.servlet.jsp.jstl', name: 'jstl', version: '1.2'
在 Maven 中，您可以拥有这样的属性：
<properties>
<jstlVersion>1.2</jstlVersion>
</properties>
可以使用 Gradle 的外部属性吗？或者只是将它们添加到 gradle.properties 文件中？