Module: M4-R5: Internet of Things (IoT)
Chapter: Ch1 Computer Intro
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.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
var myApp = angular.module("myApp", []);
</script>
<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>
<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>
var moduleA = angular.module("moduleA", []);
var moduleB = angular.module("moduleB", ["moduleA"]);
// moduleB depends on moduleA
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);
});
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);
});
var app = angular.module("myApp", []);
app.controller("ctrl", function($scope){
$scope.name = "AngularJS";
});
// Usage in HTML:
// Original: {{ name }}
// Uppercase: {{ name | uppercase }}
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>
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>" });
});
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>" };
});