Skip to content

AngularJs Modules.

Jump to bottom
Yash edited this page Apr 13, 2017 · 1 revision

AngularJs Modules.

NOTE: One of the benefits of having a modular architecture is code reuse

Modules are jsut like containers for the different parts of application, – controllers, services, filters, directives, etc. AngularJS can group together certain functionalities/Javascript under a single module.

  • You can think of module as a main() in other types of application.

  • A module can define it’s own controllers, services, filter, directives, etc which will be accessible throughout the module. angular.Module is an Interface for configuring AngularJS 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. <html ng-app="myApp"> ... </html>

Define a Module with dependencies

Below snippet defines a module named myApp, which depends on other modules like: ui.bootstrap, ngRoute, ...

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>

angular.module('myapp', ['ui.bootstrap', 'ngResource', 'ngAnimate', 'ngRoute', 'myapp.shared', 'myapp.dashboard']);

It means all the functionalities available in ‘ui.bootstrap’, ‘ngRoute’ & So, on ..., will be accessible throughout module ‘myApp’.

    modules - config - routes    ------------------|
                          |                        |
                    TemplateViews  -scope-    controllers
                          |                        |
                     Directives            factory | Services

Recommended Setup:

  • Use unique naming conventions with separators for sub-modules to avoid module name collisions. For example app may be your root module while app.dashboard and app.users may be modules that are used as dependencies of app.
  • Recomentded saperate module for each feature, reusable component (especially directives and filters)

Templates

In AngularJS, templates are written with HTML that contains AngularJS-specific elements and attributes. AngularJS combines the template with information from the model and controller to render the dynamic view that a user sees in the browser.

These are the types of AngularJS elements and attributes you can use:

  • Directive — An attribute or element that augments an existing DOM element or represents a reusable DOM component.
  • Markup — The double curly brace notation {{ }} to bind expressions to elements is built-in AngularJS markup.
<!-- Template with directive[ngInit] and curly-brace[ {{ }} ] expression bindings -->

<div ng-init="username='A user'">
  <p ng-init="apptitle='Escaping demo'">{{apptitle}}: \{\{ username = "defaced value"; \}\}</p>
  <p><strong>{{username}}</strong></p>
</div>

Output:
Escaping demo: {{ username = "defaced value"; }}
A user
  • Filter — Formats data for display. Ex: Pagination, Search functionalities.
  • Form controls — Validates user input.

The AngularJS tutorial steps seven and eight show how we can separate Templates in HTML files. use the ngView directive to load partials based on configuration passed to the $route service.

Escaped Interpolation

$interpolate provides a mechanism for escaping interpolation markers. Start and end markers can be escaped:

  • By preceding each of their characters with a REVERSE SOLIDUS U+005C (backslash). It will be rendered as a regular start/end marker, and will not be interpreted as an expression or binding.
  • The ngNonBindable directive tells AngularJS not to compile or bind the contents of the current DOM element.

Example:

<div>Normal: {{1 + 2}}</div>

<div>Ignored by backslash : \{\{1 + 2\}\}</div>
<div ng-non-bindable>Ignored by ngNonBindable directive : {{1 + 2}}</div>

<!-- Output:
Normal: 3

Ignored by backslash : 3
Ignored by ngNonBindable directive : {{1 + 2}}
-->

ngModel:

The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.

ngModel is responsible for:

  • Binding the view into the model, which other directives such as input, textarea or select require.
  • Providing validation behavior (i.e. required, number, email, url).
  • Keeping the state of the control (valid/invalid, dirty/pristine, touched/untouched, validation errors).
  • Setting related css classes on the element (ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-touched, ng-untouched, ng-empty, ng-not-empty) including animations.
  • Registering the control with its parent form.

Note: ngModel will try to bind to the property given by evaluating the expression on the current scope. If the property doesn't already exist on this scope, it will be created implicitly and added to the scope.

Controllers

In angular a controller is a javascript functuion, the job of a controller is to create a model for the view to display

Use a capture variable for this when using the controllerAs syntax. Choose a consistent variable name such as vm, which stands for ViewModel.

Why?: The this keyword is contextual and when used within a function inside a controller may change its context. Capturing the context of this avoids encountering this problem.

/* avoid */
function CustomerController() {
    this.name = {};
    this.sendMessage = function() { };
}
/* recommended */
function CustomerController() {
    var vm = this;
    vm.name = {};
	/* avoid */
    vm.sendMessage = function() { };
	/* recommended */
	vm.gotoSession = gotoSession;
	
	function gotoSession() {
      /* */
    }
}
  • Defer Controller Logic to Services

Clone this wiki locally