我使用的是angular 1.5 beta 2和angular 2 alpha 45的新路由器。
我找不到Angular 1最新路由器的使用示例。
我可以找到Angular 2使用@RouteConfig
的路由器的示例。
有人能解释一下我将如何配置角度1控制器吗?如果可能的话,还有一个完整的工作示例?
更新他们已经停止使用此版本的路由器,并启动了具有不同API的版本3。截至2016年6月20日,还没有推荐将路由器v3与Angular 1一起使用的方法。我不确定从那以后情况是否发生了变化。下面的这个问题和答案与路由器v2(又名组件路由器)有关。
过时的API
一些站点指示Angular 1中的组件(为了新路由器的目的)是注册为[name]Controller
的控制器和从component/[name]/[name].html
获取的模板。这已经过时了。
新API
本讨论包含最新信息,解释如何获得最新的Angular 1新路由器版本。
配置中使用的组件映射到使用组件名称注册的指令。请参阅此示例。
angular.module('app.home', [])
.directive('home', function() {
return {
template: 'Hello {{ home.text }}',
controller: function HomeController() {
this.text = 'World';
},
controllerAs: 'home'
}
});
Angular 1.5提供了一种用于注册组件的新语法,请参阅此处。我用过这个语法:
angular.module('app.home', [])
.component('home', {
restrict: "EA",
template: 'Hello {{ home.text }}',
controller: function HomeController() {
this.text = 'World';
}
// to configure a child route
//,$routeConfig: [
// { aux: "/son", component: "son", as: "Left" },
// { aux: "/daughter", component: "daughter", as: "Left" }]
});
尽管目前它还很新,但您也可以将根组件与新的角度路由器一起使用。此组件可以将其他组件作为子组件。
我以Pete Bacon Darwin为例,推出了一个版本。https://github.com/petebacondarwin/ng1-component-router-demo
注意,在他的版本中,主组件在运行块中传递了$router.config,并用3个点标识子组件。
.run(function($router) {
$router.config([
{ path: '/...', name: 'App', component: 'app', useAsDefault: true }
]);
我使用angular 1.5.0来跟随他的github。我在播放一些候选版本时遇到了问题。