Installing Angular 4


Angular 4 is here and it's time to get started. If you're new to Angular, you might have arrived on this page with confusion as to how you start an actual Angular 4 project. 
If that's the case, you've come to the right place! There are a few different ways to get started with an Angular 4 project.

This is a step-by-step setup guide to setup Angular v.4.
First thing first we have to make sure we have below thing on our system.
  • Node JS with NPM(Node Package Manager)
  • Angular CLI (Command line Interface)

For downloading Node JS Click Here, choose either the Windows or Mac installer based on your OS.
After it's installed, visit your console / command line and type:

    node  -v                                                                                                                                            

 it will provide you with the current version number.

Next, we need to install the Angular-CLI. This tool allows you to create Angular projects as well as help you with various development tasks.

Again go back to your console and type the below command

     npm install -g @angular/cli                                                                                                            

It will install the angular cli (it will take a while)something like give below



To Check the angular version go back to console and type the below command

      ng -v                                                                                                                                               

The output will be something like

Installing Angular 4 with the CLI

Navigate to project directory:

To start a new ng4 project, at the console, type:

      new my-project-name                                                                                                                    
     >> let it install                                                                                                                                      

ng new takes a minute to run.

Navigate to project  and run local server and open it

     ng serve --open                                                                                                                                    


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

You can use the ng generate (or just ng g) command to generate Angular components below are the blueprints in the table:

scaffold
usage
Component
ng g component my-new-component
Directive
ng g directive my-new-directive
Pipe
ng g pipe my-new-pipe
Service
ng g service my-new-service
Class
ng g class my-new-class
Interface
ng g interface my-new-interface
Enum
ng g enum my-new-enum
Module
ng g module my-module

Comments

Post a Comment

Popular Posts

How to position controls using Canvas control in WPF using MVVM

Image
The best way to position different controls using Canvas in MVVM is using ItemsControl.We need to bind ItemsControl with the list of controls and using Canvas control as the ItemsTemplate.Lets understand it in more details using an example. Step 1: Add an ItemsControl in MainWindow. Step 2: Lets create a list containing the different heights, width,top and left poistions for the controls and this list we will be using as the ItemsSource to bind the ItemsControl. Step 3: Lets Create a class under ViewModel folder only named as “ControlDetails”, Class should look like: namespace WpfApplication1.ViewModel {   public class ControlDetails     {         public double Height         {             get;             set;         }         public double Width         {           ...
Read more

Change font and size in visual studio

Image
Visual studio comes with feature to customize font and size. Let us see how we can change the font and size in visual studio. We can do that by going to        tools -->  options                                                                                                                                 Below is the screenshot for reference: Under environment tab select Font and color section.         environment --> font and color                                                   ...
Read more

JWTs in ASP.NET Core 2.0

Image
A Quick Introduction to JWTs JSON Web Tokens, often shortened with JWTs, are gathering more and more popularity in the Web environment. It is an open standard that allows transmitting data in JSON object, in a compact and secure way. They are usually used in authentication and information exchange scenarios since the data transmitted between a source and a target are digitally signed so that they can be easily verified and trusted. For more, you can visit my previous blog here   Securing your web API There are many reasons you might choose to expose an API from your ASP.NET Core 2.0 app: supporting windows-based software, another web application, or maybe you’re building a SAAS product and want to give advanced users some mechanism to integrate with your platform. But clearly, the most common (and likely) scenario is that you want to build all, or some, of your application, using front-end Single Page Application frameworks such as ReactJS, Angular, or Aurelia. There ar...
Read more