Starting with Angular
Version 9.0.4
Hello Everyone!!
Let’s learn some Angular today!
What is Angular?
In simple terms, Angular is a web development framework for building single page web applications with typescript. Angular by itself is written in typescript and maintained by Google and a community of open source developers. Okay hold on a minute! Isn’t it supposed to be AngularJS and uses JavaScript for development? It was AngularJS when Google first released it in 2010. As it gained more attention the pitfalls in the JS framework of Angular got it undermined when compared to its competitors like React and Vue JS. So, Google went for a complete rewrite of the framework to TypeScript (A superset of JavaScript) and called it Angular from version 2+.
The current version
The current version of Angular is v9.0.4.
All versions from Angular 2 are backward compatible. Due to it’s increasing usage Google pledged to release two new versions of Angular every year with new features. The first update for this year Angular 9 was released a few days back and it has some pretty hot performance improvements. You can check out all about it in the link below.
https://blog.angular.io/version-9-of-angular-now-available-project-ivy-has-arrived-23c97b63cfa3
But if you are just starting with Angular it would be pretty confusing to understand. So let’s start with the basic concepts of Angular by creating your very own Angular web application.
Installing dependencies
First things first. Lets install all the dependencies that are required to run your application.
Node.js and npm
Node.js is a runtime environment which is used to host your Angular application on your local system. (Node.js by itself is a wide area of learning, in this article we will refer to Node.js only in Angular perspective). Npm or Node Package Manager is the default package manager for Node.js. It is used to install dependencies with it’s wide variety of libraries. The latest version of Node.js is 12.16.1 which also includes npm with version 6.13.4 (before this version we have to install NPM and Node.js separately). You can download and install Node.js from their official webpage
Download | Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
After installation run the following commands in your command prompt/terminal to ensure both Node.js and npm are installed properly
node -v -For Node.js
npm version -For npm
Both commands should return the installed version numbers.
IDE
I’m going to use Visual Studio code as my IDE for this article. You are free to use any IDE you desire but I prefer VS code because of it’s quick start up and lightweight (and of course the dark theme :P). You can download VS code from the below link
https://code.visualstudio.com/?wt.mc_id=vscom_downloads
Installing Angular CLI
Once you have verified the npm installation, you can install Angular CLI which lets you run commands for creating and manipulating Angular from your command prompt. This setup will save you tons of time rather than manually creating the files in IDE. Run the following command to install Angular CLI
npm install -g @angular/cli
Verify your installation by running the following command
ng --version
If you see a screen as in the image below, you have successfully installed Angular 9!
Creating your first Angular application
Creating an Angular application is as simple as running the below command in a desired folder
ng new my-first-angular-application
You can give any desired name instead of ‘my-first-angular-application’. After you run the command it will prompt you whether to add Angular routing give ‘y’ as the answer and for the style sheet you can select your convenient style sheet but I recommend using SCSS because of its ability to declare variables and import from other style sheets.
After you select the stylesheet, the Angular cli will create the necessary files and install dependencies. Once it is finished, navigate to your application folder via file explorer and copy the path to open it in VS code.
The Application structure
Open Visual studio code (or your IDE) and select File -> Open Folder. In the popup navigate to your application path or paste the copied path and click open. You should see the following structure
Now we can look into some main concepts of an Angular application that every developer should be aware of.
package.json
package.json is like a blueprint of your application which includes all the mandatory and supporting set of packages needed for an Angular application to run. Your starter package.json looks like the below
“scripts” are self definitive as you can see, if you run the command “npm *command*” it will access the scripts from package.json and maps the *command* with the list in the scripts.
“dependencies” are entries of the libraries or packages we install to the application. You can run the command “npm install *package name*--save” to install a new package. The “--save” you add at the end will make an entry on the “dependencies” object with the package name and it’s version.
NgModules (Not ngmodels)
NgModules are the basic building block of an Angular application (The term ‘ng’ is an acronym for Angular, you might see a lot of those in their tags) . You might also come across the folder called ‘ngmodels’, ngmodels folder is a collection of all the libraries or dependency files that are needed for an Angular application to compile successfully. Back to Modules now, every Angular application has a root module, typically named ‘AppModule’ (your app.module.ts file in the folder structure) which defines the start of the application with the @NgModule() decorator. You can create custom Modules by yourself to better organize and reuse the components. All the custom modules should be imported in the app module for it to be detected and run by the application. The below is a typical structure of an App module.
declarations — Declares which components, directives, and pipes belong to the module.
imports — Imports other modules with the components, directives, and pipes that components in the current module need.
providers — To declare service classes that other components can use
bootstrap — the root component that Angular creates and inserts into the index.html host web page.
As your application grows it is important to organize your components within modules and import them to AppModule. This is the way of writing clean and readable code which will be easy to update or play around with. Custom modules can be created using the following command
ng g m *module name*
Components
Every Angular application must have one component, typically a root component which then maps to a component hierarchy. Component is a TypeScript file which holds the application logic and it is further mapped to a HTML and associated CSS or SCSS file for rendering the view. Every component in Angular is preceded by a @Component() decorator which identifies the class as a component. The default component with the name AppComponent is created with the file name “app.component.ts” which has the below structure
selector: A CSS selector that tells Angular to create and insert an instance of this component wherever it finds the corresponding tag in template HTML. For example, if an app’s HTML contains <app-root></app-root>, then Angular inserts an instance of the AppComponent’s view between those tags.
templateUrl and styleUrls: The module-relative address of this component’s HTML and SCSS template. Alternatively, you can provide the HTML template inline, as the value of the template property. This template defines the component’s host view.
app.component.spec.ts: This is your component’s unit test file. (More about spec files in later articles)
It is always advisable to code the component in two types
Smart components: Holds all the logic and computation to be performed on the application data
Dumb components: Receives the data from smart component and renders them on the screen
A new component can be created using the command
ng g c *component name*
Which can be abbreviated as “ng generate component *component name*”. This is create a component folder with the component and template files.
Angular uses two way binding to bind it’s component variable and the template. This was the major advantage of Angular over other frameworks during it’s release. Two way binding enables the changes to the DOM to be reflected in the program data and also the changes to the program data can be rendered to the DOM after performing manipulations to it.
Services
Any class preceded by @Injectable() decorator is called a Service or an Injectable. Services are application logic without a view. i.e They help in connecting the application to back-end database, sending and receiving a HTTP request etc. Services can be injected into any class by importing and defining an object to them. This is called Dependency Injection(DI).
You can create a service with the command
ng g s *service name*
Routing and state management
Routing is a concept of navigation among different views in Angular (Yes, Views not Pages). It makes use of Angular Router module for it’s functions and it conforms to all the browser navigation conventions (Navigation via URL, Button click, Back and forward buttons).
Routing forms the core part in rendering different views in a Single Page Application. It does not replace the view but it rewrites it without loading the entire page. It also helps with lazy loading — which is an on demand component loading to save your network and response time parameters. We can see more about routing, state management and a lot of interesting concepts in one of my upcoming articles.
Running Angular application
Now that you have understood the basic concepts of your Angular application lets go ahead and run it to see how it renders in your browser. Open your command line, navigate to your application folder and enter the command:
“ng serve” or “npm start”
You should see a message to access “http://localhost:4200/” to access your application and we will do just that.
If you can see the above screen, Congratulations! You have just created your first Angular application.
Thank you for working your way through this long article, but I’m sure it would have helped you understand Angular better and easier. If you want to learn more you can visit https://angular.io/docs to access their official documentation which covers every concept used in Angular 9 (Or their older versions, they have a pretty good documentation which is another thing I like about the Angular team).
Thank you and Happy learning!
