Angular, previously known as AngularJS, is a powerful JavaScript framework used for building modern single-page applications (SPAs) for web, mobile, and desktop platforms. Developed and maintained by Google, Angular is known for its efficiency, scalability, and ease of use. It is written in TypeScript and provides a robust set of tools and features for developing large-scale applications.
Prerequisites
To set up Angular on your local machine, ensure you have the following:
Install the Angular CLI
Angular CLI (Command Line Interface) is a tool for creating Angular projects, generating application and library code, and performing various development tasks. Install it globally using npm:
npm install -g @angular/cli
Create a Workspace and Initial Application
Develop your apps in the context of an Angular workspace, which contains the files for one or more projects. To create a new workspace and initial app project, run:
ng new my-app
The ng new command will prompt you for information about features to include in the initial app project. Accept defaults by pressing Enter/Return through the prompts. The CLI installs the necessary Angular npm packages and dependencies, and creates the following files:
Serve the Application
Angular includes a server to build and serve your app locally. To launch the server, navigate to the workspace folder (my-app) and run:
cd my-app ng serve --open
The ng serve command launches the server, watches your files, and rebuilds the app as changes are made. The --open option opens your browser to http://localhost:4200, displaying a welcome message.
Edit Your First Angular Component
Components are the fundamental building blocks of Angular applications. The initial app includes a root component named app-root. To edit this component, open ./src/app/app.component.ts and change the title property:
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Ogbonna Vitalis Welcome to Angular';
}
The browser reloads with the revised title. To style the component, open ./src/app/app.component.css and add:
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
Common Angular CLI Commands
Here are some commonly used Angular CLI commands:
Project Structure Explanation
An Angular project typically includes the following:
Common Errors and Troubleshooting
Congratulations on setting up your first Angular application! In the next tutorial, we will explore the Angular file structure in detail.
Next: Angular workspace and project file structureRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4