Angular.js Simple Example

Angular.js is a Javascript Framework that can be used quite effectively with single page web applications, ajax and PHP. This article will not show various methods to use angular.js. It will focus on using modules, controllers and output.

When you use Angular.js, there are three parts in the file for which you need to know about. The first and second parts take place in the head of the file. In the head, you need to include angular.js from a local or external source and you need a custom script for which you will build the custom application.

The other part takes place in the HTML code and will include the required angularjs attributes. In each application the attributes will vary; depending on what you are trying to achieve. A good place to check out what angular.js is capable of is to read the documentation at angularjs.org.

CONTROLLERS

The two methods to use controllers are shown below. Although both work, the latter method allows you to have as many controllers as you want in your HTML and they all can have corresponding code in the Javascript.

Global Controller

var myController = function ($scope) {
$scope.name = ‘Rufus’;
}

Using Angular Namespace, module function and controller function

angular.module(‘myAppName’, [])
.controller(‘myController’, function($scope){
$scope.name = ‘Rufus’;
});

Before we move on to the HTML, I am reminding you that the code block above is the Javascript that is going to be used to work with the HTML. In order for Angular.js to work, you will see that the HTML code has the attributes ng-app=”myAppName” and the attribute ng-controller=”myController”.

Those two pieces of the puzzle are very important for everything to work. If you look at the Javascript, you can see the module uses the app name and the controller uses the value from ng-controller, which is “myController”.

Finally, look at how {{name}} takes its value from $scope.name.

HTML

<h1>Hello, {{name}}!</h1>

</body>

After that, you could add more HTML and more Javscript to accommodate another controller. The code below shows how you would make that second controller in the Javascript.

angular.module(‘myAppName’).controller(‘secondController’, function($scope, $http) {
// add ajax code here
}

Keep in mind that when you use multiple controllers in your HTML, you can use them with closing and opening tags; such as <div></div>tags. Thus, html could resemble the code below if you added a second controller.

<h1>Hello, {{name}}!</h1>

</div>

Add custom stuff here

</div>

</body>

Those examples were quite simple. If you move on to forms, loops and other data, more, new coding is required. For example, this form to email example on a web page explains how to use Angular.js to use a function within a controller using the ng-click directive which is a lot like like onclick() with vanilla Javascript or onclick() with Jquery.

Our Skills

About

Strict Coding Standards

Service List

Contact Us

SEO Services

Links