Today in this tutorial we will have a look at the basic flow of angular default app. Before reading this article i recommend you to watch previous article of this topic. Now to understand the flow, let's first have a look at the angular.json of our application from the figure below:
So, what is this file all about, you may ask? well, this file is all about the configuaration and settings related stuffs for our angular project. we can skip about configuration files for now, what we need to care here is about the assets, styles and scripts values inside this file. well, assets are the static contents that we need in our project. similarly, styles and scripts is an array of path of style(css) and script(js) respectively. so whatever assets, or stylesheet or javascript files we have, all needs to be declared here. we will see it in later part of this tutorial but for now let us move on.
Now, you may ask, if we ever want to use any static files (e.g images, js ,css etc) where should we keep it ? well, all of these files needs to be placed inside the assets folder as shown in figure below. and then we will provide these locations inside angular.json file as discussed above.
Now, moving on lets start the flow of angular app. So, where do we start with? well, our angular app begins with index.html file as shown below. As shown in figure below clearly we can see the html template like structure with some other elements like <base href="/"> and <app-root></app-root>. If you know basic html then you already figured out that the only difference here is these two lines. So, what are they?. The first one i.e <base href="/"> is required for routing, (remember we have enabled routing during the setup of our project. ).
The next and important thing we have here is <app-root></app-root>. this is nothing but the component or the place for default component named app.component. So whatever we write in app.component is displayed in this place. So, where is this app.component? well navigate to app folder there we can find 4 files related to app.component. these are: app.component.html, app.component.ts, app.component.css ,app.component.spec.ts. Here, app.component.spec.ts file is for testing purpose which we will skip for now. the next we have is app.component.html which is the place to write our html content. similarly app.component.css is the place for writing css files for those required in app.component.html. whereas the last one app.component.ts is a typescript file where we write typescript code for this component.
Lets have a look at these files. First lets have a look at app.component.ts file which is shown below:
The things we need to have a look at this file is that we have a class called AppComponent and inside it a variable title is initialized to 'my-first-app'. Now let's have a look at another file app.component.html whch is shown below:
Here, all the text are just a normal html elements except the highlighted text . Clearly we can see that title is within the two curly braces. This is called interpolation. i.e whatever the value we have for a variable title in app.component.ts file, that will be displayed here. now after serving this application in browser the following output can be seen.
In above image 'my-first-app' came from the .ts file that we discussed above. this is the basic flow in angular application. we will continue with other topics in the next part so stay tuned. and do comment about this article in the comment section below.
