29/04/19 15 minutes read 1700 Naren Allam
Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop.
To build applications that live on the web, mobile, or the desktop, we need to install Angular and other dependencies.
First, open a terminal to create a folder 'dev' and navigate into that folder in which you want to store your projects. To do so, run commands
Next, we have to install Node Package Manager(NPM). To install it, run the command
After Node Package Manager(NPM) installed , we need to update it to the latest version. To do this, run the command
Now we have to install Angular CLI.
Angular CLI helps us to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.
It can be simply installed using npm, by running the command
To check that it installed correctly, run the command
It will give you output like this
Once complete, you can now access the CLI by simply starting any commands with 'ng'.
The ng new command creates an Angular workspace folder and generates a new app skeleton. A workspace can contain multiple apps and libraries. A newly generated app contains the source files for a root module, with a root component and template. Each app has a src folder that contains the logic, data, and assets.
ng generate command to add new files for additional components and services, and code for new pipes, directives, and so on. The CLI will also create simple test shells for all of these.
ng serve command easily test your app locally while developing.
The Angular CLI makes use of git to pull down required modules so we need to make sure we have git configured.
If you have not configured the git user name and email, then run commands
Now run the following command to create a new Angular project 'my-app'.
Here "my-app" is my Angular project name.
The above command creates a project folder with the name "my-app".
The command will ask you several questions. The first question asks you if want to use Angular routing.
Type 'y' and press 'Enter'.
The next question asks you what stylesheet formatting to use.
Here, select 'Sass' and the installation process will begin pulling down required Angular modules and created the directory structure for our new application 'my-app'.
Now navigate to your project folder 'my-app' by typing the command
Now to run the application development server using the Angular CLI, run the command
Here, -o (--open) is for open, this flag will open your default browser at http://localhost:4200.
Then you will see a message in the terminal like this
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
In the browser, your app greets you with a message:
The most basic building block of your Angular application is the component.
A component consists of three primary elements:
The HTML template
The styling (CSS, Sass, Stylus, etc..)
When we use the Angular CLI to start a new project, it generates a single component, which is found in /src/app/:
While we have three files here that represent the three elements above, the .ts (TypeScript) is the heart of the component.
Let's take a look at that file:
Here, because this is a component, we're importing Component from the @angular/core library, and then it defines what's called a @Component decorator, which provides configuration options for that particular component.
As you can see, it's referencing the location of the HTML template file and the CSS file with the templateUrl property and the styleUrls property.
The logic of the component resides in the class at the bottom. As you can see, the CLI starter template simply defines a single property called title.
Let's use the Angular CLI to create our own components that we'll need going forward. In the terminal, issue the following command:
Notice we first use the full syntax to generate a component, and then we use a shorthand syntax, which makes it a little bit easier to use. The commands do the same thing: generate components.
When we generate components this way, it will create a new folder in the /src/ folder based on the name we gave it, along with the respective template, CSS, .ts and .spec (for testing) files.
In Visual Studio Code, you will see all the folder(s)/file(s) created.
Now, let’s walk through the anatomy of our Angular app. The cli setup procedures install lots of different files as you can see. Most of them can be safely ignored.
In the project root , we have some important files:
This is the most important folder. Here we have all the files that make our Angular app.
This folder is for the End-to-end tests of the application, written in Jasmine and run by the protractor e2e test runner.
The npm packages installed in the project with the npm install command will be stored here.
As every modern web application, we need a package system and package manager to handle all the third-party libraries and modules our app uses. Inside this file, you will find all the dependencies and some other handy stuff like the npm scripts that will help us a lot to orchestrate the development (bundling/compiling) workflow.
Main configuration file. It needs to be in the root path as it’s where the typescript compiler will look for it.
Inside of the /src directory we find our raw, uncompiled code. This is where most of the work for your Angular app will take place.
Under /src/ folder, you will find two main folder structures.
It has all the components, modules, pages you will build the app upon.
This folder is to manage the different environment variables such as dev and prod.
For example we could have a local database for our development environment and a product database for production environment.
When we run ng serve it will use by default the dev env.
If you like to run in production mode you need to add the --prod flag to the ng serve.
And there are other secondary but also important folders/files.
It’s the app host page but you won’t be modifying this file often, as in our case it only serves as a placeholder.
All the scripts and styles needed to make the app work are gonna be injected automatically by the webpack bundling process, so you don’t have to do this manually. The only thing that comes to my mind now, that you may include in this file, are some meta tags (but you can also handle these through Angular as well).
In this folder you will find images, sample-data json’s, and any other asset you may require in your app.
The app folder:-
This is the core of the project. Let’s have a look at the structure of this folder so you get an idea where to find things and where to add your own modules to adapt this project to your particular needs.
This serves as the skeleton of the app. Typically has a to render the routes and their content. It can also be wrapped with content that you want to be in every page (for example a toolbar).
It’s the Angular component that provides functionality to the app.component.html file I just mentioned about.
Here we define the main routes. These routes are registered to the Angular RouterModule in the AppModule. If you use lazy modules, child routes of other lazy modules are defined inside those modules.
This is the main module of the project which will bootstrap the app.
This is the test file for the AppComponent generated by CLI. The app.component.ts and app.component.spec.ts files are siblings in the same folder. The root file names (app.component) are the same for both files.
As part of the initial app, the CLI created the first Angular component for you. It is the root component, and it is named 'app-root'. You can see it in visual studio code which you opened.
Now, open ./src/app/app.component.ts
Change the title property from 'my-app' to 'My First Angular App'.
Then, the browser reloads automatically with the revised title.
To make it look better, open ./src/app/app.component.css and give the component some style.
Now, we need to configure animations and import the component modules. For this first we need to install Angular Material and Angular CDK
Some Angular Material components use animations so we need to add support for animations in our Angular front-end application in order to enable those animations.
Angular Material is the implementation of Material Design for Angular. It offers a plethora of components and patterns for navigation, forms, buttons and layouts. It is inspired by the Google Material Design.
What is Material Design?
Material Design is a design language created by Google in 2014. It dictates a set of principles and guidelines for creating UIs including motion (animations) and interaction (gestures).
Why to use Angular Material?
Angular Material components help in constructing attractive, consistent, and functional web pages and web applications while adhering to modern web design principles like browser portability, device independence, and graceful degradation. It helps in creating faster, beautiful, and responsive websites.So, to add Angular Material quickly use the "ng add" command. This method only works with Angular 6+.
Angular Component Development Kit is comprised of a bunch of services, directives, components, classes, modules, etc to make our lives easier when developing Angular components. They included features for accessibility, text directionality, platform detection, and dynamic component instantiation.
Angular animations allows us to create animations which provides us similar native performance as CSS animations. Animations add a lot of interaction between the html elements.
Once the animations package is installed, import BrowserAnimationsModule into your application to enable animations support and also Import the NgModule for each component you want to use.
To do this, open app.module.ts and add the following
Then, include a theme required to apply all of the core and theme styles to your application.
To get started with a prebuilt theme, include one of Angular Material's prebuilt themes globally in your application. If you're using the Angular CLI, you can add this to your styles.css:
Now open app-routing.modules.ts and replace Routes =[ ] with the following
In this article, I have explained you the basic setup for development environment of Angular in Visual Code step by step. Hopefully, it will help you to understand.