Creating a Module in AngularJS

In this post I am going to explain, how we can create a simple module using AngularJS.

F.Y.I. You can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc.

Now, let’s get started. Firstly, we need a app.js file for creating our simple module. Let’s call it myModule. Here, is the code for it:-

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

Here, we are using the Module API and the empty array in angular.module('myModule', []) is the list of modules myModule depends on.

Next, we need the index.html page to display some content to the users. Let’s display Hello, World! using Angular Expressions. Expressions which helps us to insert dynamic values into our HTML. Here, is the code for index.html

<!DOCTYPE html>
<html ng-app="myModule">
  <head>
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
  </head>
  <body>
    <h1>{{'Hello,' + ' World!'}}</h1>
  </body>
</html>

You will notice that at top we have added a reference to myModule module in <div ng-app="myModule">. This is what bootstraps the app using our module.

That’s it! We have now created our first ever simple module in AngularJS. You can also see/edit the demo below:

Demo:
Working Demo on Plunker

If you have any comments or suggestion about this post, I would really appreciate it.
Happy Coding 🙂

Advertisements

3 thoughts on “Creating a Module in AngularJS

  1. Pingback: Creating a Controller in AngularJS | jQuery Tips and Tricks

  2. Pingback: Conditionally add a CSS class in AngularJS | jQuery Tips and Tricks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s