Heroku is a cloud platform as a service (PaaS). It supports several programming languages. On Heroku, a developer can build, run, and operate applications entirely in the cloud.
In this article, we will deploy an Angular application on Heroku from Github.
You can skip this step, if you already have an Angular application.
ng new heroku-app
2. Run the following commands to build the app and open your browser at http://localhost:4200.
There are three steps to set up a lazy loading feature in Angular.
You should have an Angular app. If you do not have then run the following command.
This command will create a ‘lazy-loading-app’ and -routing flag generate a file ‘app-routing.module.ts’. Now move into your project directory i.e lazy-loading-app
ng new lazy-loading-app --routing
Step 1 and 2: Create a feature module and routing module.
Run the following command.
ng generate module books --routing
This command will create a books folder with…
There are three steps to set up the development environment.
Install Node.js and npm from the following link
Verify your Node.js version. It should be Node.js version 8.x or greater and npm version 5.x or greater. Run the following command to check it.
Install the Angular CLI globally. Run the following command.
npm install -g @angular/ cli
Create a new project
Open a terminal or cmd. Create a new project by running the following command.
ng new new-app
Serve the application
Now go into the project directory and run the server. Run the following command.
ng serve command run the server and -open option will automatically open the browser on http://localhost:4200/
A module in Angular refers to a place where you can group the components, directives, pipes, and services, which are related to the application.
Angular is modular and Angular provide NgModule modularity system. An NgModule is a container for a cohesive block of code. It can contain components, service providers, pipes, and directives.
NgModule contains the following metadata.
The imports array can be used to import the functionality from other Angular modules.
You can create a component in angular on the fly, isn’t it amazing, yes it is.
Let me explain it by an example. Suppose that you want to create an Angular studio in which you provide some list of built-in components to the user and a playground.
Now the user wants to create a form with two input fields and a button. Since Angular studio has the input field and buttons in its built-in components list, the user will drag the component from the available list into the playground.
Now we are hitting a challenge here, we need to compile…
Before moving to the media query, we need to understand the following terms.
A web page can be viewed on desktops, tablets, and phones. Responsive web design is the backbone to make a web page adaptive to all devices.
A responsive web page looks good on all the devices. It adapts its content to fit on all the devices. To make a web page responsive, you use CSS and HTML to modify its content.
It is the user’s visible area of the browser’s window. …
Flexbox is a new module in CSS3. Flexbox was designed as a one-dimensional layout model. it is a good approach to align elements of a container in different directions and orders.
Flexbox gives the ability to expand and to shrink the elements of the container to use all the available space.
Flexbox provides the ability to make a responsive layout structure without using float or positioning.
Flexbox provides a unique aspect to build one-dimensional layouts. It is a true revolution in CSS.
Main Flexbox concepts
The element on which we use flexbox is called a flex container.