Jekyll2022-02-19T21:54:26+00:00https://ui-router.github.io/feed.xmlUI-RouterState based routing for single-page web applications{"name"=>nil, "avatar"=>"clear.gif", "bio"=>nil, "location"=>nil, "email"=>nil, "uri"=>nil, "bitbucket"=>nil, "codepen"=>nil, "dribbble"=>nil, "flickr"=>nil, "facebook"=>nil, "foursquare"=>nil, "github"=>nil, "google_plus"=>nil, "keybase"=>nil, "instagram"=>nil, "lastfm"=>nil, "linkedin"=>nil, "pinterest"=>nil, "soundcloud"=>nil, "stackoverflow"=>nil, "steam"=>nil, "tumblr"=>nil, "twitter"=>nil, "vine"=>nil, "weibo"=>nil, "xing"=>nil, "youtube"=>nil}New Guides Transitions Views Lazyload2017-09-03T00:00:00+00:002017-09-03T00:00:00+00:00https://ui-router.github.io/blog/new-guides-transitions-views-lazyload<p>In case you missed it, four new UI-Router guides have been published this summer.</p>
<h3 id="views"><a href="/guides/views">Views</a></h3>
<p>This guide provides information about how UI-Router handles views, including:</p>
<ul>
<li>Views (for a state)</li>
<li>UI-Views (viewports)</li>
<li>Nested views</li>
<li>Multiple named views</li>
<li>View targeting</li>
</ul>
<h3 id="transitions"><a href="/guides/transitions">Transitions</a></h3>
<p>This guide describes how UI-Router transitions between application states.
It explains concepts such as:</p>
<ul>
<li>What a Transition is</li>
<li>Transition lifecycle events</li>
<li>To and from states</li>
<li>Entered and exited states</li>
<li>Nested states</li>
<li>Atomic transition behavior</li>
</ul>
<h3 id="transition-hooks"><a href="/guides/transitionhooks">Transition Hooks</a></h3>
<p>Transition Hooks are a very powerful feature allowing you to hook into transition lifecycle events:
This guide explains how to:</p>
<ul>
<li>Perform asynchronous actions during a transition</li>
<li>Redirect or abort transitions</li>
<li>Choose which transitions to hook into</li>
</ul>
<h3 id="lazy-loading"><a href="/guides/lazyloading">Lazy Loading</a></h3>
<p>Lazy loading allows an application to be split into smaller chunks.
This can drastically reduce the initial bundle size, allowing apps to load and bootstrap much faster.
This guide explains:</p>
<ul>
<li>General purpose lazy loading capability of UI-Router</li>
<li>Module lazy loading</li>
<li>Future States</li>
<li>Framework specific approaches</li>
</ul>{"name"=>nil, "avatar"=>"clear.gif", "bio"=>nil, "location"=>nil, "email"=>nil, "uri"=>nil, "bitbucket"=>nil, "codepen"=>nil, "dribbble"=>nil, "flickr"=>nil, "facebook"=>nil, "foursquare"=>nil, "github"=>nil, "google_plus"=>nil, "keybase"=>nil, "instagram"=>nil, "lastfm"=>nil, "linkedin"=>nil, "pinterest"=>nil, "soundcloud"=>nil, "stackoverflow"=>nil, "steam"=>nil, "tumblr"=>nil, "twitter"=>nil, "vine"=>nil, "weibo"=>nil, "xing"=>nil, "youtube"=>nil}New UI-Router Guides publishedUirouter For Angularjs Umd Bundles2017-05-29T00:00:00+00:002017-05-29T00:00:00+00:00https://ui-router.github.io/blog/uirouter-for-angularjs-umd-bundles<p>This post describes how UMD bundles have changed with UI-Router 1.0 for AngularJS.</p>
<h3 id="ui-router-core">UI-Router Core</h3>
<p>The <code class="language-plaintext highlighter-rouge">angular-ui-router</code> has been the defacto standard for routing in AngularJS.
However, over the years UI-Router has undergone some significant transformations.</p>
<p>The core of the library has been refactored into its <a href="https://github.com/ui-router/core">own library, <code class="language-plaintext highlighter-rouge">@uirouter/core</code></a>.
This core library has been used to create new routers for
<a href="https://github.com/ui-router/react">React</a>,
<a href="https://github.com/ui-router/angular">It’s Just Angular (2.x+)</a>,
<a href="https://github.com/ergo/polymer-ui-router">Polymer</a>, and even
<a href="https://github.com/bobmanary/ui-router-marionette">Backbone/Marionette</a>.</p>
<h3 id="plugins-and-umd-bundles">Plugins and UMD bundles</h3>
<p>Previously, UI-Router was a single bundle: <code class="language-plaintext highlighter-rouge">angular-ui-router.js</code>.</p>
<p>During the UI-Router for AngularJS 1.0 release, we split the code into two bundles:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">ui-router-core.js</code>: the core of UI-Router (State machine, etc)</li>
<li><code class="language-plaintext highlighter-rouge">ui-router-angularjs.js</code>: the AngularJS bits (<code class="language-plaintext highlighter-rouge">$location</code>, <code class="language-plaintext highlighter-rouge">ui-sref</code> directives, etc)</li>
</ul>
<p><em>Users who formerly included only <code class="language-plaintext highlighter-rouge">angular-ui-router.js</code> should now include both bundles.</em></p>
<p>This change was necessary to properly support dependencies to <code class="language-plaintext highlighter-rouge">@uirouter/core</code>.
This enables (for example) router plugins which work with the framework-agnostic <code class="language-plaintext highlighter-rouge">ui-router-core.js</code>.</p>
<p class="notice--info">Note: we also <a href="/blog/uirouter-scoped-packages/">renamed our NPM packages to scoped package names</a>.</p>
<h3 id="migration">Migration</h3>
<p>If you <em>formerly</em> used <code class="language-plaintext highlighter-rouge">angular-ui-router.js</code>, e.g.:
<code class="language-plaintext highlighter-rouge">js
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
</code>js</p>
<p>Instead, <em>use both new bundles from the scoped packages</em>.
Include <code class="language-plaintext highlighter-rouge">ui-router-core</code> before including <code class="language-plaintext highlighter-rouge">ui-router-angularjs</code>:
<code class="language-plaintext highlighter-rouge">js
<script src="node_modules/@uirouter/core/_bundles/ui-router-core.js"></script>
<script src="node_modules/@uirouter/angularjs/release/ui-router-angularjs.js"></script>
</code>js</p>
<p class="notice--info">Ensure the version of <code class="language-plaintext highlighter-rouge">@uirouter/core</code> matches <a href="https://unpkg.com/@uirouter/angularjs/package.json">the dependency</a> in <code class="language-plaintext highlighter-rouge">@uirouter/angularjs</code>.</p>
<h3 id="backward-compatible-mono-bundle">Backward compatible mono-bundle</h3>
<p>For backwards compatibility, we will continue to publish a monolithic bundle as <a href="https://unpkg.com/@uirouter/angularjs/release/"><code class="language-plaintext highlighter-rouge">angular-ui-router.js</code></a>.
This bundle includes <em>both the core and angularjs code</em>.
Existing users who rely on the <code class="language-plaintext highlighter-rouge">angular-ui-router.js</code> bundle <em>do not have to change anything</em>.
However, this bundle is not compatible with UI-Router plugins which depend on <code class="language-plaintext highlighter-rouge">@uirouter/core</code>.</p>
<h3 id="webpack-users">Webpack users</h3>
<p>Users of webpack (or any bundlers which use node module resolution) should not need to make any changes due to these bundle changes.
Simply <code class="language-plaintext highlighter-rouge">require</code> or <code class="language-plaintext highlighter-rouge">import</code> from the <a href="/blog/uirouter-scoped-packages/">scoped package</a> <code class="language-plaintext highlighter-rouge">@uirouter/angularjs</code> instead of from <code class="language-plaintext highlighter-rouge">angular-ui-router</code>.</p>{"name"=>nil, "avatar"=>"clear.gif", "bio"=>nil, "location"=>nil, "email"=>nil, "uri"=>nil, "bitbucket"=>nil, "codepen"=>nil, "dribbble"=>nil, "flickr"=>nil, "facebook"=>nil, "foursquare"=>nil, "github"=>nil, "google_plus"=>nil, "keybase"=>nil, "instagram"=>nil, "lastfm"=>nil, "linkedin"=>nil, "pinterest"=>nil, "soundcloud"=>nil, "stackoverflow"=>nil, "steam"=>nil, "tumblr"=>nil, "twitter"=>nil, "vine"=>nil, "weibo"=>nil, "xing"=>nil, "youtube"=>nil}UMD Bundles and UI-Router 1.0 for AngularJSUirouter Scoped Packages2017-04-22T00:00:00+00:002017-04-22T00:00:00+00:00https://ui-router.github.io/blog/uirouter-scoped-packages<h3 id="scoped-npm-packages">Scoped NPM packages</h3>
<p>In March of 2017, NPM started <a href="https://twitter.com/rockbot/status/844679739956592641">offering free orgs</a> (Thanks, <a href="https://twitter.com/npm_support">npm loves you</a>, we love you too!)</p>
<p>We’re taking advantage of the free org feature to publish <a href="https://docs.npmjs.com/misc/scope">scoped packages</a>.
We <a href="https://www.npmjs.com/org/uirouter/">created the <code class="language-plaintext highlighter-rouge">@uirouter</code> org</a> and are in the process of moving all our published packages to scoped pakages.</p>
<h3 id="how-to-use-scoped-packages">How to use scoped packages</h3>
<p>In your package.json, simply replace the old npm package with the scoped <code class="language-plaintext highlighter-rouge">@uirouter</code> package.
For example, if you currently depend on <code class="language-plaintext highlighter-rouge">angular-ui-router</code> and <code class="language-plaintext highlighter-rouge">ui-router-visualizer</code>:</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="dl">"</span><span class="s2">dependencies</span><span class="dl">"</span><span class="p">:</span> <span class="p">{</span>
<span class="dl">"</span><span class="s2">angular-ui-router</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">latest</span><span class="dl">"</span><span class="p">,</span>
<span class="dl">"</span><span class="s2">ui-router-visualizer</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">latest</span><span class="dl">"</span><span class="p">,</span>
<span class="p">}</span>
</code></pre></div></div>
<p>replace the package name with the scoped <code class="language-plaintext highlighter-rouge">@uirouter</code> package:</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="dl">"</span><span class="s2">dependencies</span><span class="dl">"</span><span class="p">:</span> <span class="p">{</span>
<span class="dl">"</span><span class="s2">@uirouter/angularjs</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">latest</span><span class="dl">"</span><span class="p">,</span>
<span class="dl">"</span><span class="s2">@uirouter/visualizer</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">latest</span><span class="dl">"</span><span class="p">,</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="old-and-new-scoped-package-names">Old and new (scoped) package names</h3>
<p>This table shows the previous npm package names, and the new scoped package names</p>
<table>
<thead>
<tr>
<th>Package</th>
<th>Old package</th>
<th>Scoped package</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://github.com/angular-ui/ui-router/">UI-Router for AngularJS (1.x)</a></td>
<td><code class="language-plaintext highlighter-rouge">angular-ui-router</code></td>
<td><code class="language-plaintext highlighter-rouge">@uirouter/angularjs</code></td>
</tr>
<tr>
<td><a href="https://github.com/ui-router/angular">UI-Router for Angular (2.x and higher)</a></td>
<td><code class="language-plaintext highlighter-rouge">ui-router-ng2</code></td>
<td><code class="language-plaintext highlighter-rouge">@uirouter/angular</code></td>
</tr>
<tr>
<td><a href="https://github.com/ui-router/react">UI-Router for React</a></td>
<td><code class="language-plaintext highlighter-rouge">ui-router-react</code></td>
<td><code class="language-plaintext highlighter-rouge">@uirouter/react</code></td>
</tr>
<tr>
<td><a href="https://github.com/ui-router/visualizer">UI-Router Visualizer</a></td>
<td><code class="language-plaintext highlighter-rouge">ui-router-visualizer</code></td>
<td><code class="language-plaintext highlighter-rouge">@uirouter/visualizer</code></td>
</tr>
<tr>
<td><a href="https://github.com/ui-router/core">UI-Router Core</a></td>
<td><code class="language-plaintext highlighter-rouge">ui-router-core</code></td>
<td><code class="language-plaintext highlighter-rouge">@uirouter/core</code></td>
</tr>
<tr>
<td><a href="https://github.com/ui-router/rx">UI-Router Reactive Extensions</a></td>
<td><code class="language-plaintext highlighter-rouge">ui-router-rx</code></td>
<td><code class="language-plaintext highlighter-rouge">@uirouter/rx</code></td>
</tr>
<tr>
<td><a href="https://github.com/ui-router/ng1-to-ng2">UI-Router ng1-to-ng2 (hybrid support)</a></td>
<td><code class="language-plaintext highlighter-rouge">ui-router-ng1-to-ng2</code></td>
<td><code class="language-plaintext highlighter-rouge">@uirouter/angular-hybrid</code></td>
</tr>
<tr>
<td><a href="https://github.com/ui-router/sticky-states">Sticky States plugin</a></td>
<td><code class="language-plaintext highlighter-rouge">ui-router-sticky-states</code></td>
<td><code class="language-plaintext highlighter-rouge">@uirouter/sticky-states</code></td>
</tr>
</tbody>
</table>{"name"=>nil, "avatar"=>"clear.gif", "bio"=>nil, "location"=>nil, "email"=>nil, "uri"=>nil, "bitbucket"=>nil, "codepen"=>nil, "dribbble"=>nil, "flickr"=>nil, "facebook"=>nil, "foursquare"=>nil, "github"=>nil, "google_plus"=>nil, "keybase"=>nil, "instagram"=>nil, "lastfm"=>nil, "linkedin"=>nil, "pinterest"=>nil, "soundcloud"=>nil, "stackoverflow"=>nil, "steam"=>nil, "tumblr"=>nil, "twitter"=>nil, "vine"=>nil, "weibo"=>nil, "xing"=>nil, "youtube"=>nil}Scoped NPM packagesUi Router Ng2 1.0.0 Beta.42017-01-22T00:00:00+00:002017-01-22T00:00:00+00:00https://ui-router.github.io/blog/ui-router-ng2-1.0.0-beta.4<aside class="sidebar__right">
<nav class="toc ">
<header><h4 class="nav__title"><i class="fa fa-columns"></i> ui-router-ng2 1.0.0-beta.4</h4></header>
<ul class="toc__menu" id="markdown-toc">
<li><a href="#changes-in-100-beta4" id="markdown-toc-changes-in-100-beta4">Changes in 1.0.0-beta.4</a> <ul>
<li><a href="#repository-split" id="markdown-toc-repository-split">Repository split</a></li>
</ul>
</li>
<li><a href="#angular-cli" id="markdown-toc-angular-cli">Angular CLI</a> <ul>
<li><a href="#add-npm-dependency-to-ui-router" id="markdown-toc-add-npm-dependency-to-ui-router">Add npm dependency to ui-router</a></li>
<li><a href="#add-uirouter-to-the-root-module" id="markdown-toc-add-uirouter-to-the-root-module">Add UIRouter to the root module</a></li>
<li><a href="#generate-a-child-ngmodule" id="markdown-toc-generate-a-child-ngmodule">Generate a child <code class="language-plaintext highlighter-rouge">NgModule</code></a></li>
<li><a href="#create-a-top-level-state-as-a-future-state" id="markdown-toc-create-a-top-level-state-as-a-future-state">Create a top-level state as a Future State</a></li>
<li><a href="#create-the-final-state-in-the-child-ngmodule" id="markdown-toc-create-the-final-state-in-the-child-ngmodule">Create the final state in the child <code class="language-plaintext highlighter-rouge">NgModule</code></a></li>
<li><a href="#serve-the-app" id="markdown-toc-serve-the-app">Serve the app</a></li>
</ul>
</li>
<li><a href="#problemsfeedback" id="markdown-toc-problemsfeedback">Problems/Feedback?</a></li>
</ul>
</nav>
</aside>
<p>Today’s <code class="language-plaintext highlighter-rouge">1.0.0-beta.4</code> release of <code class="language-plaintext highlighter-rouge">ui-router-ng2</code> brings support for Ahead of Time compilation (AoT),
support for <a href="https://www.npmjs.com/package/@ngtools/webpack">@ngtools/webpack</a> lazy loading,
and much better integration with the <a href="https://github.com/angular/angular-cli">Angular CLI</a>.</p>
<p>This release includes more breaking changes than usual.
We are making an effort to call out more breaking changes that could potentially
break end user applications, even if the prior behavior was unspecified.</p>
<h2 id="changes-in-100-beta4">Changes in 1.0.0-beta.4</h2>
<p>The 1.0.0-beta.4 is a major update, which includes many bug fixes and lots of new features.</p>
<p>Please see the <a href="https://github.com/ui-router/ng2/releases/tag/1.0.0-beta.4">release notes</a>
for detailed information, including the <strong>BREAKING CHANGES</strong>.</p>
<h3 id="repository-split">Repository split</h3>
<p>During the 1.0 alpha phase, we made the UI-Router core agnostic to AngularJS.
This enabled us to continue development of
<a href="https://github.com/angular-ui/ui-router/"><code class="language-plaintext highlighter-rouge">angular-ui-router</code></a>
while creating
<a href="https://ui-router.github.io/ng2/"><code class="language-plaintext highlighter-rouge">ui-router-ng2</code></a>
and
<a href="https://ui-router.github.io/react/"><code class="language-plaintext highlighter-rouge">ui-router-react</code></a>.
The <code class="language-plaintext highlighter-rouge">ui-router-ng2</code> code augments the
<a href="https://github.com/ui-router/core"><code class="language-plaintext highlighter-rouge">ui-router-core</code></a>
code adding Angular (2+) specific features and concepts, as well as integrating with the Angular lifecycle and DI system.</p>
<p>During the betas, both <code class="language-plaintext highlighter-rouge">ui-router-ng2</code> and the <code class="language-plaintext highlighter-rouge">angular-ui-router</code> for ng1 were built from the same repository.
This seemed like a good idea at the time because it allowed PRs to a monolithic repository.
However, over time it became apparent that hosting both codebases together was not sustainable.
So, we split the repositories into:</p>
<ul>
<li>http://github.com/ui-router/ng2: <code class="language-plaintext highlighter-rouge">ui-router-ng2</code>: UI-Router for Angular (2.0 and above)</li>
<li>http://github.com/ui-router/core: <code class="language-plaintext highlighter-rouge">ui-router-core</code>: UI-Router core</li>
<li>http://github.com/angular-ui/ui-router: <code class="language-plaintext highlighter-rouge">angular-ui-router</code>: UI-Router for AngularJS 1</li>
</ul>
<p>This release of <code class="language-plaintext highlighter-rouge">ui-router-ng2</code> is the first one built from the modular UI-Router repositories.
Going forward, the release schedules for AngularJS and Angular (2+) will no longer coincide.</p>
<p>For those of you using the <a href="https://github.com/ui-router/ng1-to-ng2">ng1-to-ng2 hybrid adapter</a>, stay tuned.
We will be changing the approach of the hybrid adapter to accomodate the different release cycles
of the AngularJS and 2+ codebases.</p>
<h2 id="angular-cli">Angular CLI</h2>
<p>Many users have been asking when we would support the Angular CLI and support Ahead of Time compilation.
Finally, ui-router-ng2 has full AoT support, and integrates nicely with the Angular CLI including AoT and Lazy Loading.</p>
<p>To use the Angular CLI and lazy loading, follow this pattern:</p>
<h3 id="add-npm-dependency-to-ui-router">Add npm dependency to ui-router</h3>
<p>Add <code class="language-plaintext highlighter-rouge">ui-router-ng2</code> (and temporarily also add <code class="language-plaintext highlighter-rouge">@angular/router</code>):</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm install --save ui-router-ng2@1.0.0-beta.4 @angular/router
</code></pre></div></div>
<h3 id="add-uirouter-to-the-root-module">Add UIRouter to the root module</h3>
<p>Add <code class="language-plaintext highlighter-rouge">UIRouterModule.forRoot</code> to the root NgModule’s <code class="language-plaintext highlighter-rouge">imports</code> in <code class="language-plaintext highlighter-rouge">app.module.ts</code></p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">export</span> <span class="kd">let</span> <span class="nx">ROOT_STATES</span> <span class="o">=</span> <span class="p">[];</span>
<span class="k">export</span> <span class="kd">function</span> <span class="nx">routerConfigFn</span><span class="p">(</span><span class="nx">router</span><span class="p">:</span> <span class="nx">UIRouter</span><span class="p">,</span> <span class="nx">injector</span><span class="p">:</span> <span class="nx">Injector</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// ... do router config</span>
<span class="p">}</span>
</code></pre></div></div>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">imports</span><span class="p">:</span> <span class="p">[</span>
<span class="nx">UIRouterModule</span><span class="p">.</span><span class="nx">forRoot</span><span class="p">({</span>
<span class="na">states</span><span class="p">:</span> <span class="nx">ROOT_STATES</span><span class="p">,</span>
<span class="na">useHash</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
<span class="na">otherwise</span><span class="p">:</span> <span class="dl">"</span><span class="s2">/home</span><span class="dl">"</span><span class="p">,</span>
<span class="na">config</span><span class="p">:</span> <span class="nx">routerConfigFn</span>
<span class="p">})</span>
<span class="p">...</span>
</code></pre></div></div>
<h3 id="generate-a-child-ngmodule">Generate a child <code class="language-plaintext highlighter-rouge">NgModule</code></h3>
<p>Use the CLI to generate a child module.
This is a nested <code class="language-plaintext highlighter-rouge">NgModule</code> which will be lazy loaded.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>ng generate module admin
</code></pre></div></div>
<h3 id="create-a-top-level-state-as-a-future-state">Create a top-level state as a Future State</h3>
<p>A future state is a placeholder for a state that will be defined by a lazy loaded <code class="language-plaintext highlighter-rouge">NgModule</code>.
Define the future state in the parent module.
Append <code class="language-plaintext highlighter-rouge">.**</code> to the future state’s name, and supply a <code class="language-plaintext highlighter-rouge">loadChildren</code> string which points to the lazy <code class="language-plaintext highlighter-rouge">NgModule</code>.</p>
<p>In <code class="language-plaintext highlighter-rouge">app.module.ts</code>:</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">export</span> <span class="kd">let</span> <span class="nx">ROOT_STATES</span> <span class="o">=</span> <span class="p">[</span>
<span class="p">{</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">admin.**</span><span class="dl">'</span><span class="p">,</span>
<span class="na">url</span><span class="p">:</span> <span class="dl">'</span><span class="s1">/admin</span><span class="dl">'</span><span class="p">,</span>
<span class="na">loadChildren</span><span class="p">:</span> <span class="dl">'</span><span class="s1">./admin/admin.module#AdminModule</span><span class="dl">'</span>
<span class="p">}</span>
<span class="p">]</span>
</code></pre></div></div>
<h3 id="create-the-final-state-in-the-child-ngmodule">Create the final state in the child <code class="language-plaintext highlighter-rouge">NgModule</code></h3>
<p>When the child module is lazy loaded, it should fully define the state to replace the Future State placeholder.</p>
<p>In <code class="language-plaintext highlighter-rouge">/admin/admin.module.ts</code>:</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">export</span> <span class="kd">const</span> <span class="nx">ADMIN_STATES</span> <span class="o">=</span> <span class="p">[</span>
<span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">admin</span><span class="dl">'</span><span class="p">,</span> <span class="na">url</span><span class="p">:</span> <span class="dl">'</span><span class="s1">/admin</span><span class="dl">'</span><span class="p">,</span> <span class="na">component</span><span class="p">:</span> <span class="nx">AdminComponent</span> <span class="p">}</span>
<span class="p">]</span>
<span class="p">@</span><span class="nd">NgModule</span><span class="p">({</span>
<span class="na">imports</span><span class="p">:</span> <span class="p">[</span>
<span class="nx">UIRouterModule</span><span class="p">.</span><span class="nx">forChild</span><span class="p">({</span> <span class="na">states</span><span class="p">:</span> <span class="nx">ADMIN_STATES</span> <span class="p">});</span>
<span class="p">],</span>
<span class="na">declarations</span><span class="p">:</span> <span class="p">[</span> <span class="nx">AdminComponent</span> <span class="p">],</span>
<span class="p">})</span>
<span class="k">export</span> <span class="kd">class</span> <span class="nx">AdminModule</span> <span class="p">{}</span>
</code></pre></div></div>
<h3 id="serve-the-app">Serve the app</h3>
<p>You can now serve or build the app using angular-cli in either AoT mode or JIT mode.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>ng serve -aot
</code></pre></div></div>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>ng build -aot --prod --sourcemap
</code></pre></div></div>
<h2 id="problemsfeedback">Problems/Feedback?</h2>
<p>If you have feedback or problems integrating ui-router-ng2 with angular-cli, please <a href="https://github.com/ui-router/ng2/issues">create an issue</a>
in the <code class="language-plaintext highlighter-rouge">ui-router-ng2</code> repo.</p>{"name"=>nil, "avatar"=>"clear.gif", "bio"=>nil, "location"=>nil, "email"=>nil, "uri"=>nil, "bitbucket"=>nil, "codepen"=>nil, "dribbble"=>nil, "flickr"=>nil, "facebook"=>nil, "foursquare"=>nil, "github"=>nil, "google_plus"=>nil, "keybase"=>nil, "instagram"=>nil, "lastfm"=>nil, "linkedin"=>nil, "pinterest"=>nil, "soundcloud"=>nil, "stackoverflow"=>nil, "steam"=>nil, "tumblr"=>nil, "twitter"=>nil, "vine"=>nil, "weibo"=>nil, "xing"=>nil, "youtube"=>nil}ui-router-ng2 1.0.0-beta.4 is releasedAngular Ui Router 1.0.0 Rc.12017-01-09T00:00:00+00:002017-01-09T00:00:00+00:00https://ui-router.github.io/blog/angular-ui-router-1.0.0-rc.1<aside class="sidebar__right">
<nav class="toc ">
<header><h4 class="nav__title"><i class="fa fa-columns"></i> UI-Router 1.0.0-rc.1</h4></header>
<ul class="toc__menu" id="markdown-toc">
<li><a href="#changes-in-rc1" id="markdown-toc-changes-in-rc1">Changes in RC.1</a></li>
<li><a href="#repository-split" id="markdown-toc-repository-split">Repository split</a> <ul>
<li><a href="#upgrading" id="markdown-toc-upgrading">Upgrading</a></li>
</ul>
</li>
</ul>
</nav>
</aside>
<p>We released Angular UI-Router 1.0.0-rc.1 today.
This release indicates that the APIs are not expected to change before the final release of ui-router 1.0.</p>
<p>This release includes more breaking changes than usual.
We are making an effort to call out more breaking changes that could potentially break end user applications, even if the prior behavior was unspecified.</p>
<h2 id="changes-in-rc1">Changes in RC.1</h2>
<p>RC.1 is a major update, which includes many bug fixes and lots of new features.</p>
<p>Please see the <a href="https://github.com/angular-ui/ui-router/releases/tag/1.0.0-rc.1">release notes</a> for detailed information, including the breaking changes.</p>
<h2 id="repository-split">Repository split</h2>
<p>During the 1.0 alpha phase, we made the UI-Router core agnostic to AngularJS.
This enabled us to create
<a href="https://ui-router.github.io/ng2/"><code class="language-plaintext highlighter-rouge">ui-router-ng2</code></a> and
<a href="https://ui-router.github.io/react/"><code class="language-plaintext highlighter-rouge">ui-router-react</code></a>
by augmenting the
<a href="https://github.com/ui-router/core"><code class="language-plaintext highlighter-rouge">ui-router-core</code></a>
code.</p>
<p>During the betas, both <code class="language-plaintext highlighter-rouge">ui-router-ng2</code> and the <code class="language-plaintext highlighter-rouge">angular-ui-router</code> for ng1 code were built from the same repository.
This seemed like a good idea at the time because it allowed PRs to a monolithic repository.
However, over time it became apparent that hosting both codebases together was not sustainable.
So, we split the repositories into:</p>
<ul>
<li>http://github.com/angular-ui/ui-router: <code class="language-plaintext highlighter-rouge">angular-ui-router</code>: UI-Router for AngularJS 1</li>
<li>http://github.com/ui-router/ng2: <code class="language-plaintext highlighter-rouge">ui-router-ng2</code>: UI-Router for Angular (2.0 and above)</li>
<li>http://github.com/ui-router/core: <code class="language-plaintext highlighter-rouge">ui-router-core</code>: UI-Router core</li>
</ul>
<p>This release is the first one built from the modular UI-Router repositories.</p>
<p>This release (1.0.0-rc.1) of Angular UI-Router is <em>not accompanied by a release of UI-Router for Angular (2+)+</em>.
Going forward, the release schedules for AngularJS and Angular (2+) will no longer coincide.</p>
<h4 id="upgrading">Upgrading</h4>
<p>If you haven’t considered upgrading to UI-Router 1.0, now is the time to start planning.
There are some breaking changes listed, but the should be fairly minimal for the typical UI-Router application.
Please follow the <a href="https://ui-router.github.io/guide/ng1/migrate-to-1_0">migration guide</a> when upgrading.</p>{"name"=>nil, "avatar"=>"clear.gif", "bio"=>nil, "location"=>nil, "email"=>nil, "uri"=>nil, "bitbucket"=>nil, "codepen"=>nil, "dribbble"=>nil, "flickr"=>nil, "facebook"=>nil, "foursquare"=>nil, "github"=>nil, "google_plus"=>nil, "keybase"=>nil, "instagram"=>nil, "lastfm"=>nil, "linkedin"=>nil, "pinterest"=>nil, "soundcloud"=>nil, "stackoverflow"=>nil, "steam"=>nil, "tumblr"=>nil, "twitter"=>nil, "vine"=>nil, "weibo"=>nil, "xing"=>nil, "youtube"=>nil}UI-Router 1.0.0-rc.1 is releasedUirouter 1.0.0 Beta.32016-09-23T00:00:00+00:002016-09-23T00:00:00+00:00https://ui-router.github.io/blog/uirouter-1.0.0-beta.3<aside class="sidebar__right">
<nav class="toc ">
<header><h4 class="nav__title"><i class="fa fa-columns"></i> UI-Router 1.0.0-beta.3</h4></header>
<ul class="toc__menu" id="markdown-toc">
<li><a href="#bug-fixes-in-core" id="markdown-toc-bug-fixes-in-core">Bug fixes in core</a></li>
<li><a href="#roadmap" id="markdown-toc-roadmap">RoadMap</a> <ul>
<li><a href="#angularjs" id="markdown-toc-angularjs">AngularJS</a></li>
<li><a href="#angular-2" id="markdown-toc-angular-2">Angular (2+)</a></li>
<li><a href="#codebases" id="markdown-toc-codebases">Codebases</a></li>
</ul>
</li>
<li><a href="#angular-2-bootstrapping-breaking-change" id="markdown-toc-angular-2-bootstrapping-breaking-change">Angular (2+) Bootstrapping (Breaking Change)</a></li>
</ul>
</nav>
</aside>
<p>This beta.3 release primarily adds support for Angular (2+).0.0 final.</p>
<p><a href="https://ui-router.github.io/ng1/tutorial/helloworld">AngularJS Tutorials</a></p>
<p><a href="https://ui-router.github.io/ng2/tutorial/helloworld">Angular (2+) Tutorials</a></p>
<h2 id="bug-fixes-in-core">Bug fixes in core</h2>
<p>We fixed some issues in ui-router-core related to resolves and to activating/deactivating views.
Thanks to those who have been reporting issues against the 1.0 code!</p>
<p>See the <a href="https://github.com/angular-ui/ui-router/releases/tag/1.0.0-beta.3">Full changelog</a> for details.</p>
<h2 id="roadmap">RoadMap</h2>
<p>1.0.0-beta.3 is the last scheduled stop before UI-Router 1.0 final!</p>
<h4 id="angularjs">AngularJS</h4>
<p>UI-Router 1.0 for AngularJS is looking pretty solid.
We recommend users upgrade to beta.3 immediately.</p>
<h4 id="angular-2">Angular (2+)</h4>
<p>We have one major item left on the Angular (2+) todo list: Ahead of time compile support.
We expect to support AoT in the near future (weeks to months).</p>
<h4 id="codebases">Codebases</h4>
<p>We’ll be moving the ui-router-core codebase out from <code class="language-plaintext highlighter-rouge">angular-ui/ui-router</code> to <code class="language-plaintext highlighter-rouge">ui-router/core</code>.</p>
<p>We’ll also be moving the ng2 code to its own repository.</p>
<h2 id="angular-2-bootstrapping-breaking-change">Angular (2+) Bootstrapping (Breaking Change)</h2>
<p>We added support for <code class="language-plaintext highlighter-rouge">NgModule</code> in beta.2.
However, we received feedback that the custom <code class="language-plaintext highlighter-rouge">@UIRouterModule</code> decorator in beta.2 wouldn’t be sufficient.
In beta.3, we’ve switched to an approach that closesly resembles the Angular (2+) component router.</p>
<p>In your app’s bootstrap, import a <code class="language-plaintext highlighter-rouge">UIRouterModule.forRoot()</code>.
In feature modules and lazy loaded feature modules, use <code class="language-plaintext highlighter-rouge">UIRouterModule.forChild()</code>.</p>
<p class="notice--info">Unlike the beta.2 decorator, all components (even routed components) must be listed in <code class="language-plaintext highlighter-rouge">declarations:</code>.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>@NgModule({
imports: [
UIRouterModule.forRoot({
states: INITIAL_STATES,
useHash: true,
configClass: MyUIRouterConfig
}),
BrowserModule,
FeatureModule,
],
declarations: INITIAL_COMPONENTS
})
class RootAppModule {}
@NgModule({
imports: [
UIRouterModule.forChild({
states: FEATURE_STATES,
configClass: FeatureConfig
}),
CommonModule,
],
declarations: FEATURE_COMPONENTS
})
</code></pre></div></div>
<p>You can provide the <code class="language-plaintext highlighter-rouge">forRoot()</code> factory method an object with some declarative UI-Router configuration.</p>
<p>Both the <code class="language-plaintext highlighter-rouge">forRoot()</code> and <code class="language-plaintext highlighter-rouge">forChild()</code> factories can be provided a Service Class.
The class will be instantiated by the dependency injector.
You can inject dependencies and perform any imperative feature module configuration (much like beta.2’s UIRouterConfig).</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">@</span><span class="nd">Injectable</span><span class="p">()</span>
<span class="kd">class</span> <span class="nx">FeatureConfig</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">router</span><span class="p">:</span> <span class="nx">UIRouter</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">router</span><span class="p">.</span><span class="nx">urlMatcherFactory</span><span class="p">.</span><span class="nx">type</span><span class="p">(</span><span class="dl">'</span><span class="s1">datetime</span><span class="dl">'</span><span class="p">,</span> <span class="nx">DateTimeParamType</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<p>For a more detailed example of how to bootstrap your application, please see the
<a href="https://github.com/ui-router/quickstart-ng2">quickstart-ng2 repository</a></p>{"name"=>nil, "avatar"=>"clear.gif", "bio"=>nil, "location"=>nil, "email"=>nil, "uri"=>nil, "bitbucket"=>nil, "codepen"=>nil, "dribbble"=>nil, "flickr"=>nil, "facebook"=>nil, "foursquare"=>nil, "github"=>nil, "google_plus"=>nil, "keybase"=>nil, "instagram"=>nil, "lastfm"=>nil, "linkedin"=>nil, "pinterest"=>nil, "soundcloud"=>nil, "stackoverflow"=>nil, "steam"=>nil, "tumblr"=>nil, "twitter"=>nil, "vine"=>nil, "weibo"=>nil, "xing"=>nil, "youtube"=>nil}UI-Router 1.0.0-beta.3 is releasedUirouter 1.0.0 Beta.22016-09-09T00:00:00+00:002016-09-09T00:00:00+00:00https://ui-router.github.io/blog/uirouter-1.0.0-beta.2<aside class="sidebar__right">
<nav class="toc ">
<header><h4 class="nav__title"><i class="fa fa-columns"></i> UI-Router 1.0.0-beta.2</h4></header>
<ul class="toc__menu" id="markdown-toc">
<li><a href="#new-features" id="markdown-toc-new-features">New Features</a> <ul>
<li><a href="#lazy-loadingfuture-states" id="markdown-toc-lazy-loadingfuture-states">Lazy Loading/Future States</a></li>
<li><a href="#state-deregistration" id="markdown-toc-state-deregistration">State deregistration</a></li>
</ul>
</li>
<li><a href="#new-angular-2-features" id="markdown-toc-new-angular-2-features">New Angular (2+) Features</a> <ul>
<li><a href="#ngmodule" id="markdown-toc-ngmodule">NgModule</a> <ul>
<li><a href="#uiroutermodule" id="markdown-toc-uiroutermodule">UIRouterModule</a></li>
<li><a href="#bootstrapping" id="markdown-toc-bootstrapping">Bootstrapping</a></li>
<li><a href="#lazy-loading" id="markdown-toc-lazy-loading">Lazy loading</a></li>
</ul>
</li>
<li><a href="#rx--observables" id="markdown-toc-rx--observables">Rx / Observables</a></li>
</ul>
</li>
<li><a href="#angularjs--angular-2-hybrid" id="markdown-toc-angularjs--angular-2-hybrid">AngularJS + Angular (2+) Hybrid</a></li>
</ul>
</nav>
</aside>
<p>UI-Router is rapidly approching approaching a final release of 1.0.0.
This beta.2 release addresses many issues reported against AngularJS.
It adds essential support for the latest version of Angular (2+).</p>
<p><a href="https://github.com/angular-ui/ui-router/releases/tag/1.0.0-beta.2">Full changelog</a></p>
<p><a href="https://ui-router.github.io/ng1/tutorial/helloworld">AngularJS Tutorials</a></p>
<p><a href="https://ui-router.github.io/ng2/tutorial/helloworld">Angular (2+) Tutorials</a></p>
<h2 id="new-features">New Features</h2>
<p>In addition to fixes, beta.2 introduces many exciting features.</p>
<h3 id="lazy-loadingfuture-states">Lazy Loading/Future States</h3>
<p>Lazy loading of states is now officially supported using “Future States”.
Future states are a concept borrowed from <a href="http://christopherthielen.github.io/ui-router-extras/#/future">UI-Router Extras for legacy UI-Router</a></p>
<p>A future state is a temporary placeholder state.
When the full state is finally loaded, the placeholder is replaced with the full state.</p>
<p>Temporary future states only have a <code class="language-plaintext highlighter-rouge">name</code>, a <code class="language-plaintext highlighter-rouge">url</code>, and a <code class="language-plaintext highlighter-rouge">lazyLoad</code> function which promises to lazy load the state.</p>
<p class="notice--info">Note: a future state can be responsible for loading a single full state that will replace the placeholder.
However, a future state can act as a placeholder for an entire tree of states, which are all loaded by the future state’s <code class="language-plaintext highlighter-rouge">lazyLoad</code> function.</p>
<p>When a transition to a future state is initiated, the transition is paused and the <code class="language-plaintext highlighter-rouge">lazyLoad</code> function is invoked.
Once the code has been loaded, the lazy load hook will retry the original transition.</p>
<hr />
<p>If we wanted to lazy load the Contacts feature, we can register a future state:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>let futureContactsState = {
name: 'contacts',
url: '/contacts',
lazyLoad: () => System.import('./contacts.module')
}
</code></pre></div></div>
<p>The <code class="language-plaintext highlighter-rouge">contacts.module.js</code> file (or bundle) and its <code class="language-plaintext highlighter-rouge">require</code>d/<code class="language-plaintext highlighter-rouge">import</code>ed dependencies loads all feature’s code.
This should include states, services, components, etc.</p>
<p>The lazy loading hook is framework agnostic.
For AngularJS, we recommend using <a href="https://oclazyload.readme.io">ocLazyLoad</a>.
Angular (2+) lazy loading occurs via <code class="language-plaintext highlighter-rouge">NgModule</code>.
The details are outlined below.</p>
<p>Look for a <a href="http://127.0.0.1:4000/guide/">full guide</a> on lazy loading in the near future.</p>
<h3 id="state-deregistration">State deregistration</h3>
<p>If you need to remove previously registered states for any reason, you can now deregister them
using `StateRegistry.deregister</p>
<h2 id="new-angular-2-features">New Angular (2+) Features</h2>
<h3 id="ngmodule">NgModule</h3>
<p>In beta.2, we added support for the new <code class="language-plaintext highlighter-rouge">NgModule</code> system in Angular (2+).0.0-rc.5+.</p>
<h4 id="uiroutermodule">UIRouterModule</h4>
<p>We recommend creating modules for each application feature, which often involves a tree of states.
To define a UI-Router Module, use the special <code class="language-plaintext highlighter-rouge">@UIRouterModule</code> decorator (instead of <code class="language-plaintext highlighter-rouge">@NgModule</code>).</p>
<p class="notice--info">A module created with <code class="language-plaintext highlighter-rouge">@UIRouterModule</code> acts just like a module created with <code class="language-plaintext highlighter-rouge">@NgModule</code>, but has some additions.</p>
<ul>
<li>The <code class="language-plaintext highlighter-rouge">@UIRouterModule</code> decorator provides DI tokens for the UI-Router Services (such as <code class="language-plaintext highlighter-rouge">StateService</code> and <code class="language-plaintext highlighter-rouge">TransitionService</code>).</li>
<li>It enables the <a href="https://ui-router.github.io/docs/latest/modules/ng2_directives.html">UI-Router directives</a> for other components in the module.</li>
<li>It allows the module to declare its <a href="https://ui-router.github.io/docs/latest/interfaces/ng2.ng2statedeclaration.html">states</a>.</li>
<li>It enables automatic registration of states at bootstrap and lazy load (no need for <code class="language-plaintext highlighter-rouge">INITIAL_STATES.forEach(state => stateRegistry.register(state))</code>.</li>
<li>It adds any routed components (from the <code class="language-plaintext highlighter-rouge">states</code> array) to the <code class="language-plaintext highlighter-rouge">declarations:</code> and <code class="language-plaintext highlighter-rouge">entryComponents:</code> lists, so they will be compiled and available.</li>
</ul>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>@UIRouterModule({
states: [ contactsState, contactsListState, contactsDetailState ]
})
class MyFeatureModule {}
</code></pre></div></div>
<h4 id="bootstrapping">Bootstrapping</h4>
<p>The root module should provide UIRouter itself using [<code class="language-plaintext highlighter-rouge">provideUIRouter</code>](
The UIRouter Config class may be supplied using the first argument.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>@UIRouterModule({
imports: [BrowserModule],
providers: [
provideUIRouter({ configClass: MyUIRouterConfigClass })
],
states: [homeState]
})
class RootAppModule {}
</code></pre></div></div>
<h4 id="lazy-loading">Lazy loading</h4>
<p>A <code class="language-plaintext highlighter-rouge">UIRouterModule</code> can also be lazy loaded using the new “Future State” feature.
Create a placeholder state with a <code class="language-plaintext highlighter-rouge">lazyLoad</code> property which uses the <code class="language-plaintext highlighter-rouge">loadNgModule</code> lazy load helper.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>let futureContactsState = {
name: 'contacts',
url: '/contacts',
lazyLoad: loadNgModule('./contacts.module')
}
</code></pre></div></div>
<p>Then, define <code class="language-plaintext highlighter-rouge">ContactsModule</code> in <code class="language-plaintext highlighter-rouge">contacts.module.ts</code> and export it as default.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>@UIRouterModule({
states: [ contactsState, contactsListState, contactsDetailState ]
})
export default class ContactsModule {};
</code></pre></div></div>
<p>Provide an implementation of the <a href="https://angular.io/docs/ts/latest/api/core/index/NgModuleFactoryLoader-class.html"><code class="language-plaintext highlighter-rouge">NgModuleFactoryLoader</code></a> which knows how to load the NgModuleFactory.
Angular supplies a factory load for SystemJS: <a href="https://angular.io/docs/ts/latest/api/core/index/SystemJsNgModuleLoader-class.html"><code class="language-plaintext highlighter-rouge">SystemJsNgModuleLoader</code></a></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>@UIRouterModule({
imports: [BrowserModule],
providers: [
provideUIRouter({ configClass: MyUIRouterConfigClass }),
{ provide: NgModuleFactoryLoader, useClass: SystemJsNgModuleLoader }
],
states: [homeState]
})
class RootAppModule {}
</code></pre></div></div>
<p class="notice--info">Although Angular does not provide other <code class="language-plaintext highlighter-rouge">NgModuleFactoryLoader</code>s, they are horribly difficult to create.
Read the <a href="https://github.com/angular/angular/blob/d26a82749473803fbcbd735da46736779367521c/modules/%40angular/core/src/linker/system_js_ng_module_factory_loader.ts#L48-L82">source code for the SystemJSNgModuleLoader</a> to learn how.
I expect other loaders to appear in the wild soon, or additional blessed loaders (i.e., for webpack) from the Angular team.</p>
<hr />
<p>Angular (2+) users should look over:</p>
<ul>
<li>the recent changes to <a href="https://github.com/ui-router/quickstart-ng2/">the angular 2 quickstart</a></li>
<li>The <a href="https://ui-router.github.io/docs/latest/classes/ng2.uirouterconfig.html">UIRouterConfig docs</a></li>
<li>The <a href="https://ui-router.github.io/docs/latest/modules/ng2.html#provideuirouter">provideUIRouter docs</a></li>
<li>The <a href="https://ui-router.github.io/docs/latest/interfaces/state.statedeclaration.html#lazyload">lazyLoad docs</a></li>
</ul>
<h3 id="rx--observables">Rx / Observables</h3>
<p>In beta.2, we also added initial support for a reactive approach to UI-Router apps.
We added four observables to <code class="language-plaintext highlighter-rouge">UIRouterGlobals</code> to monitor the state of the router.</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">states$</code>: An <code class="language-plaintext highlighter-rouge">Observable<StatesChangedEvent></code>. Subscribers are notified of state registration and deregistration.</li>
<li><code class="language-plaintext highlighter-rouge">start$</code>: An <code class="language-plaintext highlighter-rouge">Observable<Transition></code>: Subscribers are notified when a new transition starts.</li>
<li><code class="language-plaintext highlighter-rouge">success$</code>: An <code class="language-plaintext highlighter-rouge">Observable<Transition></code>: Subscribers are notified when a new transition finishes successfully.</li>
<li><code class="language-plaintext highlighter-rouge">params$</code>: An <code class="language-plaintext highlighter-rouge">Observable<{ [paramName: string]: any }></code>: Subscribers are notified of the parameters of the latest successful transition.</li>
</ul>
<p>These observables will be released as a separate project, <a href="https://github.com/ui-router/rx">Reactive Extensions for UI-Router</a>.
The rx extensions are currently a work in progress.
They will be maintained separately and will work with any UI-Router (like AngularJS and React).</p>
<p>UI-Router for Angular (2+) will always have the reactive extensions by default.</p>
<h2 id="angularjs--angular-2-hybrid">AngularJS + Angular (2+) Hybrid</h2>
<p>The <a href="https://github.com/ui-router/ng1-to-ng2/">ng1-to-ng2 hybrid adapter</a> has been updated for Angular (2+) rc.5 and ui-router 1.0.0-beta.2.
AngularJS/Angular (2+) hybrid users should look over the recent changes to https://github.com/ui-router/sample-app-ng1-to-ng2</p>
<p class="notice--info">Note: Due to an <a href="https://github.com/angular/angular/issues/11280">apparent bug in rc.6</a>, ng1-to-ng2 users MUST stick to rc.5 for now.</p>{"name"=>nil, "avatar"=>"clear.gif", "bio"=>nil, "location"=>nil, "email"=>nil, "uri"=>nil, "bitbucket"=>nil, "codepen"=>nil, "dribbble"=>nil, "flickr"=>nil, "facebook"=>nil, "foursquare"=>nil, "github"=>nil, "google_plus"=>nil, "keybase"=>nil, "instagram"=>nil, "lastfm"=>nil, "linkedin"=>nil, "pinterest"=>nil, "soundcloud"=>nil, "stackoverflow"=>nil, "steam"=>nil, "tumblr"=>nil, "twitter"=>nil, "vine"=>nil, "weibo"=>nil, "xing"=>nil, "youtube"=>nil}UI-Router 1.0.0-beta.2 is releasedRoute To Component2016-08-09T00:00:00+00:002016-08-09T00:00:00+00:00https://ui-router.github.io/blog/route-to-component<h3 id="new-guide-route-to-components">New Guide: Route to components</h3>
<p>We have published <a href="/guide/ng1/route-to-component">a new guide</a>
detailing how to route to components using UI-Router 1.0.</p>
<p>The <code class="language-plaintext highlighter-rouge">.component()</code> method in AngularJS 1.5 provides a simple approach to composing user interfaces.
With this model, applications are composed of small, self contained components.</p>
<p>Components explicitly couple markup (DOM) and controller (logic).
They also explicitly define inputs and outputs, making data flow easier to reason about.</p>
<p>UI-Router 1.0 routes directly to AngularJS 1.5 components.
It can even wire up resolve data to component inputs.</p>
<p>Read all about routing to components in the <a href="/guide/ng1/route-to-component">Route to Components guide</a>.</p>{"name"=>nil, "avatar"=>"clear.gif", "bio"=>nil, "location"=>nil, "email"=>nil, "uri"=>nil, "bitbucket"=>nil, "codepen"=>nil, "dribbble"=>nil, "flickr"=>nil, "facebook"=>nil, "foursquare"=>nil, "github"=>nil, "google_plus"=>nil, "keybase"=>nil, "instagram"=>nil, "lastfm"=>nil, "linkedin"=>nil, "pinterest"=>nil, "soundcloud"=>nil, "stackoverflow"=>nil, "steam"=>nil, "tumblr"=>nil, "twitter"=>nil, "vine"=>nil, "weibo"=>nil, "xing"=>nil, "youtube"=>nil}UI-Router 1.0 enables routing to components for AngularJS. Learn how to effectively route to components in AngularJS.Migrate To 1_02016-08-08T00:00:00+00:002016-08-08T00:00:00+00:00https://ui-router.github.io/blog/migrate-to-1_0<h3 id="new-guide-migrate-to-ui-router-10">New Guide: Migrate to UI-Router 1.0</h3>
<p>We have published <a href="/guide/ng1/migrate-to-1_0">a new guide</a> for migrating an
Angular UI-Router application to UI-Router 1.0.</p>
<p>This guide details the new features available in the 1.0 version.
It also lists all known breaking changes when migrating from the legacy (0.2.x, 0.3.x) versions.
Workarounds for most breaking changes are provided.</p>
<hr />
<p>UI-Router 1.0 brings a massive architecture change while retaining nearly 100% API backwards compatibility.
The architecture change enables the powerful new Transition Hook APIs.</p>
<p>Additionally, splitting out the core code from the angular specific code paved the way
for <a href="/ng2/">UI-Router for Angular (2+)</a> and <a href="/react/">UI-Router for React</a>.</p>
<p>Read more: <a href="/guide/ng1/migrate-to-1_0">Migrate to UI-Router 1.0</a></p>{"name"=>nil, "avatar"=>"clear.gif", "bio"=>nil, "location"=>nil, "email"=>nil, "uri"=>nil, "bitbucket"=>nil, "codepen"=>nil, "dribbble"=>nil, "flickr"=>nil, "facebook"=>nil, "foursquare"=>nil, "github"=>nil, "google_plus"=>nil, "keybase"=>nil, "instagram"=>nil, "lastfm"=>nil, "linkedin"=>nil, "pinterest"=>nil, "soundcloud"=>nil, "stackoverflow"=>nil, "steam"=>nil, "tumblr"=>nil, "twitter"=>nil, "vine"=>nil, "weibo"=>nil, "xing"=>nil, "youtube"=>nil}UI-Router 1.0 offers major advantages over the legacy releases. Learn more in the new migration guide.New Ui Router Site2016-06-25T00:00:00+00:002016-06-25T00:00:00+00:00https://ui-router.github.io/blog/new-ui-router-site<h3 id="new-ui-router-site">New UI-Router site</h3>
<p>Welcome to the new UI-Router site.
This will be the new central place for UI-Router documentation, guides, information, and news.</p>
<p>Stay tuned, we’ve got a lot of good stuff in the pipeline!</p>
<p>If you’d like to help write guides and tutorials, feel free to contact us on <a href="http://gitter.im/angular-ui/ui-router">gitter</a></p>{"name"=>nil, "avatar"=>"clear.gif", "bio"=>nil, "location"=>nil, "email"=>nil, "uri"=>nil, "bitbucket"=>nil, "codepen"=>nil, "dribbble"=>nil, "flickr"=>nil, "facebook"=>nil, "foursquare"=>nil, "github"=>nil, "google_plus"=>nil, "keybase"=>nil, "instagram"=>nil, "lastfm"=>nil, "linkedin"=>nil, "pinterest"=>nil, "soundcloud"=>nil, "stackoverflow"=>nil, "steam"=>nil, "tumblr"=>nil, "twitter"=>nil, "vine"=>nil, "weibo"=>nil, "xing"=>nil, "youtube"=>nil}