Angular 1.5和新的组件路由器



我使用的是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。我在播放一些候选版本时遇到了问题。

相关内容

  • 没有找到相关文章

最新更新