Are you looking to create a new project using the Angular framework? If yes, then you have arrived at the right place. In this article, we will give you a full guide on how to create an Angular project.
Here we have mentioned, a step-by-step guide for creating a mobile application using Angular in a very simple way. Angular is an open-source Type-Script-based web application framework to build an interactive and secure app. Angular is launched by Google with strong community support. The Angular team has to build Angular that has also built AngularJS to build a mobile application. In this article, you will be able to develop a web application for iOS or Android using Angular.
Step 1: Set up an environment
Before setting up an environment, you first need to download Visual Studio. Now you can set up an environment here. In order to get started with Angular, you first need to set up an environment. You need to set up an environment to build a complete application. In order to do that follow the instructions given here.
Step 2: Create a new space for work and a basic app
Here you need to develop an application based on an Angular workspace. If we have to define a workspace containing folders and files for one or more than one projects. While a project is a file setup that makes up an application or a library.
Follow the instructions to create a basic project on Angular.
Make sure that you are not already in an Angular workspace directory. For instance, if you are in the first stage Getting Started workspace, then go to its parent.
Then run, ng new followed by the app name as shown below.
ng new angular-tour-of-heroes
ng new will prompt you for information about functions and features to add to the initial project. Do not make any changes and accept all the defaults by clicking the ‘Return’ or ‘Enter’ key.
ng new also installs the important npm packages and other such Angular dependencies that the setup requires. This process might take a few minutes before further processing.
ng new creates the below-given workspace and early project files.
A brand new workspace along with a root directory represented as angular-tour-of-heroes
A skeleton app project in the subdirectory named src/app.
Related configuration files.
Serve the app
Navigate to the workspace directory and launch your app.
cd angular-tour-of-heroes
ng serve --open
The ng serve command:
Helps build the application
Opens the development server
Apply all the changes and rebuilds your app
Watches the source code
Whereas, the --open flag navigates you to a browser http://localhost:4200.
Angular Components
The Agular Component page demonstrates the application shell. And Application Component control application shell is named as AppComponet.
Components are the main part and act as building blocks of apps based on Angular. You can see the display of data on the screen, ask for user input, and take proper actions based on that. This Angular component will help you create a mobile app with a new style and design that will look attractive.
Step 3: Make changes to the app
Open your project in your favorite IDE or editor. Now go to the src/app directory to make changes to the starter application. In the editor or IDE locate all these files, which create an AppComponent that you just build.
Files & Details
app.component.ts : It is the component class code, which is written in TypeScript.
app.component.html : It is the component template, which is written in HTML.
app.component.css : It is the private CSS style of a component.
Note: When you run ng new Angular create test specifications for your newly created application. However, making these changes might break newly created specifications.
Now components you need to change are given below.
Change the title of an app
Navigate to the app.component.ts and change the title of an application to ‘My First App,’ or any other name that you prefer.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'My First App';
}
After this open the app.component.html file and delete the already created template created by ng new. Replace it with the below-given HTML code.
<h1>{{title}}</h1>
Add style to your app
A consistent design throughout an application is what most applications strive for. ng new create an empty CSS class which is style.css just for this. You can put your style there and give a unique design.
Open src/styles.css and write the below code to the file. You need to change the mobile app UI according to your preferences.
/* Application-wide Styles */
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
h2, h3 {
color: #444;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}
body {
margin: 2em;
}
body, input[type="text"], button {
color: #333;
font-family: Cambria, Georgia, serif;
}
button {
background-color: #eee;
border: none;
border-radius: 4px;
cursor: pointer;
color: black;
font-size: 1.2rem;
padding: 1rem;
margin-right: 1rem;
margin-bottom: 1rem;
margin-top: 1rem;
}
button:hover {
background-color: black;
color: white;
}
button:disabled {
background-color: #eee;
color: #aaa;
cursor: auto;
}
/* everywhere else */
* {
font-family: Arial, Helvetica, sans-serif;
}
Step 4: Final Code Review
Review your code and run your app to see the changes that you have made. This Angular-based app will help you build a web application for any platform including mobile, tablet, and desktop, you just need to adjust the screen size accordingly.
No comments:
Post a Comment