Skip to content

Commit c7ed8a3

Browse files
committed
docs(component): add examples on how to use components with ngRoute
Closes angular#13498
1 parent 6988667 commit c7ed8a3

File tree

1 file changed

+44
-1
lines changed

1 file changed

+44
-1
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) {

0 commit comments

Comments
 (0)