Angularjs Examples

AJS Examples


AngularJS Modules

AngularJS module are container for the different parts of your app such as controllers, services, filters, directives, etc. AngularJS modules define application and its logical entities that helps you to divide your application. So you can keep several modules inside app. AngularJS allow you to declare a module using the angular.module() method. A module can contain one or more controllers, services, filters and directives. Similarly an app can contains several modules.

Syntax

var app = angular.module('yourApp', []);

Example1 : Controller Without a Module

<html>
<head>
<title>My first AngularJS modules code</title>
<Script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</Script>
<Script>
//Defining Controller Using Standard Javascrip Object Constructor
function yourController($scope) {
  $scope.customer = { name: "Jimi Scott", address: "12-13-283/A1", email: "[email protected]" };
}
</Script>
</head>
<body>
<div ng-app="">
<div ng-controller="yourController"> 
<p>Customer Name : {{ customer.name }}</p>
<p>Customer Name : {{ customer.address }}</p>
<p>Customer Name : {{ customer.email }}</p>
</div>
</div>
</body>
</html>
See Live Example

Example2 : Controller With a Module

<html>
<head>
<title>My first AngularJS modules code</title>
<Script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</Script>
<Script>
//Defining Controller Using AngularJS Module
var app = angular.module('yourApp', []);
    app.controller('yourController', function($scope) {
        $scope.customer = { name: "Jimi Scott", address: "12-13-283/A1", email: "[email protected]" };
    });
</Script>
</head>
<body>
<div ng-app="yourApp">
<div ng-controller="yourController"> 
<p>Customer Name : {{ customer.name }}</p>
<p>Customer Name : {{ customer.address }}</p>
<p>Customer Name : {{ customer.email }}</p>
</div>
</div>
</body>
</html>

In above example we created a module called yourApp using angular.module() method. Then we added a controller yourController to this module. This is just an alternate way of defining a controller but recommended one.

See Live Example