Welcome to the world of coding! The topic of today’s article is about custom AngularJS web application development and the short tutorial how to do it.
Angular is one of the best web development frameworks available. It made it really simple to create a whole bunch of little puzzle pieces that fit together to build your application in a very modular way. It has also made a lot of interesting concepts like dependency injection and other things first to your features.
I am inclined to believe that you will find that AngularJS is an entirely different framework that holds on to a lot of core ideas of modularity, dependency injection and a lot of other great things. However, AngularJS takes things a step further, it was made to be completely cross-platform. It is made with performance, speed and other things in mind and I think you’ll find that as we work through this article and try to build a simple web application in AngularJS framework.
Developing web applications with AngularJS can be a crucial step for your business. The current popularity of applications may help you to provide your target audience with the opportunity to be in touch all the time.
Let’s create a web application, for example, a simple shopping website.
Typically, a complete web application can be split into 2 parts.
- The client side is what the user will be interacting with. This is also called Front-End or the User Interface (UI). By using the material library in Angular, we can create a good interface in little time.
- The server side consists of the server which accepts requests from client side and gives back response to client side. The server will be connected to a database which contains all the data required by the user. The requested data will be fetched from the database and sent as a response to the user.
For developing the application, first of all, we need an IDE. Visual Studio code is one of the best options. This can be downloaded from code.visualstudio.com. Once VS Code is downloaded and installed, open it and open a folder to start with our project.
Follow the following step-by-step guide for creating your web app.
- Create a folder named, for example, “market” and open it in VS Code. We will create an Angular project in this folder.
- To install Angular in the project, type the command “npm install -g @angular/cli”. The “-g” option makes sure that Angular is installed for system wide usage and not just for our project folder.
- To create an Angular project named “market”, we will use the command “ng new” with the project name “market”.
- Routing is required in our application to display multiple components. So, press “y”. For this project we will use the basic style format “CSS”.
- For successful completion, we can see that our project is created.
- Right click on the project and select “Open in terminal”. To start the application, type the command “ng-serve”. By default, Angular application will be running in port 4200.
- Then open the browser and type the URL “localhost-4200”. We can see our Angular project running in the browser. Whatever we are seeing is something automatically added by Angular.
- Close the panel for now. Looking at the project folder, we can see the “src” folder, inside which we can find the source code of our application. Inside the “src” folder we will find a folder named “app”. Inside the “app” folder, we can find an app routing module, app component and the app module already created by Angular. App routing module will be used for navigating the user to different pages or components in our application. We will see its usage later.
The app component constitutes the CSS, HTML and TS files. CSS files will be used for styling the component. HTML file contains the view/interface of the component. TS file contains all the logic and operations of the component.
The app module file is the main module inside which we declare all the components and import other modules for our project.
- Inside the HTML file, we can find the sample code being displayed in the browser. Let’s select it all and delete it.
- Save the file. Now our application is clean.
- For making the development of UI faster, we can use the Angular Material library, which contains a lot of useful components and theming.
- To add Angular Material library to our project, right click on the project folder and select “Open in Terminal”. Now type the command “ng add @angular/material”.
- When asked to select a theme, we must select a “custom” theme, so that we can create a theme with a desired colour, and also include dark theme. We will use Angular material provided fonts and styles in this project. Press “y”. Also we need animations enabled in our project, so press “y” again.
- After that, Angular Material library is successfully added to our project. Let’s check it out – delete all the opened terminals.
- Now, open the app module file. Let’s add a basic material module into our project for testing. In the “imports” section of modules, type the material button module “MatButtonModule”.
- Since VS Code could not automatically detect it, we will import the module at the top by ourselves. Type the import statement at the top.
- Now let’s open the app’s HTML file and add a material button.
- First, let’s create a basic HTML button with a text saying “Click Me”.
- To convert it into a material button, just add the attribute “mat-button”.
- Save all the edited files.
- Open the terminal and type “ng serve” for a fresh start of application. Once the app starts running, open the browser and see the result. The material button should be working.
- For better visibility, let’s add some margin space around the button and try changing the colour of the button. Material supports the ‘color’ attribute with values ‘primary’, ‘accent’ or ‘warn’. We just have to add the attribute color with desired value.
Our set up is working fine and we’re good to go. In such a way continue doing the front-end development to get your web app done.
