Angular

Angular is a great idea that allows me to create a scalable app through the concepts of modules. An overview file that simply says this whole bunch of code files in the project belong to this module.

At a high level, the definition of modules make it easy to just see how an entire web app works. For example a food app could just say:

Core Module — List down the very basic parts an app needs to work. This could be the code that leads to its top-navbar, a spinning loader, a place to send the user notifications through toast or popups, etc.

Profile Module — This will contain the code related to maintaining the user’s Profile.

Food Module — Contains the code for allowing the user to order food.

It’s organized and already defines certain roles. A team may be able to code multiple modules at the same time if the modules are designed to only rely on the core module.

Moving on, web developers can usually find it common to manage 3 types of files at the same time when creating something as simple as a sliding toggle nob.

You need an html file to create the element such as a div, a css file to style it, and a javascript file to handle the state of the nob whether it’s toggled on or off. Well.. Angular continues to help simplify web projects even further by bundling these three files together into a concept called a component. Now you can have a folder with these 3 files and just have them represented into a custom-made html tag like so:

btn-toggle.html + btn-toggle.css + btn-toggle.js

<btn-toggle></btn-toggle>

Once you’ve created a component in your angular app you then have the power to just use it like normal html and you get the bonus benefit of being able to clearly understand markup with custom tag names rather than a going through a dozen nested divs. What’s also really great is the encapsulation you get with the components too. If two team members had accidentally used the same css class name .btn for styling their button components without knowing about their own collision, the styles wont leak out of the component tags and mess up both buttons.

Now that you understand components, let’s go back to modules.. You can easily see how it is a great place to overview the components that belong to it.

Overviewing our App’s Core Module typescript file: core.module.ts

@NgModule({
  declarations: [ 
    BtnToggleComponent, // <-- we hypothesized this in this blog
    NavbarComponent,  
    SpinningLoadingComponent,
   ],
})
export class CoreModule { }

So what about the logic needed to do other duties for the app that need done without bundling a html or css file? Logic such as handling the user? Theres a lot of code with managing a user and most of the time you would like to know something about the user in your component so you can logically like do the right thing. The NavbarComponent for example may want to hide certain navigational items if the user is signed out or signed in.

Angular again continues to keep the web project organize by conceptually labeling these type of duties as services. Services help run the app in the background and are meant to be accessed by components or even other services themselves.

For example if you have created a UserService to know about the user.

user.service.ts

@Injectable({
  providedIn: ‘root’
})
export class UserService {
   isSignedIn = true;
   signInUser() {}
   signOutUser() {}
}

You can access this service in your navbar component by making sure the navbar component has the UserService listed in the NavbarClasse’s constructor as a dependency.

navbar.component.ts

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {
  constructor(
    // this class requires UserService before being created
    // e.g. new NavbarComponent(userService);
    private user: UserSerivce
  ) {
     // check if user is signed in..
     console.log(`User singed in?: ${this.user.isSignedIn}`);
  }
}

You’ll actually be surprised that when using Angular, you won’t every really have to manually initialize your components:

// No need to manually do this with Angular..
const userComponent = new UserService(),
const btnToggleComponent = new BtnToggleComponent(), 
const navbarComponent = new NavbarCompon(userComponent),
const spinningLoadingComponent = new SpinningLoadingComponent()

It’s pretty automatic with initializing your classes for you and knows where to assign them once they are created. NavbarComponent just gets UserService automatically. This is referred to as dependency injection and is really handy when it comes to asking for services in Angular. It is actually pretty common for multiple components to want to communicate to each other using a service as the middle man. On default (When you generate service files for your project through Angular’s CLI tool) Angular will only initializes the service once to make sure that it stays a singleton, so that the components in your project are all talking to the same service.

Modules, Components, and Services, these three concepts are my favorite part about Angular as they influence a huge factor of how the web project is architecturally designed. They make viewing a web project seem simple and scalable and after experiencing a project architecture such as this, it feels hard to want to code a web app any other way.

Aside from project architecture and scalability, Angular also provides a few other utility tools that make web development convenient. I’m not going to go into detail with code and will just highlight their use cases.

Utility Tools Used in a Component’s HTML file:

• Interpolation — Allows you to sync properties in a components class file directly on to the html file. Updating the property will reflect on the html file automatically.
• Property Bindings [⬇] — A way to link up javascript state to an html element which feels as simple as placing variables into the html tag’s attributes. Very useful for toggling or changing an elements css classes quickly.
• Event Binding (⬆) — A way to link up javascript expressions or call a component’s class methods when your chosen event is fired.
• Two Way Binding [( ↕ )] — A combination of property bindings and event bindings. It is more or less used by 2 components communicating to each other so that both their javascript/typescript classes have the ability to each keep a chosen property in sync with each other.
• Directives — A custom made attribute that is added to an html tag. It is just a single javascript/trypescript file (my-directive.directive.ts) that lets you manipulate the html element through scripting. Aside from getting to create your own javascript powered html properties, angular comes with a few handy ones out of the box, such as giving the ability to loop elements and use if statements to see if they can show up on the DOM or not.
• Pipes — Pipes are also a single javascript/typescript file (my-pipe.pipe.ts) that help transform values and can be useful if for example you have a lowercase string in you components class that is synced to an <h2> element and you need to titlecase it.

This is just a high level view at some of things angular does that help out with web development. There are a ton of other advanced features that it includes and I will in an even briefer statement try to highlight them so that you can get an overview of Angular’s capabilities as much as possible in this read.

Other Features to Note:

• Angular CLI — Helps generate files for Angular automatically.
• Route Guards — javascript/typescript file (my-guard.guard.ts) that hook on to Routing Events and approve or decline it based on app state.
• HttpClient & Interceptors API — Helps do Http and provides a place to hook on and intercept all http request done in the app.
• Forms API — Helps with Forms
• Dependency Injection Provider API — Helps with controlling Dependency Injection in the app.
• Animation API — Helps with animation.
• Angular Universal — Helps with SEO. Angular apps are Single Page Applications (SPA) that generate html after javascript is run, making it hard for crawlers to read html content.
• Progressive Web Apps in Angular — Angular has documentation and a service worker module to help with PWAs to enable web apps to have offline capabilities.

Thanks for reading and hope this helps you get a high level overview of Angular.