In our profession, precision and perfection are not a dispensable luxury, but a simple necessity. - Niklaus Wirth
This is the second article in the series of Demystifying Angular. You can read first article at here.
In this article, we are going to understand the scaffold directory structure of the created angular application. We'll not do a deep dive but understand to go a step further. We'll also do some modification in the application by understanding the homepage content, from where it is coming.
Let’s open the created
my-app application in your favorite text-editor. For me, it is Sublime Text 3. Here, is the command to open
my-app application folder in Sublime Text 3.
$ subl .
If you are using any other text-editor then you should know how to open given project/folder using command from terminal. If you don’t know of your favorite text-editor does not have a registered command, then you might need to think about your current text-editor.
There are three folders you are currently seeing in left/right project bar in text-editor (if you are seeing .git, please ignore, it is for git).
e2e is a folder that contains code for end-to-end testing. That’s why it is named
e2e or end-to-end testing. For now we are not going to open/touch this folder. Let’s assume that it will not cause any problem in our development and it is here to stay for good. But, if somebody tells you that what is this
e2e folder, tell them it's for testing the application.
node_modules is a folder that contains your application’s dependencies. He is your friend in crime who is responsible for handling all the badly needed but dangerous things. Your angular application is depend on TypeScript compiler. This TypeScript compiler is in this folder. Your application is depend on Babel. This Babel transpiler is in this folder. I would suggest that you do not touch this folder. It is there for you to support your project’s dependency.
src is the project in which your application’s code is live.
Other than these folders, you get half dozen of config files that is needed for your project so that if other developers involved in the project, they can build the local environment on their computers without any problems!
If you go inside of
src folder, you will get a few more folders and couple of files. All these are important and needed for your project to run properly. For example,
polyfills.ts is used to support older browsers or functionalities which are new and still not supported by modern browsers.
main.ts is the entry point of your application from where you compilation bootstrapped.
style.css is the file that contains all the styles that is common to the whole application. If you want to apply font color to your whole application, you can put it here in
style.css and it will be applied to all the pages of web application.
app is the folder that contains all your application’s logic. If you go inside of this folder, you will see a couple of files contains
.component.ts and so on.
app.module.ts is the file that is going to be executed when you compile your project. This file is responsible for connecting all remaining files.
In the next article, I’ll reveal the magic and let you know that nothing is magic in Angular. Angular is a nice guy and he is here with us to make our journey of development simple. But because of these so many scaffold files, we are afraid and considering him as bad big guy. That’s wrong perception! Please stay with me, we will touch some interesting things about angular in future article. But, this article does not end here. Let’s do some change in created application for the sake of becoming friends with angular.
Angular thinks in “component”. Now, what is component? I’ll talk about the components in future sessions but you need to remember that components are special in angular. You can create as many as you want components using angular
cli. The command to create a component is -
$ ng generate component name-of-component
Let’s say I’m working on CRM system and I want to build an
opportunity component. In this case, I can easily create by -
$ ng generate component opportunity
$ ng g c opportunity
g is alias for
c is alias for
component. Now, it is your turn. Can you please create a component for callback, quote and trouble tickets?
Okay, so you have created components for mentioned modules but you will not see these on http://localhost:4200 location. Because although you have created these components but you haven’t registered them! In order to register them you need to write a couple of lines of code but before that, can you please tell me from where the content of this homepage is coming? It is coming from
app.component.html page. Let’s assume for now, in future I’ll tell you how I know homepage content is coming from this file. What I want from you is, delete all the code available on this page and just write -
Now, go to the browser where you have opened http://localhost:4200. You do not need to reload this page, it will automatically do for you. And here you will see the header we just wrote on page.
So, in this article, we understand the basic directory structure and do a little modification in the application. We’re slowly going further in learning Angular.