Angular – basic project structure

Angulr is cookies and cream!

Angular is really structured compared to vanilla JavaScript. It follows a component-based architecture, which makes it easier to build complex applications by breaking them down into smaller, more manageable pieces.

It’s worth mentioning that Angular is not a replacement for JavaScript, but rather a framework built on top of JavaScript. JavaScript is a programming language that is used to create dynamic and interactive web applications, while Angular is a framework that provides a set of tools and abstractions to make it easier to build web applications with JavaScript.

NOTE: So, if a regular JavaScript is vanilla (which is how we call the basic JS without any frameworks), then Angular would be Cookies & Cream.

Angular provides many benefits over vanilla JavaScript, such as:

1. Component-based Architecture: As mentioned earlier, Angular’s component-based architecture makes it easier to build complex applications by breaking them down into smaller, reusable components.
2. Dependency Injection: Angular provides a powerful dependency injection system, which makes it easy to manage dependencies between components and services.
3. Two-Way Data Binding: Angular’s two-way data binding allows changes to the data in the model to be reflected in the view, and vice versa, without the need for manual updates.
4. Template Syntax: Angular’s template syntax provides a powerful way to create dynamic and interactive UIs, with features like conditionals, loops, and event binding.
5. TypeScript Integration: Angular is built with TypeScript, a superset of JavaScript that adds features like static typing, interfaces, and classes. This makes it easier to write more robust and maintainable code.

NOTE: Doesn't it sound a lot like Java? I like to think that Angular is the most Java-like framework for frontend. Its structure is really giving me Java packages vibe and I find it easier to work with it than vanilla JS.

---

Auto-generated structure

When you create a new Angular project with the command ng new my-project-name, the Angular CLI generates a basic project structure for you. , which includes the following files and folders:

• package.json: This file contains the dependencies and configuration information for your project. It is used by npm to install the required packages for your project.
• src: This folder that you should really be interested in. It contains the source files for your project, including the HTML templates, TypeScript code, stylesheets, and other assets.
  • app: This folder contains the main module and components for your application.
    • app.module.ts: This file defines the AppModule, which is the root module of your application.
    • app.component.ts: This file defines the AppComponent, which is the root component of your application.
    • app.component.css: This file contains the styles for the AppComponent.
    • app.component.html: This file contains the template for the AppComponent.
• index.html: This is the main HTML file for your application, and it contains the <app-root> tag, which is the root component of your application.
• assets: This folder contains static assets like images, fonts, and other files that your application may need.
• environments: This folder contains environment-specific configuration files for your application.
• main.ts: This file is the entry point of your application, and it bootstraps the AppModule.
• styles.css: This file contains global styles that apply to all components in your application.
• angular.json: This file contains configuration information for the Angular CLI, like the project’s build options and the list of assets to be included in the build.

Once you have the basic project structure, you can start adding more components, services, modules, and other files as needed to meet the requirements of your application.

---

App Module – the root of it all

In Angular, the AppModule is the root module of your application, and it’s where you configure your application and define the components, services, and other modules that your application will use. Here are some of the key features of the AppModule:

• Importing Dependencies: In the AppModule, you import any dependencies that your application will need, such as the BrowserModule, HttpClientModule, or FormsModule. These dependencies provide features like HTTP communication, form handling, and browser-specific functionality.
• Declaring Components: In the AppModule, you declare the components that your application will use. These components will be available throughout your application, and you can use them in other components or templates.
• Defining Services: In the AppModule, you define the services that your application will use. Services provide functionality that can be shared across multiple components, and they can be injected into components as dependencies.
• Bootstrapping: In the AppModule, you use the bootstrap method to tell Angular which component should be the root component of your application. This component will be the first component that is loaded when your application starts.
• Configuration: In the AppModule, you can provide configuration information for your application, such as default settings or API endpoints. You can use the forRoot method to provide configuration information to your application.
• Lazy Loading: In the AppModule, you can configure lazy loading for your application. Lazy loading allows you to load modules and components on demand, which can improve the performance of your application.

Just after creation, your app.module.ts should look like this:

//all the dependencies (usually added automatically)
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

//content import
import { AppComponent } from './app.component';

//the decorator (you know, "the @ annotation")
@NgModule({

//all the components, directives, and pipes that belong to this module
  declarations: [
    AppComponent
  ],

//modules that this module depends on
  imports: [
    BrowserModule
  ],

//services that belong to this module
  providers: [],

//components that are used to bootstrap the application
  bootstrap: [AppComponent]
})

//export statement to make the AppModule class available for other parts of the application
export class AppModule { }

---

Overall, the AppModule is the heart of your Angular application, and it provides a centralised place to configure your application and define the components and services that your application will use.

Components – your first Lego

Components are the basic building blocks of an Angular application. Each component consists of a TypeScript class and an HTML template. The class defines the component’s properties and behavior, while the template defines the component’s structure and appearance.

Angular follows a component-based architecture, which means that you can break your application down into small, reusable blocks od code and components are the basic ones.

Angular allows you to style your components using CSS. You can either define styles in a separate CSS file, or use inline styles within the component’s metadata.

Angular provides a robust testing framework that allows you to test your components in isolation or in the context of your application. You can write unit tests, integration tests, and end-to-end tests for your components to ensure that they are working as expected.

---

Creating a component with CLI

Once you have created a new Angular project using the ng new my-project-name command, you can start creating your project structure by adding components to the src/app directory.

Component names should be written in PascalCase and should describe the component’s function or purpose. For example, if you have a component that displays a list of products, you might name it ProductListComponent.

Go the the directory where you want to create your block and type the command “ng generate component name-of-the-component” in terminal. Write the name with small letters and dashes, it will be converted to the standard convention.

ng generate component my-component

The Angular CLI will generate a new directory for your component, with three files inside: a TypeScript file (.component.ts), an HTML file (.component.html), and a CSS file (.component.css).

Each component in Angular has the @Component decorator. The decorator includes metadata about the component, such as the selector (the name of the component), the template URL (the location of the HTML template), and the style URLs (the location of the CSS styles for the component).

NOTE: Decorator is an Angular way of calling an annotation. And if you create a component with CLI, it will be added automatically.

---

Advanced Component features

There are some more advanced component features that we will talk about later but they are still worth a quick mention right now:

• Component Communication: Components can communicate with each other in Angular using inputs and outputs. Inputs are properties that a parent component passes down to a child component, while outputs are events that a child component emits to notify its parent component of some action. We will learn about them later.

• Component Lifecycle Hooks: Angular provides a set of lifecycle hooks that allow you to hook into the component’s lifecycle events, such as when the component is created, updated, or destroyed. You can use these hooks to perform tasks like initialising data, updating the UI, or cleaning up resources.

• Component Directives: Directives are a type of component that allows you to add behaviour to elements in the DOM. There are two types of directives in Angular: attribute directives and structural directives. Attribute directives modify the behaviour or appearance of an element, while structural directives modify the structure of the DOM.

---

Examples of components in Angular

Usually, Angular apps create components based on the placement on the website (the more static ones IMHO) and based on the function. Here are some examples of the most common components that you can see in Angular apps:

• Header Component: This component typically contains the site logo or name, navigation menu, and other branding or site-wide information.
• Footer Component: This component is usually located at the bottom of the page and contains links to important pages, copyright information, and other footer content.
• Home Component: This component represents the landing page of your application, which provides an overview of your application’s main features and functionality.
• Login/Registration Component: This component allows users to log in to your application using their credentials.
• User Profile Component: This component allows users to view and manage their profile information, such as their name, email address, and password.
• Search Component: This component provides a search box or form that users can use to search for content within your application.

Obviously, there may be countless others and it only depends on the dev what structures they go with to create the app that suits them best.

I’ve created 4 components in my app: header, footer, sidebar and home. This is my structure so far.

Each component has its own package with 4 files inside: the .css file (for styling), the .html file (for exposing your component in the browser), the .spec.ts file (for testing) and the .ts file with all the TypeScript logic (this is where the magic happens).

All the created components were added automatically to the app.module.ts as “declarations”.

---

Displaying components in app.component.html

To display your components in your HTML, you need to add their selectors to the app.component.html. Why not index.html which is the first page any browser loads? Because it’s body is just the redirection to the app component:

<!-- This is the body part of the index.html file -->
<body>
  <app-root></app-root>
</body>

In the app.component.html file add all the selectors in the places you want them. I want my header up high, then my home and sidebar one by one in two columns, and the footer underneath. I needed to change both my html and my css files:

app.component.html:

<app-header></app-header>
<div class="row">
  <div class="column-1">
    <app-home></app-home>
  </div>
  <div class="column-2">
    <app-sidebar></app-sidebar>
  </div>
</div>
<app-footer></app-footer>

app.component.css:

/* There is a simpler way of creating this look with two floating columns but somehow it didn't work for me. */

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.column-1 {
  flex-basis: 80%;
}

.column-2 {
  flex-basis: 20%;
}

---

That’s it for today. We’ve got a lot covered. I hope you made it here without any hiccups and created your own test app that works fine.

Next time, we’ll do the routing which is a total game changer when it comes to Angular apps.

/*
Until next time,
stay positive (like unsigned integer) and keep coding!
eMs
*/