Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

AngularJS, Basic to Expert: Day Three

DZone's Guide to

AngularJS, Basic to Expert: Day Three

In this post, we'll continue our introductory series on Angular JS by taking a look at modules, models, and controllers, and how to implement them in your app.

· Web Dev Zone ·
Free Resource

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

Introduction:

In the previous articles of AngularJS from basic to expert Day One and Day Two, we learned what AngularJS is, and we looked at some basics of AngularJS and AngularJS expressions and directives and used AngularJS in our demo application.

You can check the previous articles here:

https://dzone.com/articles/angulajs-basic-to-expert-day-one

https://dzone.com/articles/angularjs-basic-to-expert-day-two

In this article, AngularJS From Basic to Expert, Day Three, we will learn about:

  • Modules in AngularJS
  • Models in AngularJS
  • Controllers in AngularJS

So, I will explore them one by one and will also continue with our Angular JS demo application which we used in the previous article.

Modules in AngularJS

A module defines a container in an AngularJS application which contains different parts of the application. A module contains Controllers, services, filters, directories, etc. for an AngularJS application. Also, we can say that a module defines an AngularJS application. As we have seen, ng-app defines an AngularJS application and we used ng-app in our previous demo, but we used ng-app="". Now we will create a Module and use that with ng-app

Image title

How to Create Module:

The angular.module method is used to create modules in AngularJS.

Example:

var angApp = angular.module("MyERPDemoApp", []);

Now we can use the variable  angApp to create different things like controllers, services, etc.(That we will see ahead).

How to Use a Module:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script> 
//Creating module.
var angApp = angular.module("MyERPDemoApp", []);
</script>
<!--Using module by adding the name in the ng-app directive. -->
<body ng-app="MyERPDemoApp">
{{5+5}}
</body>
</html>

Here, in the above script tag, we have created a module by using the angular.module method and named it MyERPDemoApp, and then we used that in the ng-app directive.

Models in AngularJS:

The main use of the model in an AngularJS application is to hold and bind the application data to the HTML view. A model binds the property to the DOM element given in the current scope. ng-model directives are used for the model to bind the data to the HTML DOM elements with application data.

In our previous post, we use ng-model like below:

<p>First Name: <input type="text" ng-model="firstName"></p>
<p>Last Name: <input type="text" ng-model="lastName"></p>
string expression example with directives:
<span >full Name: {{ firstName + " " +  lastName }} </span></br>

Here we are using ng-model with the firstName and lastName property for text boxes. Then displaying those properties in an AngularJS expression.

 {{ firstName + " " +  lastName }}  

Now, whatever the user types in the firstName and lastName text boxes will be displayed in the 'full name' section of the page:  

Image title

Controllers in AngularJS:

A controller contains the business logic of the AngularJS application. It holds and passes data to the application view and vice-versa. A controller is a collection of JavaScript functions written in an AngularJS format. It is a JavaScript object container that contains properties, attributes, and methods. A controller takes input from the HTML view, works on that data, and returns the results to the view. It is similar to the controllers found in ASP.NET MVC, but with some more enhanced features and advantages.

How to Create a Controller:

The moduleName.controller method is used to create a controller.

Example:

var angApp = angular.module("MyERPDemoApp", []);
ang.App.controller('UserController', function($scope) {
$scope.welcomenote="Welcome to Angular JS world";
});

OR
angular.module("MyERPDemoApp", []).App.controller('UserController', function($scope) {
$scope.welcomenote="Welcome to Angular JS world";
});

How to Use a Controller:

The ng-controller directive is used to add a specific controller in the view by passing the controller name into the ng-controller directive.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script> 
//Creating module with name MyERPDemoApp.
var angApp = angular.module("MyERPDemoApp", []);
//Creating controller with name UserController.
angApp.controller('UserController', function($scope) {
$scope.welcomenote="Welcome to Angular JS world";
});
</script>
<!--Using module by adding the name in the ng-app directive. -->
<!--Adding UserController with the help of ng-controller directive. -->
<body ng-app="MyERPDemoApp" ng-controller="UserController" > 
{{ welcomenote }}
</body>
</html>

The above code will display welcomenote on the screen.

But, generally, in large enterprise applications, the controller exists in the external JS files and we add that file in the view with the script tag.

Example:

<script src="UserController.js"></script>

Summary:

In this article, we have covered modules (and defined ng-module), models (and used ng-model), and created and defined a controller in AngularJS. We have also seen how to create them and how to use them with the examples.

So, in next article, 'Day 4,' I will cover: 

  • Data binding in AngularJS.

  • Scopes in AngularJS.

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

Topics:
web dev ,angularjs ,modules ,angularjs controllers ,models

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}