What is Computer

Module: M1-R5: Information Technology Tools and Network Basics

Chapter: Ch1 Computer Intro

🔹 Introduction to AngularJS Modules

AngularJS modules help organize your app into <strong>logical units</strong>. Each module can contain controllers, directives, services, and more. Below are examples displayed as code.

1. Creating a Basic Module

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
  var myApp = angular.module("myApp", []);
</script>

2. Module with Controller

<div ng-app="myApp" ng-controller="myCtrl">
  {{ greeting }}
</div>

<script>
  var myApp = angular.module("myApp", []);
  myApp.controller("myCtrl", function($scope) {
    $scope.greeting = "Hello AngularJS!";
  });
</script>

3. Module with Multiple Controllers

<div ng-app="myApp">
  <div ng-controller="ctrl1">{{ message1 }}</div>
  <div ng-controller="ctrl2">{{ message2 }}</div>
</div>

<script>
  var myApp = angular.module("myApp", []);
  myApp.controller("ctrl1", function($scope){ $scope.message1 = "Controller 1"; });
  myApp.controller("ctrl2", function($scope){ $scope.message2 = "Controller 2"; });
</script>

4. Module with Dependency

var moduleA = angular.module("moduleA", []);
var moduleB = angular.module("moduleB", ["moduleA"]);

// moduleB depends on moduleA

5. Module with Service

var app = angular.module("myApp", []);
app.service("mathService", function(){
  this.square = function(x){ return x*x; };
});
app.controller("ctrl", function($scope, mathService){
  $scope.result = mathService.square(5);
});

6. Module with Factory

var app = angular.module("myApp", []);
app.factory("mathFactory", function(){
  return { cube: function(x){ return x*x*x; } };
});
app.controller("ctrl", function($scope, mathFactory){
  $scope.result = mathFactory.cube(3);
});

7. Module with Filter

var app = angular.module("myApp", []);
app.controller("ctrl", function($scope){
  $scope.name = "AngularJS";
});

// Usage in HTML:
// Original: {{ name }}
// Uppercase: {{ name | uppercase }}

8. Module with Directive

var app = angular.module("myApp", []);
app.directive("myDir", function(){
  return { template: "<h3>Hello from Directive!</h3>" };
});

// Usage in HTML:
// <div ng-app="myApp" my-dir></div>

9. Module with Routing

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider){
  $routeProvider
    .when("/home", { template: "<h2>Home Page</h2>" })
    .when("/about", { template: "<h2>About Page</h2>" });
});

10. Module with Multiple Features

var app = angular.module("myApp", []);
app.service("msgService", function(){ this.msg = "Hello World"; });
app.controller("ctrl", function($scope, msgService){ $scope.message = msgService.msg; });
app.directive("showMsg", function(){
  return { template: "<p>{{ message }}</p>" };
});

O Level Modules

Quick Links