docs: update todolist doc and minor doc fixes

Author: nabdelgadir

docs/site/BelongsTo-relation.md

@@ -101,7 +101,7 @@ repository, the following are required:
 The following code snippet shows how it would look like:
 
 {% include code-caption.html
-content="/src/repositories/order.repository.ts.ts" %}
+content="/src/repositories/order.repository.ts" %}
 
 ```ts
 import {Getter, inject} from '@loopback/context';

docs/site/DataSources.md

@@ -34,10 +34,16 @@ Example DataSource Class:
 
 ```ts
 import {inject} from '@loopback/core';
-import {juggler, DataSource} from '@loopback/repository';
+import {juggler} from '@loopback/repository';
+import * as config from './db.datasource.json';
 
 export class DbDataSource extends juggler.DataSource {
-  constructor(@inject('datasources.config.db') dsConfig: DataSource) {
+  static dataSourceName = 'db';
+
+  constructor(
+    @inject('datasources.config.db', {optional: true})
+    dsConfig: object = config,
+  ) {
     super(dsConfig);
   }
 }

docs/site/Defining-the-API-using-code-first-approach.md

@@ -134,7 +134,7 @@ of your routes and `@param` or `@requestBody` to its parameters:
 
 ```ts
 import {Todo} from '../models/todo.model';
-import {post, get, param, requestBody} from '@loopback/openapi-v3';
+import {post, get, param, requestBody} from '@loopback/rest';
 
 export class TodoController {
   constructor() {}

docs/site/Getting-started.md

@@ -73,6 +73,9 @@ follows:
 lb4 controller
 ```
 
+- _Note: If your application is still running, press **CTRL+C** to stop it
+  before calling the command_
+
 - Answer the prompts as follows:
 
   ```sh
@@ -81,7 +84,7 @@ lb4 controller
     create src/controllers/hello.controller.ts
     update src/controllers/index.ts
 
-  Controller Hello was now created in src/controllers/
+  Controller hello was now created in src/controllers/
   ```
 
 - Paste the following contents into the file
@@ -100,9 +103,6 @@ lb4 controller
 
 - Start the application using `npm start`.
 
-  - _Note: If your application is still running, press **CTRL+C** to stop it
-    before restarting it_
-
 - Visit <http://127.0.0.1:3000/hello> to see `Hello world!`
 
 ## Code sample

docs/site/HasMany-relation.md

@@ -114,11 +114,11 @@ repository, the following are required:
 The following code snippet shows how it would look like:
 
 {% include code-caption.html
-content="/src/repositories/customer.repository.ts.ts" %}
+content="/src/repositories/customer.repository.ts" %}
 
 ```ts
 import {Order, Customer} from '../models';
-import {OrderRepository} from './order.repository.ts';
+import {OrderRepository} from './order.repository';
 import {
   DefaultCrudRepository,
   juggler,
@@ -127,7 +127,7 @@ import {
 } from '@loopback/repository';
 import {inject, Getter} from '@loopback/core';
 
-class CustomerRepository extends DefaultCrudRepository<
+export class CustomerRepository extends DefaultCrudRepository<
   Customer,
   typeof Customer.prototype.id
 > {

docs/site/Model.md

@@ -99,7 +99,7 @@ To define a model for use with the juggler bridge, extend your classes from
 `Entity` and decorate them with the `@model` and `@property` decorators.
 
 ```ts
-import {model, property} from '@loopback/repository';
+import {model, property, Entity} from '@loopback/repository';
 
 @model()
 export class Product extends Entity {

docs/site/Repositories.md

@@ -156,16 +156,17 @@ configured earlier. It's recommended that you use
 TypeScript version:
 
 ```ts
-import {DefaultCrudRepository, DataSourceType} from '@loopback/repository';
-import {inject} from '@loopback/context';
+import {DefaultCrudRepository, juggler} from '@loopback/repository';
 import {Account} from '../models';
+import {DbDataSource} from '../datasources';
+import {inject} from '@loopback/context';
 
 export class AccountRepository extends DefaultCrudRepository<
   Account,
   typeof Account.prototype.id
 > {
-  constructor(@inject('datasources.db') protected db: DataSourceType) {
-    super(Account, db);
+  constructor(@inject('datasources.db') dataSource: DbDataSource) {
+    super(Account, dataSource);
   }
 }
 ```

docs/site/Using-components.md

@@ -15,6 +15,13 @@ allow easier extensibility of your Application.
 A typical LoopBack component is an [npm](https://www.npmjs.com) package
 exporting a Component class which can be added to your application.
 
+Install the following dependencies to run the code snippet below.
+
+```sh
+npm install --save @loopback/authentication
+npm install @types/passport
+```
+
 ```ts
 import {RestApplication} from '@loopback/rest';
 import {AuthenticationComponent} from '@loopback/authentication';

docs/site/todo-list-tutorial-controller.md

@@ -221,6 +221,10 @@ export class TodoListController {
 }
 ```
 
+Check out our todo-list example to see the full source code generated for
+TodoListTodo controller:
+[src/controllers/todo-list-todo.controller.ts](https://github.com/strongloop/loopback-next/blob/master/examples/todo-list/src/controllers/todo-list-todo.controller.ts)
+
 ### Try it out
 
 With the controllers complete, your application is ready to start up again!

docs/site/todo-list-tutorial-model.md

@@ -68,11 +68,14 @@ Model TodoList was created in src/models/
 ```
 
 Now that we have our new model, we need to define its relation with the `Todo`
-model. Add the following property to the `TodoList` model:
+model. Add the following import statements and property to the `TodoList` model:
 
 #### src/models/todo-list.model.ts
 
 ```ts
+import {hasMany} from '@loopback/repository';
+import {Todo} from './todo.model';
+
 @model()
 export class TodoList extends Entity {
   // ...properties defined by the CLI...

docs/site/todo-list-tutorial-repository.md

@@ -20,15 +20,22 @@ building a constrained version of `TodoRepository`.
 
 ### Create your repository
 
-In the `src/repositories` directory:
-
-- create `todo-list.repository.ts`
-- update `index.ts` to export the newly created repository
+From inside the project folder, run the `lb4 repository` command to create a
+repository for the `TodoList` model using the `db` datasource. The `db`
+datasource shows up by its class name `DbDataSource` from the list of available
+datasources.
+
+```sh
+lb4 repository
+? Please select the datasource DbDatasource
+? Select the model(s) you want to generate a repository TodoList
+   create src/repositories/todo-list.repository.ts
+   update src/repositories/index.ts
+
+Repository TodoList was created in src/repositories/
+```
 
-Like `TodoRepository`, we'll use `DefaultCrudRepository` to extend our
-`TodoListRepository`. Since we're going to be using the same database used for
-`TodoRepository`, inject `datasources.db` in this repository as well. From there
-we'll need to make two more additions:
+From there, we'll need to make two more additions:
 
 - define the `todos` property, which will be used to build a constrained
   `TodoRepository`
@@ -42,14 +49,14 @@ repository instance to constrain as the arguments for the function.
 #### src/repositories/todo-list.repository.ts
 
 ```ts
+import {Getter, inject} from '@loopback/core';
 import {
   DefaultCrudRepository,
-  juggler,
   HasManyRepositoryFactory,
+  juggler,
   repository,
 } from '@loopback/repository';
-import {TodoList, Todo} from '../models';
-import {inject, Getter} from '@loopback/core';
+import {Todo, TodoList} from '../models';
 import {TodoRepository} from './todo.repository';
 
 export class TodoListRepository extends DefaultCrudRepository<

docs/site/todo-tutorial-geocoding-service.md

@@ -174,6 +174,7 @@ Controller constructor to receive `GeocodeService` as a new dependency.
 #### src/controllers/todo.controller.ts
 
 ```ts
+import {inject} from '@loopback/core';
 import {GeocoderService} from '../services';
 
 export class TodoController {

docs/site/todo-tutorial-putting-it-together.md

@@ -35,7 +35,7 @@ Let's try out our application! First, you'll want to start the app.
 
 ```sh
 $ npm start
-Server is running on port 3000
+Server is running at http://[::1]:3000
 ```
 
 Next, you can use the [API Explorer](http://localhost:3000/explorer) to browse
@@ -46,7 +46,8 @@ Here are some requests you can try:
 - `POST /todos` with a body of `{ "title": "get the milk" }`
 - `GET /todos/{id}` using the ID you received from your `POST`, and see if you
   get your Todo object back.
-- `PATCH /todos/{id}` with a body of `{ "desc": "need milk for cereal" }`
+- `PATCH /todos/{id}` using the same ID, with a body of
+  `{ "desc": "need milk for cereal" }`
 
 That's it! You've just created your first LoopBack 4 application!
 

docs/site/todo-tutorial-repository.md

@@ -48,6 +48,9 @@ model definition and 'db' datasource configuration and retrieves the datasource
 using
 [Dependency Injection](https://loopback.io/doc/en/lb4/Dependency-injection.html).
 
+Now we can expose the `Todo` API through the
+[controller](todo-tutorial-controller.md).
+
 ### Navigation
 
 Previous step: [Add a datasource](todo-tutorial-datasource.md)

docs/site/todo-tutorial-scaffolding.md

@@ -45,6 +45,7 @@ the following:
 ```text
 src/
   controllers/
+    home-page.controller.ts
     README.md
     ping.controller.ts
   datasources/
@@ -60,6 +61,7 @@ test/
   README.md
   mocha.opts
   acceptance/
+    home-page.controller.acceptance.ts
     ping.controller.acceptance.ts
 node_modules/
   ***

examples/todo-list/README.md

@@ -80,7 +80,7 @@ application, follow these steps:
     ```sh
     $ npm start
 
-    Server is running on port 3000
+    Server is running at http://127.0.0.1:3000
     ```
 
 Feel free to look around in the application's code to get a feel for how it

examples/todo/README.md

@@ -73,7 +73,7 @@ application, follow these steps:
     ```sh
     $ npm start
 
-    Server is running on port 3000
+    Server is running at http://127.0.0.1:3000
     ```
 
 Feel free to look around in the application's code to get a feel for how it