Skip to content

app.md

Latest commit

 

History

History
123 lines (98 loc) · 4.25 KB

app.md

File metadata and controls

123 lines (98 loc) · 4.25 KB

Application

Table of Contents

App Modules

  • App Modules are registered in app/index.js.

Routes

Routes are pathways within the application.

  • Route modules are registered in app/route.js.
  • The structure of a route path looks like the: {{component}}/{{template}}.html.
  • ui-router handles all the routing in Rectangular apps - you can learn more about it here.

Example

A route looks something like this:

angular
	.module("home.route", [
		"home.component"
	])
	.config(($stateProvider) => {
		$stateProvider
			.state("home", {
				"url": "/",
				"template": "<home></home>"
			})
		;
	})
;

Services

Services are used for sending/receiving/manipulating data.

  • You can use services to organize and share code across your app.

Directives

Directives are used to control DOM behaviour and to render data in HTML format.

  • The structure of a directive template path looks like the: {{component|directive}}/{{template}}.directive.html.
  • A directive should decorate, and should generally be implemented as an attribute and restricted to 'A'.

Components

A component is a specialized directive that organizes a controller with a template. One main difference between a component and a directive is that a component doesn't have a link function.

  • A component is restricted to 'E' by default, meaning custom element.
  • For DOM decoration, a component can use directives.
  • Relevant files are placed in the app/component/{{componentName}} directory:
    • Components (js)
    • Directives (js)
    • Templates (html)
    • Routes (js)
    • Services (js)
    • Tests (js)
    • Styles (scss)
    • Models ([data|mixin]json)
    • Images (bmp, gif, ico, jpeg, jpg, png, svg)

Example

A simple AngularJS component may resemble the following:

const options = {};

options.templateUrl = "home/home.html";
options.controllerAs = "vm";

options.controller = function HomeController() {
	const vm = this;
};

angular
	.module("home.component", [])
	.component("home", options)
;

Controllers

Controllers are used in both components and directives.

  • Controllers should be used for:

    • Setting up the initial state of the View Model.
    • Adding behavior to the View Model.

  • Do not use controllers:

    • For anything other than business logic.
    • To share code or state across controllers — use services instead.

View Model

  • A short capture variable called vm is generally used for the View Model object.
  • The this keyword is contextual and when used within a function inside a controller it may change it's context.
  • Capturing the context of this with vm avoids encountering this problem.
  • The vm variable is assigned using the controllerAs syntax.

Templates

  • The structure of a template path looks like the: {{component}}/{{template}}.html.

Example

<ng-include src="'{{component}}/{{template}}.html'"></ng-include>

UX

Animations

  • The ngAnimate module provides support for CSS-based and JavaScript-based animations.

Messages

  • The ngMessage module commonly is to display error messages for inputs.

Sanitize

  • The ngSanitize module provides functionality to sanitize HTML.

Assistive Technology

  • The ngAria module provides support for common ARIA attributes used in assistive technologies.