Angular Cli

  • Let’s start discussing on the Angular CLI which helps in setting up the application.

What is Angular CLI:

  • The Angular CLI is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.
  • Create angular applications faster and greater consistencey.
  • Create the boiler plate code(the code which is used  over and over again) for angular features like components, directives, pipes, services etc and Typescript features like classes, interfaces, enums etc.
  • It follows angular best practices and conventions out of the box.
  • used to create optimised builds for deployment to production.
  • It also helps in creating a unit and end-to-end tests for the application.

Let’s Start Setting up Developer Environment :

  • Install Angular CLI using the below command:
  1. npm install -g @angular/cli        
  2. This will install the ng command globally on your system.
  • Generate a new project and default app by running the following command:
  1. ng new tilesKart
  2. This creates a new directory with all files you need to get started.
  • Serve the application:
  1. cd tilesKart
  • You can now navigate to the new directory:
  1. ng serve –open
  2. Then start the Angular CLI development server:
  3. This will start a local development server that you can navigate to in your browser at http://localhost:4200/.
  4. The Angular CLI development server includes LiveReload support, so your browser automatically reloads the application when a source file changes.

Now in the Browser at URL localhost:4200 you should see the page displaying the below image. then we are done with setting up the application

 

#2 Whats Included in the sample app created by the Angular.

  • Once we set up the tilesKart app if we navigate to the folder the content will look like below.

  • All our app code lives in the src folder.

 

  • All our application core logic resides in the app folder.

  • Now let’s discuss on the important folders and files in the template application under src folder.
File/ Folder Need
app/app.component. {ts, html, css, spec.ts} Defines the AppComponent along with an HTML template, CSS stylesheet, and a unit test
app/app.module.ts Defines AppModule, the root module that tells Angular how to assemble the application
assets/* A folder where you can put images and mock apis and any other assets required by the application
favicon.ico Image that gets displayed when application loads in the browser
index.html The main html page which gets loaded when we start the application
styles.css All the application global styles. We have component specific styles also so don’t include them globally

 

  • Now let’s discuss on the important folders and files in the template application under root folder.
File/Folder Need
e2e/ Used for end to end testing.
node_modules/ All the dependent modules that are required by the application that are specified in the package.json
angular.json Configuration file for the angular cli. It contains which html to load and what styles to included etc
package.json All the dependencies (dev and runtime) dependencies are specified here

Tutorial: tilesKart App

  1. As part of our Angular Case study we are going to create the tilesKart App which helps ABC corporation to sale the tiles through online.
  2. This basic app has many of the features you’d expect to find in a data-driven application. It displays tiles, filters the tiles, login, register, Wishlist, buy etc.

By the end of the tutorial you will be able to do the following by using all the core features of the angular

  • Use built-in Angular directives to display and hide the tile
  • Create angular components to register user, login,tile list, tile detail
  • Use one-way data binding for read-only data.
  • Property binding to display images
  • Add editable fields to update a model with two-way data binding.
  • Bind component methods to user events, like change and clicks.
  • Enable users to filter the tiles based on the name, model etc
  • Format data with pipes.
  • Create custom pipes to display the custom formatting
  • Create interface to validate the data
  • use bootstrap styles in the application
  • use component specific styles to provide the rich UI
  • create and communicate the data between parent and nested components
  • create services to isolate the data from components
  • use http services to get the data from webapi
  • create and use asp.net core web api for the tiles data to come from web server
  • use template and reactive forms to validate the input
  • Use routing to navigate among different views and their components and pass the data across components
  • Create and use custom directives to validate the input and provide custom behaviour
  • Use html5 storage to persist the data in the app

Case study tilesKart app stage by stage :

We are going to create the tilesKart from scratch and building the application one stage at a time by filling the business use case with feature available in the angular

Below describe the stages of the application which we are going to build on.

  • Set up initial app using the angular CLI
  • Display the Tiles using the *ngFor creating the new TilesComponent
  • Install bootstrap package and update the Tiles display table
  • Display images for the tiles – property binding
  • Display the tiles table only if the tiles array exist and it has the data – *ngIF
  • Create login component with user name and password with two-way binding
  • Login Component – login button to validate the login using event binding
  • TilesComponent – update the tile display with uppercase, currency and date pipes
  • TilesComponent – create Itile Interface and update the mobile array type to Itiles
  • TilesComponent – create status pipe(custom) to display the status of the stock availability
  • TilesComponent – create component specific styles to update the alternate row display background colour
  • TilesComponent
    • Create select box to hold the filter options
      • Name
      • Description
      • Model
    • Text box to hold the filter text
    • Button perform filter
    • On filter operation get filtered tiles array based on the filter option and filter text and update the UI
  • Tiles Component
    • Create tile component as nested component to display the tiles data for each item
    • Demonstrate on how to communicate between the parent and child components
  • Tiles Service
    • Create tiles Service to serve the tiles Data to component
    • Demonstrate the dependency injection concept on how to use the Tile Service as injected dependency to the TilesComponent 
  • Tiles Service
    • Use http service inside the tiles Service again as dependency to get the data from the webserver
  • Rating Component
    • Create Rating Component as the nested component to the tiles Component to display the rating of each item
    • Demonstrate the communication between component.
  • Routing
    • update the app.module to having the routing definition for the tilesComponent and logincomponent
    • on successful login redirect to the tilesComponent
  • Routing
    • Create the welcome component to display the welcome page on opening the app
    • Update the routing definition in the app.module
  • TilesDetailComponent
    • Create TilesDetailComponent to display the data of the selected tiles data
    • This component has an option to buy, add to wish list and go back to listing
    • Update the routing definition for TilesDetailComponent
    • Update the TileComponent to route to the TilesDetailComponent on selection of the Individual tiles
  • Login Component
    • Update the Login Component to validate the username and password using the template forms
  • Register Component
    • Create new Register Component to provide new user registration.
    • Use reactive forms to validate the inputs for registering
  • Local Storage
    • Demonstrate how we can make use of the Html5 Local storage to persist the data and access across the components
  • Buy Component
    • Create Buy Component to buy the selected tiles
    • Demonstrate maxQty custom directive on validating if the user selects more than permitted items on buy.