Angular in layman’s terms – Components, services and modules

In this article, we’re gonna take a look at Angular, the front end framework that we’re gonna use in a project.

Angular itself is a Web Application Framework. It’s a front end that will help you write the HTML and JavaScript that your users are gonna see and interact with.
It used to be called AngularJS, now it’s just called Angular, which you’ll find is that if you are looking at documentation. If you are referring to Angular 1, usually it’s considered AngularJS and Angular 2 and now Angular 4, they skipped 3, is called just Angular.

angularjs

You’ll find all of Angular at https://angular.io. It’s a great resource which offers walkthroughs, guides, documentation and lots of good stuff.

Angular itself uses HTML and it uses a flavor of Javascript called Typescript.
It has all of the JavaScript that there is and more. It has a bunch of type checking and syntax trigger on top of JavaScript to make it easier to write code.
So you’ll find when we get into this that it makes validating against models and determining what fields are in a particular method or class are really easy.

Angular itself is considered an all in one framework and this just refers to the fact that it has all of the things necessary to build an application in it. It has HTTP handlers, it can make web request, it can do animations, it can go ahead and do models, it can do the view rendering and dynamic lists and things like that.

So, it’s everything in one, where with other frameworks like say, React, you may need to pull in a bunch of other tools to get a bunch of common stuff done.
In general, you’ll get Angular through NPM (Note Package Manager).
And then another great way to start with Angular is to also have a command line interface that lets you ignore all the build process stuff with Angular, which could be a little bit onerous and just get straight to writing an application. So I do recommend if you’re starting a new Angular project to take a look at the CLI as well.

So how do we build an Angular app?
So Angular itself is usually made up of three main parts:  components, services, and then modules.

suggestions.png

Components:

So a component is what the user sees and interacts with. All right, so that’s the HTML, the code behind, the TypeScript that actually runs the view, and then the CSS that gives the style to the HTML.
And so components use templated HTML, which you can see here is things like {user.firstName}. It’s in this curly braces and that tells Angular that I want to bind to a variable that is in my code behind. And I want to pull out a user’s first name and I want you to inject that here inside of my HTML. And angular, we’ll go ahead and it has a binding engine that will, at runtime, watch that variable, update the {user.firstName and the {user.lastName} property in the DOM, and that will be constantly updated any time that the value changes behind the scenes.

And so it’ll wire all of this together along with the CSS and give you a cohesive HTML rendered to the screen. And so those three parts together are what make a component.
And component could be any view, it can be particular piece of functionality in a view, components themselves can contain components.
It allows for a lot of flexibility to build a really complicated layout.

angular2-typescript-emmet_digepq.gif

Services:

These are the business logic, the complex code that runs throughout, that gives your app that true purpose. You would store data, you would perform functions, arithmetic, business processes and this is where you’re gonna keep all of that logic.
You wanna keep it out of your components and keep it here in your services and then all of your components should do would be to call into a bunch of these services to do their work.
Services themselves are singletons, so each service, there’s only ever one copy of it.
In Angular, we’ll keep track of all of the copies for you. It has a dependency injection engine, and so we can request, as you see here in this example, such as the HTTP service.
And so this service will get injected into this other service and that way we can use it anytime we want.

The DI really helps you decouple your pieces of your applications, so that each one of them is loosely tied to any other piece.

Screen-Shot-2014-03-16-at-6.53.05-PM.pngSo that allows you a lot of flexibility when you’re building replications, so you don’t get bugged down with a bunch of spaghetti code.

Module:

Code2.pngA module is just a grouping of code, of light code that serves a common purpose.
And this is whatever you deem is a good module. So usually I have a common module with things that are used throughout the application across a whole breadth of components or maybe I’ve got components that are reused a lot of different places and a lot of different views. What I’ll do is I’ll wrap all of those up into a single common module that I will use throughout my application.

And so a module will contain a grouping of components and services that will describe what they are and how they work and how angular can use them and it will allow them to be used in other modules as well.
Each angular application has to have at least one module, usually the root modulus called the app module.

Angular-2-module.png

And that’s what will actually get started when you start your application.

The Application

The app will have a router to deal with the URL parameters. You pass on a route as you use a navigate to and from different parts of your application. Angular also has a bunch of animation frameworks underneath. It also contains the templating engine.

This is the HTML template that curly braces the bindings, the relaying of inputs from search boxes and relaying that into your controllers and components.

It also exposes a bunch of Lifecycle events for creating a new component or deleting a component or something has changed in the DOM and allows you to react to all sorts of events key ups, key downs things like that, so that you can access all of those interactions that you may have with your user.

And the last part it also has in the framework here is Http Networking.
So obviously you can make your URL requests, get data, pass it, deal with JSON manipulation, that kind of thing.

All that is all handled in the Angular Framework.

And so this has just been a really quick summary of the basic building blocks of Angular.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.