The awesomeness that is AngularJS - Part 1

 Oct 06, 2015

When thinking about creating your application, you should keep Angular JS in mind. Angular JS can be used to make your application more reactive for your users, this increases the experience of the user. We will be looking at creating an Angular JS application over a series of blogs.

To get started with Angular JS in your application, you will need the Angular JS library. If you are using Visual Studio as your development environment you can use the Nuget manager to download the package. Otherwise you can simply use the website: https://angularjs.org/ to download it.

Once downloaded you need to reference it within your HTML pages that you want to use it in, as a recommendation you should include it within the body element of your page.

img1

Once you have it referenced you can then start by implementing your Angular JS application, this is done by creating an Angular Module. Angular Modules will be our application namespace that contains a number of different components such as the controller.

We will begin by adding an empty JavaScript file. Within this file we will create our Angular JS code.

img2

Within this file, we use JavaScript to create the module. To create a module you create a variable and set it equal to the “angular.module” function. This function requires a name and a list of dependencies. We will call it DemoApp and provide an empty list for the dependencies.

img3

Once we have the module in place we can then create a controller, this will handle the actions the user takes on the page and react to their input. You create the controller within a module, this controller needs a name and a list of arguments. You have to use the controller function exposed by Angular JS on your previously defined module to create it.

img4

I called my controller “DemoCtrl” and I provided the scope object as an argument. This will give you access to the data exposed by the model of your application, allowing us to set new values and retrieve current values.

For a simple demonstration I will create a new property on the scope object and display it for the user on the page. This property will be called “Technology”. And contain a value of “Angular JS”.

img5

We now need to decorate our HTML page to use the angular application we just created. To do this, we first need to add a reference to our script file and then decorate an element with the “ng-app” attribute to implement the scope of our application, this will reference the module we created.

img6

Within the element you just decorated with the “ng-app” attribute, you have to assign an element to use your controller, this is achieved by using the “ng-controller” attribute and will reference our controller by name.

img7

Finally we will add some HTML elements to display the values that is retrieved from the controller within the Angular JS Application. To show information from the controller you will have to use Angular Expressions, you can recognize this by the double curly bracers “{{“ and “}}”. Within the curly bracers you use the name of the properties within the scope object, such as the “Technology” we have created.

img8

Now your final product will have the following outcome.

img9

How do your Excel skills stack up?   

Test Now  

About the Author:

Auret Swanepoel  

As a recent addition to the New Horizons team, Auret is a highly skilled and qualified IT Technical trainer. He has been a Microsoft Certified Trainer (MCT) since 2008 and has since then, also become a Microsoft Certified Professional (MCP), a Microsoft Certified Technology Specialist (MCTS) and a Microsoft Certified Information Technology Professional (MCITP). With his international experience as a trainer in South Africa, Auret is able to adapt his teaching style to different audiences in the classroom and ensure that students are learning in a positive and collaborative environment.

Read full bio
top
Back to top