Hi, are you a beginner in Web Development? Perfect. You’ve come to the right place. First, we need to understand what Angular is to start working with it. Angular is a framework designed and maintained by Google to help developers build applications on the web. Angular is perfect for progressive web apps with native features like push notifications, offline data and much more. The framework combines declarative templates, dependency injection, end to end tooling and integrate the best practices to solve challenges faced when building robust, scalable web applications. Apps built using Angular are best suited for mobile, desktop and the web. Ionic is a framework that incorporates Angular as it’s backbone to build hybrid webapps that are cross platform and adapt their view to the specific platform.
Prerequisites.
I assume that you’re already an experienced developer having worked with basic technologies like HTML, CSS, JavaScript and some of the latest JavaScript standards like classes and modules. Angular is written in TypeScript, which is a super set of JavaScript. TypeScript is simple to learn and adds types to JavaScript making it more powerful allowing developers to construct interfaces for their data and specifying how data should be structured in an app. It’s not a necessity to have learnt TypeScript as it is very easy to get up and running with Angular with no prior knowledge on TypeScript.
Installation.
To successfully test and run any Angular app, you need to install NodeJS. You don’t have to learn it, all you need it to install it from this address. Once you have NodeJS installed in your machine, run the two commands to confirm the version installed on your machine.
node -vnpm -v
If both commands don’t return an error stating “node is not recognized as an internal or external command”, then you’re good to go.
To create Angular apps, you need a cli too. A CLI refers to a Command Line Interface or Common Langugage Interface. This is a tool that’s run on the command line using basic commands. You are required to install the cli globally, this ensures that the cli will run in any folder ensuring that you can build and run angular apps from whatever directory you may like. The angular cli is a module in NPM and can be installed using npm. Open cmd in administrator privileges and type in.
npm install -g @angular/cliWait till the packages complete their installation. The -g flag stands for “global” and is very important when installing tools that you may need to use across multiple folders.
NG help menu and it’s contents.
To verify the installation of the cli tool, use the following command below.
ng -vThe following is what you should see on your command line.
This shows the version of the Angular CLI running on my computer, my OS info and Node version. All angular commands in the cli start with the prefix ng.
Make our first app.
To make your first app, cd into the folder you prefer coding on and use the command below.
ng new appnameThis should create a new app with the following folders.
The most important folder is the appname/src folder. This contains your app. After waiting for a few minutes for all the modules to successfully install, you should now be able to open your folder in your preffered code editor. In this article I use code because that’s currently my preferred code editor. Atom is also a fantastic choice. To open in code use this command on your terminal.
code .This will open code in . folder which is the current folder. This is what your app should look like.
The most important scripts to pay attention to are contained in the src folder. But let’s briefly talk about the rest starting with favicon.ico. This should be the icon you’ll use for your app. The index.html carries the only page the Angular app possesses. Here’s where the catch is. Angular is really one single web page, that’s why it’s referred to as an SPA, a Single Page Application. This means it makes use of components and you can separate the code of each component for it’s specific purpose. Think of it like having the <div> of all pages as separate containers (components) where you can customize the code for each. The main.ts file is what “bootstraps” our Angular application and will catch and print out to the console any error. To bootstrap simply means to start up. No idea what polyfills.ts does, but the style.css is where you can add your global styles and import other style sheets to use on your entire project. If you want to use a particular font across all your SPA pages, this would be a good place to import them. I believe the test.ts file has something to do with running tests, which I don’t know shit about. tsconfig.app.json contains obviously some configuration data, don’t tamper with that. And I totally have no idea what tsconfig.spec.json and typings.d.ts do either. You can also take a wild guess ;)
The src folder.
Here is where your app resides. This folder has three folders within it, the app folder where your app code resides, your assets folder where assets like images, videos, music and other types of data would normally reside. The environments folder contains a file where you can switch the environment AngularJS is running on from production to development. To verify, open the developer tools on your browser when your app is running and view the console tab to see the message.
Running Our Angular App.
At this point, I bet you’re dying to run this thing. You wanna see it fired up, what it’s made of. Let me show you how. Angular comes with it’s own template, so that’s exactly what you will see once you run.
ng serve -oThis will serve the application on localhost:4200, the -o flag opens a new tab on your default browser in pointing to this URL.
Congratulations, you’ve just created your first Angular app with a template.
Showing some data.
Since you’ve come this far, lemme show you one neat thing Angular can do. You need to understand that I will keep this at the bare minimum and only showcase interpolation to reduce the length of this article. Interpolation is when you bind controls in an HTML template to properties of an angular component. We use double curly braces in the template to bind the data inside the body of the component.
Let’s make some changes to a few files in our app. First, delete everything in your app.component.html file and add these lines of code instead.
<h1>{{title}}</h1>
<p>{{username}}</p>This will create a heading of size 1, and a paragraph below it containing some text. In the app.component.ts file, add these lines of code.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})export class AppComponent {
title = 'My Angular App';
username: string;
constructor() {
if(localStorage.getItem("username") !== null) {
this.username = localStorage.getItem("username");
} else {
this.username = "Default Username"
}
}
}
Any code inside the constructor will run as soon as this component is initialized. The code checks to see if the key username in local storage has a value, if the value if not null then that becomes the username. If the value is null then a default username is assigned. Open developer tools by hitting F12, open the Application tab, down to storage. Open the Local Storage folder and click localhost:4200 to see data stored in the storage dedicated to this address. Create a new key called username and assign a value, then reload the page to see the name being displayed instead of the Default Username.
Where to go from here.
The angular docs is a great place to get started. You can get started from beginner level to pro. I’m also planning on releasing a few angular videos on my YouTube channel. To get a deeper understanding of how Angular works, check out my next article on Angular Architecture.
Hope you’ve learnt something straight forward and simple, please leave a few claps and share to help a friend as well ;).
