docs(component): add examples on how to use components with ngRoute

Closes #13498

Author: gkalpak

src/loader.js

@@ -333,6 +333,7 @@ function setupModuleLoader(window) {
            * In order to make the definition easier, components enforce best practices like controllerAs
            * and default behaviors like scope isolation, restrict to elements and allow transclusion.
            *
+           * <br />
            * Here are a few examples of how you would usually define components:
            *
            * ```js
@@ -357,7 +358,49 @@ function setupModuleLoader(window) {
            *
            * ```
            *
-           * See {@link ng.$compileProvider#directive $compileProvider.directive()}.
+           * <br />
+           * Components are also useful as route templates (e.g. when using
+           * {@link ngRoute ngRoute}):
+           *
+           * ```js
+           *   var myMod = angular.module('myMod', ['ngRoute']);
+           *
+           *   myMod.component('home', {
+           *     template: '<h1>Home</h1><p>Hello, {{ home.user.name }} !</p>',
+           *     controller: function() {
+           *       this.user = {name: 'world'};
+           *     }
+           *   });
+           *
+           *   myMod.config(function($routeProvider) {
+           *     $routeProvider.when('/', {
+           *       template: '<home></home>'
+           *     });
+           *   });
+           * ```
+           *
+           * <br />
+           * When using {@link ngRoute.$routeProvider $routeProvider}, you can often avoid some
+           * boilerplate, by assigning the resolved dependencies directly on the route scope:
+           *
+           * ```js
+           *   var myMod = angular.module('myMod', ['ngRoute']);
+           *
+           *   myMod.component('home', {
+           *     template: '<h1>Home</h1><p>Hello, {{ home.user.name }} !</p>',
+           *     bindings: {user: '='}
+           *   });
+           *
+           *   myMod.config(function($routeProvider) {
+           *     $routeProvider.when('/', {
+           *       template: '<home user="$resolve.user"></home>',
+           *       resolve: {user: function($http) { return $http.get('...'); }}
+           *     });
+           *   });
+           * ```
+           *
+           * <br />
+           * See also {@link ng.$compileProvider#directive $compileProvider.directive()}.
            */
           component: function(name, options) {
             function factory($injector) {