in JavaScript

Getting started with AngularJS

Share on Facebook0Tweet about this on TwitterShare on LinkedIn0Share on Google+0Email this to someone

The speed on Javascript Frameworks is moving so fast that by the time you have had you hands on one, you have to step over to another to keep up. I havent had time to look on them all, but the first JS library I felt in love with was KnockoutJS, and I have after that hold a few sessions (in-house) where I work about KnockoutJS.

But with more complex application you need a actually framework on the client side. So I tought I will give you a simple ”Hello World” tutorial on AngularJS.

Buy the time I’m writing this I know the angualr team is working on a new release which is changing all kind of stuffs, but I will kepp with version 1 for a while just beacuase I like it stable, and for me it’s perfect at the moment. Let’s see in the future what the angular team can come up with.

For the demo I will use Visual Studio Code and if it’s intresting for i’m doing this on a Linux computer (the OS dosent have any matter here).  I wont use any specific commands for VSCode or anything like that, so pic your favorite editor and you will be able to keep up.

Steps

  1. Create a project structure
  2. Download angularjs
  3. Initialize the App
  4. Create a binding

Start your editor and create a new Project/Folder, in the root create a new folder called JS and one Script, and after that inside the js folder create a new folder called controllers, so you have a folder structure looking like this

Selection_003

Add a new hml file in the root ”index.html”

And add the basci HTML structure for a HTML document

And now what we need is to add the AngularJS reference, I’m doing this the easiest way just for this tutorial but download the AngularJS file and add it to the ”script” folder (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js)

You should now have a project structure like this

Selection_004

Add the AngularJs reference in the HTML file. (In the bottom of the body tag)

Add a new file in the JS folder called App.js and add a reference to the file under the reference to angular in the HTML file
We wont do anything with the App.js in this tutorial, but we will in blog post following this one. App.js will be the file where we configure the application, by now we still add a line of code to the file

Now we will add a new file to the controllers folder called ‘HomeCtrl.js’

This is the main controller for this demo, and will be the core of the simple app. Add the file and also initialize the controller with following code

Add a reference to HomeCtrl.js in the HTML markup right below the app.js reference. Reference section should look like this

Now we only need to edit some HTML to bind everything up.
Add a new attribute to the html node

The name value we give the ng-app will be the name of the application, and is the name we are using in the controllers and other classes in the application to getting the module.

Now we need a section in the HTML markup that is using our controller, the easiest way to do this is by adding a div that is using our controller with the ng-controller attribute

As you see I also added a input field (textbox) that is bind to the propery userName on the $scope on the controller. The value is beeing set on the input by using the ng-model attribute, and to the right of the textbox we are rendering the userName value. So what you write in the textbox till appear to the right.

You can watch the full code on Github AngularJS Hello World Toturial

 

Share on Facebook0Tweet about this on TwitterShare on LinkedIn0Share on Google+0Email this to someone

Write a Comment

Comment