You can find more information about the Angular CLI here
npm install -g @angular/cling new my-angular-appcd my-angular-appng serve
- This application is broken. After what you've learned so far, you should be able to fix the bugs before adding new features...
NB: The goal of this session is to learn about template syntax in Angular.
Using the mocks in the mocks folder, display all the books.
Let's add a simple filter in our application that will filter our books by category and title. The result of the filter should be unique.
Now that our application is working, let's split it into smaller components:
Let's create these 3 components:
<bs-header></bs-header><bs-book-input></bs-book-input><bs-books></bs-books>
In app.component.html, we provided an idea of how you should split your application
NB: Components are functions that takes argements as attributes.
Let's now remove the mockbooks and introduce a fake service.
Inside the app.module.ts, uncomment InMemoryWebApiModule.
Then by using the HttpClientModule, you should be able to fetch the data from our mock server.
NB: You can find more information about InMemoryWebApiModule here.
Documentation about Http Service
All services are located inside the services folder.
Implement the following methods: getBooks and getBook in books.service.ts.
Implement the following methods: search using the search.service.ts.
Documentation about DI (Dependency Injection) in Angular
Our application is using hardcoded urls ('api/books') which is a very bad practise and makes our application difficult to maintain. Let's use DI to fix this issue.
Hint: The @Inject attribute is used to solve this issue.
Intoducing async and json pipes. How do you implement your own pipe?
Let's introduce the notions of Observable, Observer and Producer in order to better understand FRP (Functional Reactive Programming)
[http://rxmarbles.com](http://rxmarbles.com
Implement the search using Observable.
Let's add some routing into our application. In app.routing.ts, add the following routing:
export const routes: Routes = [
{ path: "", redirectTo: "/dashboard", pathMatch: "full" },
{ path: "dashboard", component: DashboardComponent },
{ path: "books/:id", component: BookDetailComponent },
];
Configure our application to use the routes defined above. In AppComponent, we're going to keep the following markup for our template: app.component.html
<bs-header [title]="title"></bs-header>
<router-outlet></router-outlet>
Let's implement the Dashboard component. The template is already provided in the dashboard folder. Add the component definition and don't forget to declare it. Make sure the application is still working after adding the dashboard.
Everything is already provided to build the book-detail component. Just set it up and make sure your application is still working.
The next step will be to build the CRUD operations.
Documentation about Reactive Forms
Let's implement the login component.
First, we're going to enable the login path in the app.routing.ts
A login component folder has been added. Here is a set of requirements for the login component:
- User should provide an email as username. (Validation is required)
- User should provide a password with a minimum of 8 characters (Validation is required)
Using FormGroup and FormControl, we're going to implement the login behavior
- User should not be able to access the site if he's not logged in. [AuthGuard]
// localStorage
Lets implement the AuthGuard. (auth.guard.ts). The AuthGuard should check if the user's information has been saved into the localStorage
Once you have your login working, refactor it to use the FormBuilder API instead of FormGroup and FormControl.
Lets break our application into isolated modules. We're going to create these 3 modules:
- AuthModule
- CoreModule
- ShareModule
Lets discuss first what should be added into each module then refactor our application to reflect our choices.
- Live demo (barebone redux)