Websites with Angular and Less CSS tutorials
4. Angular terminology and project structure
av_timer10 minute read

So do we like need a dictionary in order to be able to code now?

  1. Topics of discussion
  2. Angular terminology
  3. Project structure

1. Topics of discussion

In this tutorial, we will be taking a look at how an Angular app is organized, while also going through some definitions of some words we will be using a lot in these tutorials. So, let's have some fun.

2. Angular terminology

In the previous tutorial we learned what building and serving and Angular app means.

Building is the process that checks for any errors and if there are none, translates the files written in Typescript into Javascript so that the browser understands what you want from it.

Serving is the process of deploying your Angular app on your computer. By default, the application runs on port 4200, which means that, in order to access it, you need to open a browser and type in http://localhost:4200. Alternatively, you can call ng serve --open and it will automatically open in a browser if you have no coding errors.

Some of you might be wondering: what's a Typescript? Is it a script type? And on that note, what's a Javascript?

Typescript is a frontend scripting language, which is used to write code that can be translated into Javascript. Typescript can be loosely described in the following way:

  • it allows you to use Object Oriented Programming (or OOP) rules to write your code, making it easier to understand and also to write for that matter
  • in other words, you can organize your code into classes with attributes that describe an object of that certain class
  • basically, it allows you to separate your components based on their type, hence the name of the language
  • it also allows your methods to have those types as their return type

Some of you might be wondering why we need Javascript if Typescript is so cool. Well, web browsers (you know, Chrome, Firefox, Safari etc.) can't really understand Typescript. That's why Javascript is required and that's why we need that translation step from Typescript to Javascript when building our web app.

Javascript is also a scripting language, which was here way before Typescript was a thing. It was the first language used to write code for the frontend part of your website. There are many frameworks written in this language, such as ReactJSVueJSAngularJS (the first version of Angular, which is related to Angular 2+ in name only).

And since some of you may be new to this whole programming shtick, Object Oriented Programming is a programming paradigm that relies on using abstract representations of objects from real life. An abstract representation of an object is called a class and the object itself is an instance of that class.

Each and every class has a name associated and is described by two very important things:

  • attributes - the main characteristics of the object we have created an abstract representation of (think first name, last name, ssn for a Person class); these characteristics are stored in variables, which themselves have a certain type; more often than not though, variable types are limited to numbers or character string, with the odd class type variable here and there
  • behavior - what an object can do; this is done by adding various methods to the class; a method is a set of coding instructions that are executed once the method is invoked, or called

Instances are usually obtained in programming by using the new keyword. We will encounter such a scenario in our tutorials, so do not worry.

Moving on to Angular related keywords, some very common words in its vocabulary are:

  • component - a component is the building block of our application, more often than not associated to a page; it consists of a selector, a template and a style component; the selector is used to insert said component into an html page, in a similar fashion to other html elements (e.g. <app-navigation></app-navigation>); the template is the html code to be displayed when the component itself needs to be displayed and the style component is used to add certain styles to the elements in the component; components also have a Typescript file in which we write the logic for that component and are annotated with @Component
  • service - a service is used to process information in our app, be it to retrieve it from a file/server or to transform it in a certain way; services are utility classes which are annotated with @Service; each service has a certain logic which is written in its Typescript file
  • model - a model refers to the class concept mentioned earlier, meaning it is basically the abstraction of a real life object
  • module - a module is basically a package that contains one or more components; each Angular app has at least one module, which is used to initialize the whole application to use Angular in the first place
  • imports - during our tutorials you will notice that in each component there will be some import statements; import statements are used to allow us to use objects and services located in a different place than the one the component trying to use them is located in

We'll get into more details as tutorials go by, but for now, what you need to understand is that an Angular app is a collection of components and services that work together to form your lovely website.

3. Project structure

In our previous tutorial, we created our website. Now, it's time to open it in Visual Studio Code. For that, you need to open Visual Studio Code, go to File > Open Folder and select the folder in which you created the app (recipe-site if you followed the previous tutorial word for word).

In the left part of Visual Studio Code, you should have a window pane. If it's not there, try presing Ctrl + Shift + E. In it, you can see the folder structure for our project.

If you have built your application during the previous tutorial, the first thing you should see is a dist folder, which contains the resources for your application after the build. The next folder is the e2e folder, which contains files necessary for end-to-end testing of your app. Up next is node_modules which contains all the packages required for you to run an Angular app. They were automatically downloaded when we created the app. And finally, the folder we wil actually put our code in is the src folder.

Before we dive in to the src folder though, let's go through some of the files that are at the root level of your app (in the recipte-site folder to be exact). The tsconfig.json and tslint.json are of no interest at the moment. All you need to know about them is that they are used for the linting part of an application. The linting part is used for real-life apps to make sure that coding rules defined in these two files are respected in all your Typescript code.

The package.json file contains info regarding the versions of each package installed via npm. It's modified every time we install a new package ar remove/update an existing one. The package-lock.json file is generated each time the package.json file or node_modules folder is modified and it basically shows you what packages are installed in your application, in a tree structure. These files are rarely manually modified, so you don't need to worry about them too much.

The angular.json file however is the most important one of them all. In it, information regarding the different builds of your application are included. More often than not though, you will modify it in two places at most, both associated to the build part of our application. We will modify this file when we create our first component in about two tutorials time and we'll get into more details then.

Finally, let's move on to the src folder. As I've already mentioned, all your code will go in this folder. More specifically, it will go under the src/app path. If you navigate to the app folder, you can actually see that there are already some files generated there. We have the routing module defined in the app-routing.module.ts file, which is used to create different routes in our application. We then have 4 files associated to a component:

  • app.component.ts - this one right here contains the logic for the component
  • app.component.spec.ts - this one is used for unit testing, which is out of scope for this course
  • app.component.html - this one contains the template for the component; in other words, what you put in this file is what will be displayed in the browser when this component is placed in a page
  • app.component.less - the style sheet file for the component

And finally, we have the app.module.ts file, which creates a module called AppModule, which just so happens to be the main module for our application. Let's look at this file for a bit:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

As you can see, the file starts with some import statements. After that, we annotate the class with @NgModule which tells Angular that we are creating a module. Inside our @NgModule area, we have some variables:

  • declarations - this is where we tell Angular which components are part of our module
  • imports - this is where we tell Angular what other modules our module needs in order to function properly
  • providers - any and all services will be put here
  • exports - this is where we tell Angular what components from the module are to be made public, meaning if you forget to put your component here, you will not be able to use it in an html page

The AppComponent component is defined in the app.component.ts file:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {
  title = 'recipe-site';
}

As you can see, we also import something at first. Then, we have the @Component annotation, which tells Angular that we are defining a component. Inside the @Component area, we have the following things:

  • selector - the html selector used to insert this component in a page
  • templateUrl - the path to the html file for this component; it uses a relative path to access it; a relative path can be written either like ./path, which tells Angular to look in the same folder that the .ts file is located in, or by using ../path, which tells Angular to first move up a level and then look for the path; you can move up as many levels as you want
  • styleUrls - an array of paths to less files associated to this component; more often than not, a single file is required

You may have noticed that both the module and the component have an export class ClassName like declaration. The export keyword is there to tell Angular that the class in question is exposed to other modules, meaning it can be referenced in other places. Without that export keyword, it would cause an error.

The html and less files are standard ones and we will get into more details when we actually edit some of them.

In the src folder we also have the assets folder, which is generally used to store static files such as images for your site. And finally, the environments folder stores some info regarding different environments. While a tad out of scope for this course, this folder can be useful in large applications for defining certain rules for certain stages of the app (i.e. development, staging, beta-testing etc.).

Finally, let's go over the remaining files in the src folder:

  • browserlist - a file that contains CSS rules for browsers
  • favicon.ico - the image that appears next to the website name in your browser tab; it can be replaced and we'll get to that further down the line
  • index.html - the main page of your application and the only place where you actually define the required html tags you see when you open the page; as you can see, by default it already has the <app-root></app-root> element in there which is used to display our AppComponent component; this file is generated after every build to include the generated JS files using <script></script> tags; you can check the index.html file from the dist folder to see the difference
  • karma.conf.js - if my memory serves me correctly, this file is used in the unit testing process as well
  • main.ts - this is the place where Angular is bootstraped to our application by using the AppModule defined earlier
  • polyfills.ts - a file used for brower compatibility, out of scope for this course
  • styles.less - global styles can be put here
  • test.ts - used for testing, out of scope for the course
  • the remaining tsconfig and tslint files - they actually import some information from the other tsconfig and tslint files and add a few more details

And with that, we finally conclude this tutorial. In the next one, we are going to discuss the concept of single page applications in more details as we prepare ourselves to start coding. See you then.

COMMENTS
No comments yet...