angularJS 1.5 component与ui-router的结合
• • ☕️ 1 min read准备工作
为了正常使用component的新特性和顺利结合进angular-ui-router，先检查依赖。（angular-ui-router版本太低会导致传参数入component在$resolve的时候无效，哎，都是泪T_T，本宝宝以为只要angular版本高于1.5就行了，结果折腾了半天发现angular-ui-router也要对应更新）
主要的依赖需求是：
"angular": "^1.5.8",
"angular-ui-router": "^1.0.0"
引入component
首先假如定义如下的元件：
app.component('myComponent', {
templateUrl: 'myComponent.html',
controller: 'MyController',
bindings: { input1: '<', input2: '<' }
});
传统写法
使用template，通过$resolve传递数据。（本宝宝喜欢这个方法，在component实例化之前用promise的方式取数据，很强大！）
$stateProvider.state('foo', {
template: '<my-component input1="$resolve.foo" input2="$resolve.bar"></my-component>',
url: '/foo/:fooId/:barId',
resolve: {
foo: ($stateParams, FooService) => FooService.get($stateParams.fooId),
bar: ($stateParams, BarService) => BarService.get($stateParams.barId)
}
});
component参数指定
$stateProvider.state('foo', {
component: 'myComponent',
url: '/foo/:fooId/:barId',
resolve: {
// input1 and input2 are same names as myComponent `bindings`
input1: ($stateParams, FooService) => FooService.get($stateParams.fooId),
input2: ($stateParams, BarService) => BarService.get($stateParams.barId)
}
});
name:bindings对象的形式
$stateProvider.state('foo', {
component: 'myComponent',
bindings: { input1: "foo", input2: "bar" },
url: '/foo/:fooId/:barId',
resolve: {
foo: ($stateParams, FooService) => FooService.get($stateParams.fooId),
bar: ($stateParams, BarService) => BarService.get($stateParams.barId)
}
});