Angular, as you may know, is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS.
If you have never used this framework before, please read on as I share my experience creating my first Angular application.
The first thing I did was to install the Angular CLI (Command Line Interface). This was easily accomplished by entering npm install with the G flag for global and then @angular/cli.
Once installed we can use the CLI to create a new application. Running ng new followed by the name of your application will create a new application.
After hitting enter the CLI will display two prompts. The first will ask if you would like to use routing, I selected No. Next you can use the up and down arrows to select a type of stylesheet. I selected CSS.
After these prompts the CLI will install all the needed packages. You will notice that the CLI will also initialize a new git repo for you.
Next, I opened the project in an editor to see that I now had all the files and folders needed for my application. The first folder that I want to explore is the src folder. This folder is where all the source code for the application will live.
Inside the src folder I located the app folder. The app folder is where we will create our components. Components are the basic building blocks of Angular. The app.component.ts file is created by default. This Component has two main parts to it. The first part is a decorator. A decorator specifies that this is a component to Angular.
Inside the component decorator you will see that it has a selector, which is the HTML tag for it, a template URL, which is the path to the HTML file that it will use, and a style URLs array, which is the path to the CSS file.
To see how this all comes together we can look at index.html. We can see that the app-root selector is being used here inside of the body. That corresponds to the selector over in our app component.
Another file in this folder is app.component.html. This is the template that is used by Angular.
Inside this file you will see some default HTML. Included are a bunch of links designed to get you started. Let's look at this in a browser. First, we need to start the server. Entering ng serve will cause all the TypeScript to be compiled and run on a server on Port 4200. Be sure to check for any errors displayed in your terminal as it compiles.
Your browser should now display the content from the app.component.html file. There are some useful links on this page. The CLI documentation link for example will take you to a document that is a reference for all the commands for the Angular CLI.
The next steps will be to start customizing the HTML and adding some additional components. That will need to wait for another post.
Top comments (0)