Category: AngularJS

AngularJS Services

Angular services are singleton objects that carry out some sort of task. We also use AngularJS services to organize and share code across the application.Angular Services follow Single Responsibility Principle (SRP) and are wired together using dependency injection (DI). The Single Responsibility principle ensures that each object will have only a single responsibility. AngularJS includes services for different purposes. For example, $http service can be used to send an AJAX request to the remote server. AngularJS also allows you to create custom service for your application.

There are 5 different ways to create services in Angular:
1. Value
2. Factory
3. Service
4. Provider
5. Constant

… full article

Form Validation

An Angular form is a regular HTML form with few additional features. For each field (input, radio, select, etc.) in the form, we need an object of the FormControl class. The FormControl object gives information about that field. Its value, if the value is valid, and if it is not valid what are the validation errors, etc.

It also provides the state of the field such as touched, untouched, dirty, pristine, etc.

Similarly, a FormGroup is the collection of the FormControl objects. Every Angular form has at least one FormGroup. You may decide to have multiple FormGroups in use-cases like separating the handling of personal details and professional details sections of a user registration form.

All the properties of a FormGroup (valid, error, etc.) is also available to the FormControl. For instance, the valid property of a FormControl will return true if all FormControl instances are valid.

Example:

… full article

ng-submit

Enables binding AngularJS expressions to onsubmit events.
Additionally it prevents the default action (which for form means sending the request to the server and reloading the current page), but only if the form does not contain action, data-action, or x-action attributes.

… full article

More topics covered:

• ref types in service
• service inside service
• $ prefix only for angular services
• $http.post instead of submit

Links:

• Class code: custom services
• Class code: custom services + ajax
• Class code: form validation
• Lesson Summary Video!

Ref type vs. Value type

Types in javascript are either treated by Value Type or by Reference Type. A Value Type holds the data within its own memory allocation and a Reference Type contains a pointer to another memory location that holds the real data. Reference Type variables are stored in the heap while Value Type variables are stored in the stack.

Explaining Value vs. Reference in Javascript

What is Routing in AngularJS?

If you want to navigate to different pages in your application, but you also want the application to be a SPA (Single Page Application), with no page reloading, you can use the UI-Router module. The UI-Router module routes your application to different pages without reloading the entire application.

ui router home page link

$http

The $http service is a core AngularJS service that facilitates communication with the remote HTTP servers via the browser’s XMLHttpRequest object or via JSONP.
The $http API is based on the deferred/promise APIs exposed by the $q service.
The $http service is a function which takes a single argument — a configuration object — that is used to generate an HTTP request and returns a promise that is resolved (request success) or rejected (request failure) with a response object.

… full article

More topics covered:

• using angular with web api
• mvc controller + templateUrl
• $state – home-page link
• adding bootstrap to angular

Links:

• Class code: ref vs value
• Class code: router-ui basic
• Class code: router-ui webapi
• Class code: router-ui webapi zipfile
• Lesson Summary Video!

 

$ Scope Commands

$rootScope – angularjs docs

$scope.$watch – angularjs docs

$scope.$broadcast – angularjs docs

$scope.$on – angularjs docs

this vs $scope – chevtek.io

ng-repeat

The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.

Special properties are exposed on the local scope of each template instance, including:

Variable	Type	Details
$index	number	iterator offset of the repeated element (0..length-1)
$first	boolean	true if the repeated element is first in the iterator.
$middle	boolean	true if the repeated element is between the first and last in the iterator.
$last	boolean	true if the repeated element is last in the iterator.
$even	boolean	true if the iterator position $index is even (otherwise false).
$odd	boolean	true if the iterator position $index is odd (otherwise false).

… full article

Filters

AngularJS provides filters to transform data:

• currency Format a number to a currency format.
• date Format a date to a specified format.
• filter Select a subset of items from an array.
• json Format an object to a JSON string.
• limitTo Limits an array/string, into a specified number of elements/characters.
• lowercase Format a string to lower case.
• number Format a number to a string.
• orderBy Orders an array by an expression.
• uppercase Format a string to upper case.

… full article

More topics covered:

• storing commands in Map
• ng-model for <select … >
• as keyword
• parent + child scope
• ng-repeat sortBy, filter

Links:

• Class code: parent child this
• Class code: $watch
• Class code: $broadcast $on
• Class code: ng-repeat
• Class code: ng-repeat + ajax
• Class code: calculator ex
• Lesson Summary Video!

 

JavaScript – more features

• Promise – MDN link
• JQuery promise deferrd – MDN link
• Promise – es6-features.org
• Promise.all – es6-features.org
• function* – MDN link

ng-class

The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.

The directive operates in three different ways, depending on which of three types the expression evaluates to:

1. If the expression evaluates to a string, the string should be one or more space-delimited class names.
2. If the expression evaluates to an object, then for each key-value pair of the object with a truthy value the corresponding key is used as a class name.
3. If the expression evaluates to an array, each element of the array should either be a string as in type 1 or an object as in type 2. This means that you can mix strings and objects together in an array to give you more control over what CSS classes appear. See the code below for an example of this.

The directive won’t add duplicate classes if a particular class was already set.

When the expression changes, the previously added classes are removed and only then are the new classes added … full article

ng-model

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 … full article

More topics covered:

• IEnumerable
• iterators and generators
• JQuery – fail vs catch
• promise – resolve and reject
• promise return –> then
• creating our own promises
• angular drop-down ng-model
• angular checkbox ng-model

Links:

• Class code: promise
• Class code: iterators
• Class code: ng-class
• Class code: ng-model
• Lesson Summary Video!

 

JavaScript – more features

• Arrow functions – MDN link
• Lexical this – tutorials point
• array: map, filter, find, every, some – poka
• array reduce – MDN link
• set – MDN link
• map – key, value – MDN link
• class, inheritance, getter setter – MDN link

Angular features

• angular.module – bootstrap
• controllers- angular docs
• $scope – angular docs
• ng-controller in HTML

Dependency Injection

Dependency Injection is a software design in which components are given their dependencies instead of hard coding them within the component. It relieves a component from locating the dependency and makes dependencies configurable. It also helps in making components reusable, maintainable and testable.
AngularJS provides a supreme Dependency Injection mechanism. It provides following core components which can be injected into each other as dependencies: Value, Factory, Service, Provider, Constant … full article

More topics covered:

• angular bootstrap file
• angular controller instances
• $scope data + functions

Links:

• Class code: more js
• Class code: AngularJS controllers
• Lesson Summary Video!