AngularJS - Modules

Hello, future programmers! Today, we're diving into the world of AngularJS modules. Don't worry if you're new to programming; I'll guide you through this step-by-step, just like I've done for countless students over my years of teaching. Let's embark on this exciting journey together!

AngularJS - Modules

What are AngularJS Modules?

Imagine you're building a massive Lego structure. Instead of trying to construct everything at once, you'd probably create smaller, manageable pieces that you can later combine. That's exactly what modules do in AngularJS!

Modules in AngularJS are containers for different parts of your application. They help you organize your code, making it easier to maintain and understand. Think of them as neatly labeled boxes where you store different functionalities of your app.

Application Module

The application module is like the main box that holds all the other boxes. It's where your AngularJS application begins. Let's create our first application module:

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

Here's what's happening in this line:

angular.module() is a function that creates a new module.
'myApp' is the name we're giving to our module.
The empty array [] is where we'd list any dependencies our module might have (we'll get to that later).

Controller Module

Now that we have our main box (application module), let's add some smaller boxes inside. One of these is the controller module. Controllers in AngularJS manage the data of your application. Here's how you can create a controller:

myApp.controller('MyController', function($scope) {
    $scope.message = "Hello, AngularJS!";
});

Let's break this down:

myApp.controller() adds a new controller to our myApp module.
'MyController' is the name we're giving to this controller.
The function defines what this controller does.
$scope is a special object that allows the controller to communicate with the view (HTML).

Use Modules

Now that we've created our modules, how do we actually use them? It's simpler than you might think! You just need to reference them in your HTML. Here's how:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>My AngularJS App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MyController">
    <h1>{{message}}</h1>
    <script src="app.js"></script>
</body>
</html>

Notice a few key things here:

ng-app="myApp" tells AngularJS that this is where our app lives.
ng-controller="MyController" applies our controller to the body.
{{message}} will display the message we defined in our controller.

Example

Let's put it all together with a slightly more complex example. We'll create a simple todo list application:

// app.js
var todoApp = angular.module('todoApp', []);

todoApp.controller('TodoController', function($scope) {
    $scope.todos = [
        {text: 'Learn AngularJS', done: false},
        {text: 'Build an app', done: false}
    ];

    $scope.addTodo = function() {
        $scope.todos.push({text: $scope.newTodo, done: false});
        $scope.newTodo = '';
    };
});

And here's the corresponding HTML:

<!DOCTYPE html>
<html ng-app="todoApp">
<head>
    <title>Todo List</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="TodoController">
    <h2>Todo List</h2>
    <ul>
        <li ng-repeat="todo in todos">
            <input type="checkbox" ng-model="todo.done">
            <span ng-class="{'done': todo.done}">{{todo.text}}</span>
        </li>
    </ul>
    <form ng-submit="addTodo()">
        <input type="text" ng-model="newTodo" placeholder="Add a new todo">
        <input type="submit" value="Add">
    </form>
    <script src="app.js"></script>
</body>
</html>

Output

When you run this code, you'll see a simple todo list application. You can add new todos and check them off as you complete them. The magic happens through the interaction between our modules (defined in app.js) and our HTML.

Conclusion

And there you have it! We've journeyed through the world of AngularJS modules, from the basic concept to a working todo list application. Remember, modules are like Lego blocks - they help you build complex structures piece by piece. As you continue your AngularJS adventure, you'll discover even more ways to use modules to create powerful, efficient web applications.

Keep practicing, stay curious, and most importantly, have fun coding! Who knows? The next revolutionary app might just be at your fingertips!

Method	Description
angular.module()	Creates a new module
module.controller()	Adds a new controller to a module
ng-app	Directive to auto-bootstrap an AngularJS application
ng-controller	Directive to specify a controller
ng-repeat	Directive to repeat a set of HTML elements
ng-model	Directive to bind an input to a variable
ng-submit	Directive to specify submit behavior for a form
ng-class	Directive to dynamically set CSS classes

Credits: Image by storyset