Angular is used to create scalable web apps with dynamic content that changes based on a user's interactions.
Angular is a development platform and a framework.
A development platform provides a range of built-in tools to help us write, preview and deploy our projects.
A framework is a structure you can build on top of and customize.
This means you can code much faster and focus on what makes your app unique.
We will build on our knowledge of HTML, CSS and TypeScript to create dynamic and scalable Angular web apps!
HTML: User Interface
CSS: Style
TypeScript: Logic
The big benefits of Angular are:
You can build anything, from simple apps to larger systems.
You can build faster and with fewer errors, thanks to its tools.
Angular is actively maintained and has a large community.
Angular was created by Google and is used by thousands of successful brands from Xbox to HBO to BMW.
Setting up
The first step of the setup is to install the Angular CLI (command-line interface), which is used to perform various Angular operations such as creating and running apps, testing and deploying.
npm install -g @angular/cli
To create a new Angular app, we need to use the command ng new and provide the name of our new app. This creates all the necessary files and folders for an Angular app.
ng new photoLocation
To run the app and launch it in a browser, you need to navigate to the newly created project folder and run ng serve --open
cd photoLocation
ng serve --open
File structure
Angular projects are made of different files.
The source file resides in the src/ subfolder.
index.html is the main html of the app.
main.ts is the entry point of our app and runs when our app is launched.
style.css is the main CSS file, which includes the style of our app.
The app folder includes app.component.ts and app.component.html file. They represent the root component of our project.
That's all on the set up and the file structure. In the next article on this series, I'll be looking into the Angular basics in details.