Angular: First Steps
First steps into the exciting world of Angular. One of the most sought-after JavaScript frameworks by companies for creating web applications.
- Date
Greetings everyone, in today’s post, I’ll be starting a new series of publications about web development with Angular. Some of you who are not so familiar with the topic might be wondering, what is Angular?
Angular is an MVC (Model-View-Controller) framework developed by Google in late 2016 using Typescript, a superset of JavaScript. Its main purpose is to create SPAs (Single Page Applications). Other similar frameworks include React and Vue.
SPAs are single-page applications, meaning navigation between different sections of the site is done dynamically, instantly, and without refreshing the page in the browser at any point. These features have led to an increased use of SPAs in recent years.
How to Get Started?
To start using Angular on our computers, we need to have at least Node.js version 8.x or higher and npm version 5.x or higher installed.
To check if you have these versions, open the terminal/console on Windows and type the following commands:
$ node -v
$ npm -v
If you have an older version, you can download the new version of Node.js and npm.
Once we have these requirements met, we can proceed with installing the Angular CLI (Command Line Interface). This CLI will greatly assist us in creating different elements of our Angular application. To do this, run the command:
$ npm install -g angular/cli
Great, now we are ready to create our project.
Creating Our First Project
To generate a new project, run the following command:
$ ng new firstProject
By using the “ng new” command followed by the name you want to give your project (in this case, “firstProject”), the Angular CLI will take care of installing dependencies and generating the necessary files for your new project.
Once the above command finishes executing, we will have our web application created.
Launching the Project on a Web Server
At this point, we will have a directory named “firstProject” that was created in the previous step. Navigate into the directory:
$ cd firstProject
Once inside the directory, to launch the server and be able to see our application in the browser, run:
$ ng serve --open
The “ng serve” command deploys a server on port 4200 by default, and the “—open” parameter will open a browser window where we can see our application running for the first time.
This image should appear in your browser if you’ve followed the previous steps correctly. It’s the main component that Angular provides by default.
In the next post of this series, I will explain the directory structure and make modifications to the main component.
Best regards to all, and see you next time! 😃
