Skip to main content

Setting Up the Development Environment

In this article i'm gonna show you how to setup your development envirnoment and create your first angular project.
The first thing you need to install is the latest version of the node , if you have never worked with node before, it's basically a runtime envirnoment for executing javascript code outside the browser. Here in angular we are not going  to work with node but node provides some tools that we need to build angular projects.
For installation of node just go to nodejs.org on this page you can see the latest version of node for your operating system here in my case the latest stable version is v8.9 and the latest version is v9.5 now this latest  version has more features but its not stable yet so just go ahead and install the latest stable version v8.9 when you do that open up the terminal on mac or command prompt on windows (let me show you few commands)
and type 
~ $node --version (on mac👈😉) 
v8.9.4
so you can see on my machine i'm running node version 8.9 , the minimum version required for building angular applications is version 6.9. Once you have node then we are going to use a tool called NPM(Node Package Manager) to install third party libraries one of the library we have to install is
Angular CLI (command line interface) -it is command line tool that we are going to use to create new angular projects or generate some boilerplate code as well as create deployable packages. 
So again go for command prompt in window's and run 
>npm install -g @angular/cli
Here we have installed angular CLI package globally in our machine.
Note:- if you dont put -g here angular cli will be installed only in the current folder and it's not going to be accessible anywhere else, now if you are on mac😉 you need to put sudo at the beginning of this command to execute it as an administrator. here is
~$sudo npm install -g @angular/cli
Next we need to enter
Password:
This process will take some time to install.
Ok then now we installed angular CLI, now to ensure that the installation was successful type on command prompt 
~$ng --version (mac)
>ng --version (windows)
 You can see in your teminal running angular cli version 1.6.6 🤗 and below that you can see the version of node in your machine... so let's get started😍









Comments

Post a Comment

Popular posts from this blog

Your first angular app

As we have installed angular CLI in previous article now we can create a new angular project. So back to the terminal Let's call this project hello_world. ~$ng new hello_world  here is my practice screen-  also i'm not mac user😉 So this will generates a bunch of files and folders and then it going to use NPM to download third party libraries. So our project is successfully created, now to start coding we need a code editor. the editor i'm gonna use for practice is visual studio code or vs code it's beautiful, cross-platform and light-weight editor, you can download it from code.visualstudio.com   . If you dont like this editor feel free to use any editor that you prefer, we can use sublime, atom or any other editors, if you gonna use vs code i want you to add it to the path so you can easily open it from the terminal. Open vs code here if you are using mac press shift+cmd+p or if you are using wind😉ws press shift+ctrl+p this opens-up the comm...
Post a Comment
Read more

Structure of Angular Projects

In our last session we created a project now let's see what files and folders we have in this new project. The first folder we have in our project hello-world is -  (See the screens of package.json here😊) package.json e2e :- you just expand it and you will see a bunch files there. e2e which stands for end to end and this is where we write end to end tests for our application. If you have not worked with e2e tests let me tell you that these are basically automated tests that simulate a real user, so we can write code to launch our browser, navigate to the homepage of our application, click a links, fill out a form, click a button and then assert that there is something on a page, this is an example of e2e tests, it comes in picture when you learn angular well, so just for now dont w😊rry about it. node_modules - so below e2e we have node_modules and this is where you store all the third party libraries that our application may depend upon. keep in mind that this ...
Post a Comment
Read more