Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit 3ae53df

Browse files
committed
fixup
1 parent fc32627 commit 3ae53df

File tree

2 files changed

+58
-11
lines changed

2 files changed

+58
-11
lines changed

src/loader.js

+44-1
Original file line numberDiff line numberDiff line change
@@ -333,6 +333,7 @@ function setupModuleLoader(window) {
333333
* In order to make the definition easier, components enforce best practices like controllerAs
334334
* and default behaviors like scope isolation, restrict to elements and allow transclusion.
335335
*
336+
* <br />
336337
* Here are a few examples of how you would usually define components:
337338
*
338339
* ```js
@@ -357,7 +358,49 @@ function setupModuleLoader(window) {
357358
*
358359
* ```
359360
*
360-
* See {@link ng.$compileProvider#directive $compileProvider.directive()}.
361+
* <br />
362+
* Components are also useful as route templates (e.g. when using
363+
* {@link ngRoute ngRoute}):
364+
*
365+
* ```js
366+
* var myMod = angular.module('myMod', ['ngRoute']);
367+
*
368+
* myMod.component('home', {
369+
* template: '<h1>Home</h1><p>Hello, {{ home.user.name }} !</p>',
370+
* controller: function() {
371+
* this.user = {name: 'world'};
372+
* }
373+
* });
374+
*
375+
* myMod.config(function($routeProvider) {
376+
* $routeProvider.when('/', {
377+
* template: '<home></home>'
378+
* });
379+
* });
380+
* ```
381+
*
382+
* <br />
383+
* When using {@link ngRoute.$routeProvider $routeProvider}, you can often avoid some
384+
* boilerplate, by assigning the resolved dependencies directly on the route scope:
385+
*
386+
* ```js
387+
* var myMod = angular.module('myMod', ['ngRoute']);
388+
*
389+
* myMod.component('home', {
390+
* template: '<h1>Home</h1><p>Hello, {{ home.user.name }} !</p>',
391+
* bindings: {user: '='}
392+
* });
393+
*
394+
* myMod.config(function($routeProvider) {
395+
* $routeProvider.when('/', {
396+
* template: '<home user="$resolve.user"></home>',
397+
* resolve: {user: function($http) { return $http.get('...'); }}
398+
* });
399+
* });
400+
* ```
401+
*
402+
* <br />
403+
* See also {@link ng.$compileProvider#directive $compileProvider.directive()}.
361404
*/
362405
component: function(name, options) {
363406
function factory($injector) {

src/ngRoute/route.js

+14-10
Original file line numberDiff line numberDiff line change
@@ -103,10 +103,13 @@ function $RouteProvider() {
103103
* {@link ngRoute.$route#$routeChangeError $routeChangeError} event is fired.
104104
* For easier access to the resolved dependencies from the template, the `resolve` map will
105105
* be available on the scope of the route, under `$resolve` (by default) or a custom name
106-
* specified by the `resolveAs` property (see below).
107-
* **Note:** If your scope already contains a property with this name, it will be hidden or
108-
* overwritten. Make sure, you specify an appropriate name for this property, that
109-
* does not collide with other properties on the scope.
106+
* specified by the `resolveAs` property (see below). This can be particularly useful, when
107+
* working with {@link angular.Module#component components} as route templates.<br />
108+
* <div class="alert alert-warning">
109+
* **Note:** If your scope already contains a property with this name, it will be hidden
110+
* or overwritten. Make sure, you specify an appropriate name for this property, that
111+
* does not collide with other properties on the scope.
112+
* </div>
110113
* The map object is:
111114
*
112115
* - `key` – `{string}`: a name of a dependency to be injected into the controller.
@@ -117,10 +120,10 @@ function $RouteProvider() {
117120
* `ngRoute.$routeParams` will still refer to the previous route within these resolve
118121
* functions. Use `$route.current.params` to access the new route parameters, instead.
119122
*
120-
* - `resolveAs` - {string=} - The name under which the `resolve` map will be available on the
121-
* scope of the route. If omitted, defaults to `$resolve`.
123+
* - `resolveAs` - `{string=}` - The name under which the `resolve` map will be available on
124+
* the scope of the route. If omitted, defaults to `$resolve`.
122125
*
123-
* - `redirectTo` – {(string|function())=} – value to update
126+
* - `redirectTo` – `{(string|function())=}` – value to update
124127
* {@link ng.$location $location} path with and trigger route redirection.
125128
*
126129
* If `redirectTo` is a function, it will be called with the following parameters:
@@ -133,13 +136,13 @@ function $RouteProvider() {
133136
* The custom `redirectTo` function is expected to return a string which will be used
134137
* to update `$location.path()` and `$location.search()`.
135138
*
136-
* - `[reloadOnSearch=true]` - {boolean=} - reload route when only `$location.search()`
139+
* - `[reloadOnSearch=true]` - `{boolean=}` - reload route when only `$location.search()`
137140
* or `$location.hash()` changes.
138141
*
139142
* If the option is set to `false` and url in the browser changes, then
140143
* `$routeUpdate` event is broadcasted on the root scope.
141144
*
142-
* - `[caseInsensitiveMatch=false]` - {boolean=} - match routes without being case sensitive
145+
* - `[caseInsensitiveMatch=false]` - `{boolean=}` - match routes without being case sensitive
143146
*
144147
* If the option is set to `true`, then the particular route can be matched without being
145148
* case sensitive
@@ -278,7 +281,8 @@ function $RouteProvider() {
278281
* - `$template` - The current route template HTML.
279282
*
280283
* The `locals` will be assigned to the route scope's `$resolve` property. You can override
281-
* the property name, using `resolveAs` in the route definition.
284+
* the property name, using `resolveAs` in the route definition. See
285+
* {@link ngRoute.$routeProvider $routeProvider} for more info.
282286
*
283287
* @property {Object} routes Object with all route configuration Objects as its properties.
284288
*

0 commit comments

Comments
 (0)