Convert HTML website to Angular project

If you are a front-end developer, chances are you have at least one portfolio made only with the basics: HTML, CSS and JavaScript. No framework usage. In my experience, every successful developer should first learn the basics and make sure they're good at understanding and applying that knowledge. When you reach a certain stage, using some kind of framework in your projects will make sense and the urge to do so will come naturally.  

Photo by Tudor Baciu at Unsplash

 

What might be the reason to start using JavaScript framework?

There could be numerous reasons, depending on what your project is about, what are your plans as a developer, or needs of a client. For example, I have built my portfolio just to showcase my work and to put my developer profile on the market. There was no need to use any kind of framework for that. However, later on I started getting ideas on how to improve my portfolio. I started thinking about other things I could add on my website, and in that way present my abilities as a developer.

More specifically, I decided that I would like my portfolio to show my GitHub repositories on a page that already displays some of my work. This was a perfect opportunity to work with and learn more about API integration, and at the same time polish my front-end development skills. 

 

Photo by Caspar Camille Rubin at Unsplash

 

I took some time to research the GitHub API and what are the basics I need to implement in order to pull the repository data from the GitHub server (There will be separate post about GitHub API integration steps on my blog). 

As I was creating new files for authentication and configuration, I realized that I don't want to continue working on this project without a framework. I decided to use Angular. 

 

Photo by Dakota Roos at Unsplash
 

As soon as your project starts growing, you have to think about project structure, where to put each files, how to name them, how everything will look like to you and will it be easier to maintain the project in the future. That's when the framework steps in because, among other things, it provides you with a basic setup, structure and documented guidelines and coding standards that make development and maintenance easier. 

Angular official documentation can be found here. Keep this tab opened, as you will need it throughout setting and developing your Angular application.

Photo by Shahadat Rahman at Unsplash
 

Another reason that got me going into the direction of switching to Angular project is HTML content. Once I made the authentication to GitHub API and pulled data, I quickly realized that there will be too much of the content that repeats, specifically HTML content. 

As you grow as a developer, you learn about the DRY (Don't repeat yourself) principle. With these thoughts in my mind, I knew it was time to put Angular to use. Why? Because Angular let's you create components that you can use multiple times throughout your application, so called "reusable components". This is a better setup then having to write the same HTML over and over, because it is more clean, readable and best of all, easier to maintain. 

 

So, if you're wondering about adding framework to your project, don't be afraid to start. Think about the benefits:

1. Clean project structure
2. Less code
3. Easier maintenance
4. Better quality of development 
5. More time for brainstorming

 

Photo by Tim Mossholder at Unsplash

Steps for adding Angular to your project

Prerequisites: Node.js, favorite editor, knowledge of basics and willingness to try.

When making any larger changes to your project, it's always a good idea to work on the copy of the projet, leaving your original files intact. If you're using versioning tools such as Git, you're good to go with a new branch. I have setup my Angular project on a new Git repository and started adding my code to it step by step. That way it was easier for me to fix any errors that came along during the build time.

Now, let's start understanding the process and the steps: 

1. Install Angular CLI 

First, you want to install the Angular CLI from the Command Prompt, because that's the interface you will be using for initializing, developing and maintaining your Angular project.  

npm install -g @angular/cli 

You will be prompted to choose between options during the installation. Follow the setup and wait for the Angular dependencies to be installed. 

2. Run your application

To build and run the application, simply type command  

npm start

After building the project, you will see it in the browser under 

localhost:4200

3. Brainstorm and organize your existing files into Angular structure

This is the fun part. During this step, you have to look at your code and decide which part will belong to which component. You will start seeing your project through components, and don't worry if you realize there will be more of them. Have in mind MVP (Minimal viable product scenario). Think about what's the most important feature of your project, and start from there. If you create only 2 or 3 components at the beginning, it is totally fine to work and build up on that.

As mentioned earlier in this post, Angular documentation and guidelines will help you in setting up your project, so make sure you have it constantly opened and follow the procedure.

4. Create your first component 

Now that you know what is the content of your component, go ahead and create a new component under path src/app/components:

ng generate component first-component

You can also use short command

ng g c first-component

Both ways will create a folder with 4 component files: 

1. Typescript (.ts) that holds application logic and data
2. CSS for styling component
3. A spec.ts used for unit testing 
4. HTML for displaying the component

In the beginning of understanding Angular, you can focus on .ts and html files. 

4. Add appropriate code to your component

Now, you take from your "old" project some HTML block and put it in the html file of your new Angular component. If there are no errors in your terminal, you should see your content displayed in the browser. 

Congratulations, you have your first Angular component doing the work :)

5. Extract data from html

This step depends on what kind of content you have in your html file. But, if you are displaying elements that are of the same type, for example a list of books, you could extract the information about the book and put it in your ts file. Then, with the power of Angular, you can pull the information from a ts file and display it in html.The behavior would be the same as before, except now you have less HTML and your code is cleaner and your project easier to maintain.

To learn more about this step, please refer to my post about minimizing HTML. 

 

Conclusion

While going through these steps, I was happy with the decision to add Angular framework to my project. Since then, any feature I work on is easier to implement, and the biggest plus is the huge Angular knowledge-base and documentation with examples that help you move forward in development. 

I hope you will find this content useful. If you have any questions or need help with your application, post your comment below.