Getting Started with Angular 4

Procrastinating for an year, I have finally decided to learn the new revamped angular — known as Angular 2 — oops, it’s already Angular 4. Now you know how long I’ve been feeling lazy enough to get started with this new component based, OOPS like version of angularjs.

If you are one of those people feeling comfortable with Angular JS and has a plan to learn Angular 2 which is now Angular 4, you are in the right place. Let’s kick this off and get the Angular train moving. It’s not a giant leap as people have mentioned every where. After all, I felt the latest style is more organized compared to the way we usually do in an Angular 1.x application.

Since this article assumes that you’re a front-end developer and well versed with node and npm, I won’t be going over how to get npm and other naive details.

Well, now you have npm on your machine — go ahead and install the command line interface for Angular 4, which goes by the name @angular/cli

npm install -g @angular/cli

This will install the cli tool to start working with Angular 4, which comes with extensive set of instructions to create and organize your project. Let’s get started with creation of a project.

Creating a new Angular 4 project

With the installation of angular cli, you will be able to access a new command named ng. To create a new project, use new subcommand followed by your project name.

ng new myapp

To make you feel nostalgic, this command generates your project files like your view files, css files and other javascript files you’ve used in Angular 1.x — but most of them can be seen with an extension .ts, which means they are in typescript rather than javascript.

Don’t panic — Typescript is just like javascript, but kind of a super set. That means all your javascript syntax works just fine in typescript and it can do much more than that. However, for our browsers to understand, it needs to be converted to javascript — this is called Transpiling and the tool that does this transpiling is a transpiler.

Since we are just getting started, ignore that— we can learn about it later. For now, your js syntax works fine.

This takes some time as it tries to install all the dependencies. Grab a coffee and come back soon..

!! If the command line doesn’t respond, please do yourself a favor by pressing ‘Ctrl+C’. If you haven’t terminated it and it got back by itself — then you are fine. ng has installed all required dependencies needed by this project. However, if you have terminated and exited out of that waiting loop, then you need to do an extra step, which is installing dependencies manually. Don’t curse me — I just wanted to make your life easy!

So now, go ahead and install dependencies using following command

npm install

Now it starts installing dependencies based on those mentioned in package.json file. Since we have bootstrapped (created) the application using ng command line interface, it does a lot of work on behalf of us by putting in all the best practices in place.

As a front-end developer, you might already have a choice of a IDE/text editor, but I prefer Sublime Text and they have a pretty cool updated and stabilized production version 3. If you are open, then I would suggest to use that as a preferred editor for javascript development.

Use the “open folder” option in File menu item or use “Add folder to project” in Project menu item to add the directory in which the project has been created earlier — both will get the project directory added to the side bar of Sublime Text.

Screenshot to demonstrate the project structure

Now, as we see — main.ts file is selected and file contents look flat without any syntax highlighting. That’s hard to understand for us UI developers, whose creative mind goes by the visual appeal and photographic memory. Thus, let’s get the plugins needed.

Since the above file is a typescript file, we need to install Typescript plugin. For this, use the key combination of Command+Shift+P on Mac and Ctrl+Shift+P on Windows to get the task command box — type in “Install package”, Select the option by pressing enter/return when “Package Control: Install Package” item is focused in filtered items. This would bring up the box to select the plugin and type Typescript to filter available plugins and again use enter/return to select. You can see the status on status bar on bottom left side. Restart the editor if needed.

Once plugin is installed use key combination Commnd(Ctrl)+Shift+P to get the command bar and type in Typescript, select the option Set Syntax: TypeScript and it syntax highlighting kicks in and makes your file look spiced up.

Screenshot: TypeScript Syntax Highlighting

Running your project

Don’t bother about what the files are and their contents. Let’s run the project to see if ng newhas worked properly or not.

To run the Angular4 project, angular cli gives a subcommand serve which runs our project on [http://localhost:4200](http://localhost:4200.). Giving open along with it makes it open automatically in the browser (this is useful when you don’t know which port is it running on). So the command is

ng serve --open

Tada! Your brand new myapp is being rendered in browser. Yay! you’ve created a project in Angular4 and running it in just few minutes. That’s a ultra giant leap from your procrastination of learning this for more than 6 months.

First look of the application.

Now this looks good, let’s get to the details and understand what’s happening with here.

Folder Structure

Folder structure as seen in Sublime Text editor

Before we start digging deep lets have a look at README.md. Its always good to start from README.md to get yourself familiarized to the platform.

# Myapp

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.4.5.

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

DISCARD the above file contents if you don’t have patience to go through it.

1. The main take away from the README is that the applciation is served at 4200 port.
2. To generate a component, you dont have to google every single time copy and paste stuff but there is a cool generator from the cli.

ng generate directive|pipe|service|class|guard|interface|enum|module

Folder descriptions in a simple language.

It all starts from index.html

index.html

Always start the front-end application from index.html. That’s the way developers followed from decades (I’m just making up stuff :P).

Lets observe index.html for a minute.

The only tag which seems weird is app-root and there is no script tag to support this extra tag. Now lets see the generated html on localhost:4200

localhost:4200 source

Here lies the difference in html, all of the script tags are generated after build.

main.bundle.js has all of the Angular component code to support the tag app-root.

main.bundle.js

Application flow

main.ts is the main entry point for your app.

main.ts

On Line 11 we can see that the Application is being bootstraped (initiated) using AppModule which indeed is being exported from Line 4 ./app/app/module

app.module.ts

NgModules help organize an application into cohesive blocks of functionality. — https://angular.io/guide/ngmodule

In a laydev’s (layman who’s a developer) terms, the application is divided and subdivided to modules which is functional on their own. This shall promote quality and re-usability in many aspects.

On Line 14 we can see that AppComponent is used to initiate this module, which is being get on Line 4 from app.component.

app.component.ts

Finally we see something that we can related to.

• app.component.html is the view
• app.component.css is the styling file.
• title is the scope variable which is being used in the html file.

app.component.html

Update the default message

Lets go ahead and change the title to “MyApp” (Write what ever you want to see).

// app.component.tstitle = "MyApp";

Add some color to the title h1 tag.

// app.component.cssh1 {color : red;}

Second run

Or do I say final run for this first tutorial?

Final output

If you’ve reached this, you’ve made it!! Have a great day!

Prady | @pradyumna_d | “File Cryptocurrency Taxes Using BearTax!”