AngularJs tutorial || module, controller, scope in angularJS.

AngularJs tutorial, what is a module in angularJS, what is a controller in angularJS and scope in angularJS.

What is AngularJS

Angular JS is the javaScript based framework. it’s very powerful and most popular web frameworks in these days developed by Google team. Angular JS is mostly used to developed single page web applications. it’s very powerful MVC based web framework developed by Google.

In this AngularJs tutorial, I am going to show you.

  1. What is a module in angularJS and how to create a module in Angular JS?
  2. What is a controller in angularJS and how to create a controller in Angular JS?
  3. What is a scope in angularJS?
  4. How to register a controller with the module and how to use the controller in HTML.

AngularJs tutorial

What is a module in Angular JS?

In Angular JS a module behaves like a container for controllers, directives, services etc.

A module is the main entry point for your application like the main method in java.

var app = angular.module("myApp", [])

The first parameter specifies the name of the module.

The second parameter specifies the dependencies for this module. A module can be dependent on other modules.

What is a controller in Angular JS?

In angular, a controller is used to build a model for the view part. We can call controller in service also for retrieve data from the database.

For Creating a controller in angular JS. Create a simple function and assign the value of function into a variable.

var myCtrl = function ($scope) {

$scope.mytext = "Hello AngularJS";

}

There is a parameter in the function called ($scope). so now a question in my mind is.

What is the $scope in AngularJS?

$scope is a parameter which is used to attach data or model to $scope object. So we can easily retrieve this data in view part. for example : $scope.mytext = “Hello AngularJS”;

now we are going to use that “mytext” as a variable in view part for display “Hello AngularJS”.

How to register a controller with the module and how to use the controller.

app.controller("myCtrl", function($scope){});

Angular JS application with example.

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="js/index.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
{{x}}
<br>
</body>
</html>

index.js

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

app.controller('myCtrl',function($scope){
  
  $scope.x = "My First AngularJs with codebun"
});

 

Instant search in AngularJS

 

You May Also Like These Posts:

Leave a Reply

Your email address will not be published.

3 + nineteen =