• Part 1: A simple crud
  • Installation
  • The generated app
  • The list of addresses
  • The detail
  • Editing the detail
  • Validation
• Part 2: A node.js express-based API
  • Setup Express
  • Simple handler
  • Handling pagination
• Part 3: Advanced material
  • Header and footer
  • Toolbar
  • Submenus
  • Using a Real API
  • The DataSource object

Code on github https://github.com/kendarorg/Angular101

The generated app

Root

The directory demo001 is created, and contains several other subdirectories:

• node_modules: all the node stuffs download for the project, that is added directly to the .gitignore file
• src: containing the real source files
• e2e: needed to run the angular application and the tests with Protractor

A bunch of file inside the root are created too:

• angular.json: The angular project configuration
• tsling.json: The TypeScript lint configuration, with the rules needed by the static check
• tsconfig.*.json: The configurations for the transpiler from TypeScript to Javascript
• package-lock.json: Autogenerated to contain the versions of the imported libraries
• package.json: The package versions
• karma.conf.js: Configuration for the karma test runners
• browserslist: To define how Less will generate css according to the compatibility with the listed browsers

Sources

• index.html: The main container (module) of the application
• styles.less: The main css/less file
• test.ts: The main tests runner
• polyfill.ts: Functions needed to harmonize the browser's behaviors
• main.ts: The main entry point for the application
• assets: The static assets (like images etc)
• environments: The specific settings for each environment. Here we have the development (default) and production
• app: The application itself

The App

This is the first module that will be instantiated after the main

• app-routing.module.ts: Routing for the main application
• app.component.css: Css specific for the main component
• app.component.html: Html template (view) for the main component
• app.component.ts: Component source
• app.component.spec.ts: Component tests
• app.module.ts: The list of modules used by the app

Further preparation

I choose to use the material library with flex layout

npm i @angular/material @angular/cdk @angular/animations @angular/flex-layout

Now you can run the application typing

ng serve

And now you could see the "fancy" application in your browser going on http://localhost:4200. Ctrl+C to stop the server

To clean up all the mess the content of the app.component.html can be switched to the following. Equivalent to the old ng-view. This will contain all the result of the route choices

<router-outlet></router-outlet>

Re-running the serve command will lead to an empty page! :D

Last modified on: February 17, 2020