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         {             get;             set;         }         public double Top         {             get;             set;         }         public double Left         {             get;             set;      
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                                                                                                         Below is the screenshot for reference Save changes after selecting your desired font and size.
Read more

DataGrid in WPF MVVM

Image
DataGrid in MVVM As we know datagrid plays a vital role in displaying data in our apllications. In this article we will get to know how to bind a datagrid in WPF MVVM. Step 1: Lets add a DataGrid Control in Main Window as below: <Window x:Class="WpfApplication1.MainWindow"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"         xmlns:local="clr-namespace:WpfApplication1" xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"         mc:Ignorable="d"         Title="MainWindow" Height="350" Width="525">     <Grid>         <Grid.RowDefinitions>             <RowDefinition Heig
Read more