How To Get A More Angular Face

Procrastinating for an year, I have finally decided to larn the new revamped angular — known equally Angular 2 — oops, information technology's already Angular four. At present 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 comfy with Angular JS and has a plan to learn Angular 2 which is at present Angular iv, you lot are in the right identify. Let'due south kick this off and become the Angular train moving. It's not a behemothic bound equally people have mentioned every where. Afterwards all, I felt the latest style is more organized compared to the way we normally do in an Angular ane.x application.

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

Well, at present y'all accept npm on your machine — go alee and install the command line interface for Angular 4, which goes by the name @angular/cli

npm install -thou @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'south get started with creation of a project.

Creating a new Angular 4 projection

With the installation of angular cli, yous volition be able to access a new control named ng. To create a new project, use new subcommand followed by your project proper name.

ng new myapp

To brand you experience cornball, this command generates your projection files like your view files, css files and other javascript files you've used in Angular 1.ten — only nigh of them tin 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 prepare. That means all your javascript syntax works simply fine in typescript and it can do much more than than that. However, for our browsers to understand, it needs to exist converted to javascript — this is chosen Transpiling and the tool that does this transpiling is a transpiler.

Since we are just getting started, ignore that— we tin learn well-nigh it afterward. For at present, your js syntax works fine.

This takes some time every bit it tries to install all the dependencies. Grab a coffee and come up back shortly..

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

So now, go alee and install dependencies using following command

npm install

Now it starts installing dependencies based on those mentioned in package.json file. Since we take bootstrapped (created) the awarding using ng command line interface, it does a lot of work on behalf of united states of america by putting in all the best practices in identify.

As a front-end developer, y'all might already have a pick of a IDE/text editor, just I prefer Sublime Text and they have a pretty cool updated and stabilized production version iii. If you are open, then I would propose to use that equally a preferred editor for javascript development.

Use the "open up folder" option in File menu item or employ "Add folder to project" in Projection menu particular to add together the directory in which the project has been created before — both will become the projection directory added to the side bar of Sublime Text.

Screenshot to demonstrate the project structure

Now, equally we see — main.ts file is selected and file contents expect apartment without any syntax highlighting. That's difficult to empathize for us UI developers, whose creative listen goes past the visual entreatment and photographic memory. Thus, let's become the plugins needed.

Since the above file is a typescript file, we demand to install Typescript plugin. For this, utilize the key combination of Command+Shift+P on Mac and Ctrl+Shift+P on Windows to go the task command box — type in "Install bundle", Select the option by pressing enter/return when "Package Control: Install Package" particular is focused in filtered items. This would bring up the box to select the plugin and type Typescript to filter available plugins and once more utilise enter/return to select. Yous can see the status on status bar on bottom left side. Restart the editor if needed.

Once plugin is installed employ fundamental 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 wait spiced upward.

Screenshot: TypeScript Syntax Highlighting

Running your project

Don't bother almost what the files are and their contents. Permit's run the projection to meet if ng newhas worked properly or non.

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

ng serve --open

Tada! Your brand new myapp is existence rendered in browser. Yay! y'all've created a projection in Angular4 and running it in simply few minutes. That's a ultra behemothic bound 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'due south happening with hither.

Folder Structure

Folder construction as seen in Sublime Text editor

Earlier we start excavation deep lets take a look at README.md. Its always expert 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 i.4.v.

## Development server

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

## Lawmaking scaffolding

## Build

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

## Running unit of measurement 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/).

## Farther aid

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

DISCARD the higher up file contents if you don't have patience to become through it.

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

Folder descriptions in a simple language.

It all starts from index.html

index.html

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

Lets find alphabetize.html for a infinitesimal.

The but tag which seems weird is app-root and in that location is no script tag to support this actress tag. Now lets see the generated html on localhost:4200

localhost:4200 source

Hither lies the divergence in html, all of the script tags are generated after build.

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

main.bundle.js

Application flow

master.ts is the primary entry signal for your app.

primary.ts

On Line 11 we tin can see that the Awarding is being bootstraped (initiated) using AppModule which indeed is beingness exported from Line four ./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 fourteen we can see that AppComponent is used to initiate this module, which is being get on Line 4 from app.component.