Angular JS – Part : 1

Hello there, how’d you like to learn about Angular JS? So welcome to the part 1 of the Angular JS. In this section, I will be talking about,

• What is MVC
• AngularJS Modules
• Directives
• Scope
• Expressions and services

Angular JS is going to provide a front end framework based on the MVC – module view controller and it is built on top of Javascript as well as jQuery. MVC basically consist of 3 parts as Modules, View and Controller. With MVC the modules going to represent the data source the and view is going to be the rendered web page. The controller is going to handle communication between both of them. And by structuring you page is where your code is going to be easier to maintain and it’s also going to be easier to update and it’s also going to make your code much more readable.

And that brings us to the Angular JS jargon which I’m going to explain next. – Modules, Directives, Scope, Expressions and services.

Angular JS uses modules which are going to represent the components used in your application. And by using modules it’s going to make it much more easy to re-use your code in another application or the other parts of your site.

Now web pages are normally going to be manipulated by working with the DOM object in either Javascript or jQuery and Angular JS is going to allow you to expand the HTML tags and attributes using something called directives. Directives will make it very easy to bind data directly to your HTML elements.

Now Angular JS is going to use javascript objects to represent set data called the scope Which can be data generated on the web server, database, web service or a client side using regular angular JS code.

You are also going to be able to use expressions that are directly linked to the scope or data and the benefit to this is that the page is going to be updated dynamically as the data changes. Data binding which is sort of another jargon term works as well so that whenever your data changes on your web page the modules going to be updated and as well whenever data changes on the model your web page is going to be updated.

 

And finally it brings us to services, there are many services provided for common task like AJAX techniques that dynamically pull data from web services and other such things.

Let’s jump in to the coding part !

(I have created an angularTutorial.html and added some basic codes that helps to begin a web page and also I made an emam1.js file)

And basically what we are going to do here is implement a template model controller as well as scope.

Then inside the exam.1 type,

var app1 = angular.module(‘app1’, []);

What I’m doing here is I’m going to define an angular JS module. And modules are basically used to associate an Angular JS app with the part of a html document. They are also going to provide access numerous  Angular JS features and also help with organization. And the angular.module() function is going to accept the module name (app1) and also a list of modules which are inside the brackets. This will be populated with bunch of modules that we are going to need for this to be able to function properly as well as an optional configuration for our module which will come after the brackets.

Let’s see from where the ‘app1’ comes from. Jump in to angularTutorial.js and inside the html tag type,

ng-app=”app1″ -> and this is going to define the ng app parameter

ng-init=”person = {fName: ‘Achala’, lName: ‘Piyarathna’};

capitals = [{city: ‘Montgomery’, state: ‘Alabama’}, {city: ‘Juneau’, state: ‘Alaska’}, {city: ‘Phoenix’, state: ‘Arizona’}]” -> this is a directive – this will initialize application by signing different values

To define our controller,

Basically what we are saying here is this element is going to be a view and as well as all the other elements which lies inside of it.

Then get back in to the Javascript file and define our controller. We are going to reference controller name ‘ctrl1’ (same as you defined in the html file). The factory function inside controller function has $scope as it’s parameter (like I mentioned earlier the $scope is going to link our html elements to variables in our scope). Here the $scope is a dependency and it tell the angular to automatically pass in the scope object whenever the function is going to be called. This is an example for what we called as an dependency injection.

Angular basically sees that my factory function contains a scope component and it goes and gets it and throws iy back to the function. Then I have initialized two variables and a function for the button. The values of the calculation will be changed when the button is clicked. I have used a unary plus operator to convert the string number values which are then added.

Then get back to the html and throw a span inside the div tag and inside it define 2 elements that will be bind to the first and second values in the scope using the ng-model directive. If either value changes here it will change in the scope and vice versa. Then also define a click event to call our update value.

Then to display the scope value of calculation we should write an expression. And if we reload the file and displays it with the default values 1. And if we type in some random values and hit sum the sum of those two values will be displayed.

And in regards to expressions you are also going to able to perform calculations with expressions. We will do something simple.

5 + 5 = {{5+5}}

Your expression also going to be able to  bind  data directly to the html, so we are not going to want to use the ng-model. Here the html element will be updated automatically. And you can also bind these using another directive called data-ng-bind.

Your first value is {{first}}

Your second value is

You can also build strings using expressions. We can also use ng-repeat to cycle through a list of information.

{{person.fName + ” ” + person.lName}} you entered {{first + ” and ” + second}}

          {{ ‘City: ‘ + capital.city + ‘, State: ‘ + capital.state}}

So this is like very basic introductory exercise for Angular JS. Hope I made some sense in to you on these basic stuff. I hope to continue doing some more exercises and to discuss more on Angular JS in the next posts.

If you have anything to be clarified you can drop a comment  or contact me. Thank You !