HOW TO BEGIN LEARNING ANGULARJS

 


HOW TO BEGIN LEARNING ANGULARJS

Angular Js is one the best and stable frameworks of Javascript, making it one of the best and modern frameworks for quite sometime. The ease with which you can download the framework, either by adding a CDN( Content Delivery Network ) link to your script tags in the header or body, or by directly downloading the minified or the full length versions, and the various supporting libraries makes it one of the very easy and dynamic framework to work, learn and grow with.

This post will cover somewhat how you can dive into the world of AngularJS and start learning this framework:

CREATING YOUR FIRST ANGULAR JS PROJECT 
Download the preferred version from https://angularjs.org/ , keep the settings as per your choice, and click on the download button, you can also install it via npm ( Nodes Package Manager ) from terminal or you can also use the direct cdn link in your project structure, will leave the screenshot attached for your reference :


use the Download AngularJS option, then click on Download in the next popup


now go to any code editor of your choice, and create a new project with any name, then ready your package.json ( will later make detailed videos on node, package, json etc ) by typing the following command:

npm init

this will ask details regarding your package.json file and about the app structure, fill it as per your choice

Now after your package has been made ready, install and fix your dependencies by typing:

npm install or npm i 

followed by this to install and connect your angularjs dependency in the node modules type:

npm install angular

After you have successfully run these commands, add a css folder for the styles, a scripts folder with a file named app.js, and a index.html file in the root directory structure

now, you should get a project structure like this :


now in the index.html file, enter code like this, based on your preference you can add more stuff, its just a basic structure of the file:


now link the ng-app directive with the scripts app.js file so that we can run the view properly, make sure the name in the ng-app is same as the name in the scripts app.js module name :



now after you have successfully written all the code in all these steps, now comes viewing the code's view in the browser, for that download another dependency :

npm install -g http-server

here the -g stands for installing it globally in the project, if you get error in this command try running with root privilege:

sudo npm install -g http-server

this will ask your system password but hopefully this should work

now go to your terminal in the code editor and type : 

http-server

this command will start the localhost server on the port specified and you should get something like this:


CONGRATULATIONS !!!!!  You just ran your first AngularJS project 

now for further learning more in depth about the concepts and better styles, functionalities on your website made of AngularJS you can follow various courses on udemy, coursera etc.

In this blog also soon we will post more in depth concepts of AngularJS for you to learn and become a pro.

TILL THEN, KEEP LEARNING, KEEP GROWING 

#PEACE

Comments