How To Install AngularJS

0
22
AngularJS Development

Hello everyone! You’re a junior programmer and you’re just beginning to floss with the basics of the framework? In this article, I’ll tell you how to install the Angular framework and start working with it. It doesn’t take a lot of time to install the framework. All right. Let’s begin with some fundamentals.   

Okay! So before we get going on an application we are going to need to install a few things.   

We’re first going to need a text editor and then we also need a local web server so that we can serve the application as if it were out on the internet somewhere. We are going to need the AngularJS framework, next we will need bootstrap which you might be familiar with. We’re going to use bootstrap for styling the application. Finally, we are going to need a package called UI bootstrap and you can kind of think of UI bootstrap as the regular bootstrap framework but customized for AngularJS.   

So like we said before we are going to need a text editor for our work and if you don’t have one I can recommend you sublime text. It’s a great text editor with a lot of versatility. We also said that we are going to need a web server, so if you are on a MAC you can use MAMP. If you are on Windows a good solution is WAMP. If you are on either or Linux another good option is WAMP or XAMPP.  

To start you should go to the angularjs.org home page and what you should do to get the CDN link is to go to the download button and you can see that it’s listed under CDN. There are many ways that you could pull in the code for angularjs you can download the files directly either minified or uncompressed. We could use a content delivery network, as we said, or we could use a package manager like Bower or NPM. But again, keeping things simple you just need to reference the CDN link for your project. Now let’s take a look at UI bootstrap next which again is a bootstrap framework but customized for AngularJS. There’s no actually a CDN link right on their website but you can get it if you go to CDNjs.com. CDNjs.com is sort of a repository for different CDN links. So if we search UI bootstrap you will see the first hit there is angular UI bootstrap and that’s exactly what we need. You will see some different links, you can get minified or unminified versions of both, the main JavaScript files and also a set of templates that you’ll need for UI bootstrap. That’s all of the CDN links you’ll need for your project and we will get back to it just in second but first, we need to set up a project folder structure.   

If you go to the finder window and go to the applications and go to the MAMP directory again assuming that you are using MAMP. It serves all of its files from the htdocs directory so you’ll need to create a new folder and then just grab it and drop it into sublime text. You’ll need two files to get going. The first being in the index.html file and this is going to be the HTML entry point for the application and then we are also going to want a JavaScript file called app.js and it will be the JavaScript entry point for your application.   

 So the first thing we want to do is get some HTML structure and the next thing we need to do is get the CDN links to put in here to reference all the scripts and CSS that you’ll need. so go back to chrome and the angularjs.org to the download button and just copy the CDN link and then paste it down below the <body> you might also create one script. The next one we’ll get is the bootstrap references and again go back to chrome and copy the link for the CSS and paste it just below the title. Lastly, we go to the UI bootstrap and grab the bootstrap minified version and paste that in and add script tags. We can get the templates for the minified version as well.   

All right so those are the scripts that we will need and now you can try in in the browser. You can go to google chrome, open up a new window and go to the localhost and check that everything is right.  

That’s all for now! Well, I hope this article helped you to gain a better understanding of AngularJS Development and to cope with all problems. I really believe that this article will help you to start programming fast and easy! Have fun!