Hello world with Angular Dart
In order to get started with Angular Dart first, you need to install Dark SDK. In this post, you will do 3 things.
- Installing and setting up the Dart SDK
- Installing dependencies globally
- creating the first angular application
1. Installing and setting up the Dart SDK
Windows user can easily install the Dart by downloading Dart Setup. To get the dart setup you just need to go to http://www.gekorm.com/dart-windows/ and download the stable version of Dart Setup.
Once you downloaded the Dart Stable you are ready to explore Dart (not angular dart ).
Dart SDK comes with 3 main command line tools
- dart: The standalone VM
- dart2js: The Dart-to-JavaScript compiler (used only for web development)
- pub: The Dart package manager
First, let’s confirm that you have set up the Dart SDK successfully or not.
Dart Setup automatically setup the PATH in Environment Variable but sometimes you need to set up the PATH manually.
First, let’s confirm that PATH has been set up by Dart Setup or not?
Open your Command Prompt and type dart --version . The output could be either case 1 or case 2
Case 1: PATH got set up automatically
If PATH got set up automatically then you will see output like this and congrats for your successful Installation.
Case 2: PATH is not set up automatically
When Path has not been set up automatically then you need to set up it manually. To set up the PATH you need to follow these steps.
- Go to Control Panel and open system and security
- open System and then you will see an Advance system settings in left
3. Select Environment variable and under system variable, choose PATH and click on edit.
4. click on NEW and add C:\Program Files\Dart\dart-sdk\binOnce verify this locationC:\Program Files\Dart\dart-sdk\bin if you had changed any setting during installation then above location may be different.
NOTE: The above location is Dart-SDK bin directory path.
Once you add the PATH you need to close the Command Prompt before tryinh the command again.
Now you have successfully set the path, now dart --verision will work but close the Command Prompt before trying the command again.
In order to get started with angular Dart, you need to follow some more instructions.
2. Installing dependencies globally
There are two ways to work with Angular Dart
1. CLI ( Command Line Interface )
2. IDE WebStrome ( Graphical User Interface )
In this post, we will go with the first approach CLI. In order to create an Angular Application, we need to install two packages globally.
1. webdev
A CLI for Dart web development.
To install it type pub global activate webdev in your Command Prompt
2. angular_cli
A command line interface for AngularDart. It can scaffold a skeleton AngularDart project, component.
To install it type pub global activate angular_cli in your Command Prompt
Once you have installed angular_cli and webdev successfully you are ready to build an Angular Dart App.
3. Let’s Create first angular application
When you will try to create the project either you can easily create them or you may get this error.
This error is similar to our previous error and solution is also going to be similar to the previous one. we just need to add the path pub bin directory path.
To get the path of pub bin press
Windows + Rand type%APPDATA%\Pub\Cache\binand press Enter. You will see a window you just have to copy the path of that window and add it to System variable.
now ngdart will work but before trying the ngdart close the Command Prompt and then reopen it.
Let’s try again
We have successfully created the scaffold. One more step away from running our first angular dart app.
Let get the dependencies
Now everything is done let’s run the app by executing the commandwebdev serve . This command is going to take some time. In my case, you can see that it took 38.2s. You may need to work 1 minute don’t panic it is just building your project.
So our Angular app is running on http://localhost:8080
Congratulations you have build you First Angular app.
