Skip to main content

AngularJS Modules Explained

AngularJs Modules.

A module in AngularJS can be thought of as packages in Java. It’s the container for the different parts of an application – controllers, services, filters, directives, etc. AngularJS can group together certain functionalities/Javascript under a single module.
  • A module can define it’s own controllers, services, filter, directives, etc which will be accessible throughout the module.
  • A module can depend on other modules.
  • A module can be used by AngularJS to bootstrap an application. By passing the module name to ng-app directive, we can tell AngularJS to load this module as the main entry point for the application.
  • In angularJS, a module is defined or called using angular.module function.
    Define a Module with no dependencies
    angular.module('myapp', []);
    The first argument is the module name, ‘myApp’. The second argument is an array of module names that this module depends on. Empty square brackets denotes that this module does not have any dependencies.

Load an existing Module
If we just want to load an existing module defined elsewhere, call module function with only one parameter which is name of module.
angular.module('myApp');
Let’s take a simple example:
<html ng-app="myApp">
<head><title>Modle example</title></head>
<body>
 2 + 2 = {{2 + 2}}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js">
</script>
<script>
angular.module('myApp', []);
</script>
</body>
</html>
Above example defines a module. AngularJS then bootstraps the application using this module through the ng-app directive.
Till now, we have just created empty modules. There is nothing inside them. We will add functionality to them in next posts.
Labels:

Comments

Post a Comment

Popular posts from this blog

Yahoo! Calendar "Add Event" Seed URL Parameters

I can't seem to find any official documentation on this, so here are my notes. Some information gathered from  http://richmarr.wordpress.com/tag/calendar/ Other information gathered through trial and error, and close examination of the "Add Event" form on Yahoo!'s site. Yahoo! Calendar URL Parameters Parameter Required Example Value Notes v Required 60 Must be  60 . Possibly a version number? TITLE Required Event title Line feeds will appear in the confirmation screen, but will not be saved. May not contain HTML. ST Required 20090514T180000Z Event start time in UTC. Will be converted to the user's time zone. 20090514T180000 Event start time in user's local time 20090514 Event start time for an all day event. DUR value is ignored if this form is used. DUR 0200 Duration of the event. Format is HHMM, zero-padded. MM may range up to 99, and is converted into hours appropriately. HH values over 24 hours appear to be modulated by 24. Durations t...
1 comment
Read more

Spring boot basics

  Spring Boot is a powerful framework that simplifies the development of enterprise-grade applications by providing a pre-configured setup that allows developers to focus more on writing business logic rather than managing configuration. In this post, we’ll dive into the architecture flow of a typical Spring Boot application, helping you understand how the components interact and how requests are processed from start to finish. 1. The Core Components of Spring Boot Architecture Before we delve into the flow, it’s essential to understand the core components that make up a Spring Boot application: Spring Framework : The backbone of Spring Boot, providing dependency injection, AOP, and transaction management. Embedded Server : Spring Boot applications usually run with an embedded server (Tomcat, Jetty, or Undertow), making them self-contained and easy to deploy. Auto-Configuration : This feature automatically configures Spring components based on the dependencies present in the projec...
Post a Comment
Read more

HTML5 Learning Roadmap

  ✅ HTML5 Learning Roadmap 🏆 Goal: Become proficient in writing clean, accessible, and SEO-friendly HTML5 code for production. Day Topic Learning Focus Output/Exercise 1 Introduction to HTML5 HTML document structure, DOCTYPE, head, body, metadata Create a basic HTML5 page 2 HTML Elements and Semantics Elements ( <div> , <span> , <article> , <section> ) and their semantic meaning Build a semantic HTML5 layout 3 Headings and Paragraphs <h1> to <h6> , <p> , proper heading hierarchy for SEO Create a structured blog post 4 Lists and Navigation Ordered ( <ol> ), unordered ( <ul> ), and navigation ( <nav> ) Create a navigation menu 5 Links and Buttons <a> , <button> , attributes like target , rel , aria-label Create a navigation bar with working links 6 Images and Multimedia <img> , <audio> , <video> , lazy loading, alt attributes Embed responsive images and a video 7 Forms - Part 1 <input...
Post a Comment
Read more