Getting started with Angular 4

I’m really excited about learning Angular 4. Whenever I started to learn some new technologies, all I do is making a quick start on something immediately. In this post, we are going to discuss how to setup development environment and create an initial angular app.

Whenever I’m creating a new application, I always prefer some standard folder structure or use file generator like Yeoman.

OK, that’s all about the base story. A quick start tool always helps the developer to save their valuable time and use those time efficient way on improving the quality of the application.

Angular provides us Angular CLI which is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

Using this CLI, we can create apps with a working condition which uses best practices suggested by Angular Team.

To create an Angular application using Angular CLI, all we need is to follow the below steps:

1. Install Node js and npm on your machine.

Visit Node.js web page and download installer. Once you’ve installed nodejs, the npm will get installed along with it.

2. Verify the compatible version

Angular CLI requires the minimal version of node 6.9.x and npm 3.x.x.

We can check the version of node and npm using following commands.

node -v

npm -v

npm

3. Install Angular CLI

Run the following command to install Angular CLI globally.

npm install -g @angular/cli

-g flag is used to install the package globally in the npm.

Once we installed CLI globally, we can confirm whether the tool installed successfully by using the following command.

ng -v

 

4. Create a project

Now, creating a project becomes very simple. We have to run following command,

ng new cool-app

  • cool-app is the name of the project.

 

new-app

Once the files has been created, the CLI will start installing npm packages automatically. Wait until the packages getting installed, it will take a bit of time to complete the process.

The folder and file structure will looks as follows

code_ng-app4.png

5. Serve the application

Once the dependencies are installed, traverse to the created projected and serve the application using the following commands.

cd cool-app

ng serve –open

The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files.

Using the –open (or just -o) option will automatically open your browser on http://localhost:4200/.

The default page will gets open with the greeting message.

 

CoolApp.png

 

We can edit the source further based our needs, I’m planning to write series of posts on Angular 4 in upcoming day.

Stay connected and Keep supporting. 🙂

Happy Coding!

Auto Hot Key – One key for all

Heard of Hot Keys? Ahh! They are the keys that are really hot 🙂 Just kidding, Hot Keys are the key combinations that are used to perform some specific operations quickly. Remember the legends? Ctrl+C, Ctrl+V, Ctrl+X.

Does your job require these shortcuts often? Then you must be a programmer (Again Kidding!). It must be a pain to keep stretching your fingers often to use these hotkeys. I just came across an interesting open source scripting language known as Auto Hot Key. AHK is so cool that it provides a lot of cool stuff that you could do with your keyboard. Programs like Visual Studio offers shortcut keys with two or three combinations like Ctrl+K+F(Format text), Ctrl+C+U (Un-comment), etc.

Ouch! My fingers start hurting if I keep on using these shortcut keys right from the morning like Ctrl+X, Ctrl+V (Oh no!! Copied the wrong code), Ctrl+Z (Undo), Ctrl+C (Copy again), Ctrl+V (Paste again). Next, I have to format the code, Oh come on, I’m Mister Fantastic, the elastic man in the Fantastic 4, let me make my fingers reach Ctrl+K+F. Phew! somehow completed the job! Imagine repeating this scenario 50 times a day. Difficult right, here comes the AHK scripts to help you.

“AutoHotkey is a free, open-source scripting language for Windows that allows users to easily create small to complex scripts for all kinds of tasks such as form fillers, auto-clicking, macros, etc.”  This sentence was stolen from the AHK site 🙂

Fine, let me break things down and explain. With AHK you can create substitutes for complex shortcut key combinations like Ctrl+K+F. For instance, you could replace Ctrl+C with a single key like ‘c’, so after executing the AHK script (which doesn’t disturb you and silently runs in the background), if you press ‘c’, Bang!! the selected text is copied. No more two keys for copying, pasting, cutting, saving, etc; The AHK script for the previous functionality goes like this, enter the following text into a text editor and save it with an extension .ahk 🙂

x::Send, ^x

c::Send, ^c

v::Send, ^v

Now you can cut, copy and paste by just using the keys ‘x’, ‘c’ and ‘v’ 🙂 Cool right, No pain, more gain.

This is just a sample of what AHK can do. You could do almost any kind of automation with AHK. In order to execute AHK scripts firstly you need to install AHK in your machine by downloading it from their website, it’s just 3017KB. Install it and then you can run any file that has an extension .ahk.

Awww! I just now read your mind, you were thinking, “What?!! Blindly run some random script just because you told me? Is it safe? What if I’m hacked?” Do not panic, since AHK is open source millions of people will be watching its code and contributing to it if somethings not right it would be removed or informed. Also, there is a large community support for AHK and ready-made scripts for basic tasks. Enjoy using AHK. For more technical posts, follow efficientuser and for funny posts on life skills visit my blog.