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 Now you know how long I’ve been feeling lazy enough to get started with this new component based, OOPS like version of angularjs. Angular 4. 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 and , I won’t be going over how to get npm and other naive details. node npm 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 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. tool Creating a new Angular 4 project With the installation of angular cli, you will be able to access a new command named To create a new project, use subcommand followed by your project name. ng. new 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 , which means they are in typescript rather than javascript. .ts 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 and the tool that does this transpiling is a Don’t panic — Transpiling 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.. , 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. 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! !! If the command line doesn’t respond ng 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 command line interface, it does a lot of work on behalf of us by putting in all the best practices in place. ng As a front-end developer, you might already have a choice of a IDE/text editor, but I prefer 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. Sublime Text Use the “ ” option in menu item or use “ ” in 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. open folder File Add folder to project Project 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 “ ”, 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 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. Install package Typescript Once plugin is installed use key combination Commnd(Ctrl)+Shift+P to get the command bar and type in Typescript, select the option and it syntax highlighting kicks in and makes your file look spiced up. Set Syntax: TypeScript 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 has worked properly or not. ng new To run the Angular4 project, angular cli gives a subcommand which runs our project on Giving 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 serve [http://localhost:4200](http://localhost:4200.) . open ng serve --open Tada! Your brand new 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 this for more than 6 months. myapp learning 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 . Its always good to start from to get yourself familiarized to the platform. README.md README.md # Myapp This project was generated with [Angular CLI]( ) version 1.4.5. https://github.com/angular/angular-cli ## Development server Run `ng serve` for a dev server. Navigate to ` . The app will automatically reload if you change any of the source files. http://localhost:4200/` ## 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. The main take away from the README is that the applciation is served at port. 4200 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 and there is no script tag to support this extra tag. Now lets see the generated html on localhost:4200 app-root 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 is the main entry point for your app. main.ts 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. is the view app.component.html is the styling file. app.component.css is the scope variable which is being used in the html file. title 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 !”