Angular Concepts

Disclaimer

• These slides are a composition of various resources I found on the internet and is not an original content of me

• The primary intent of the slides is to teach myself angular and better organizing of keypoints of all things Angular if I have to review

• The other intent is to help my friends who are learning angular to give a direction

Resources/References

• https://docs.angularjs.org/guide/

• ng-book

• codeschool

• pluralsight

• blogs

Angular

• It’s a Javascript Framework that runs in the browser

• ng stands for ANGULAR

• ng-app initializes the app with that particular dom element and the child elements

• angular is one identifier that angular puts in the global namespace so you can call different methods

Modules

• Container for the different parts of your app-controllers, services, filters, directives

• you can package code as reusable components

• Instead of having the code sit in one single file you can split up the code based on features

• Convention: Is to have a module for each feature and an application level module which depends on the above modules and contains any initialization code

Module API

• is an interface for configuring angular modules

• commonly used methods are

- factory

- filter

- controller

- directive

- config

- run

angular.module

• It’s a global place for creating, registering and retrieving angular modules

• all modules that should be available to an application must be registered using this mechanism

• angular.module(“sleepEarly”, []); creates a new module

• angular.module(“sleepEarly”); retrieves an existing module

Configuring existing services

• You can use the ‘config’ method on the MODULE API to configure existing services

• with this method you can register work that needs to be performed on module loading

Controllers

• Controllers are javascript functions that are used to augment the angular scope

• When the controller is attached to the DOM via ng-controller directive, angular will instantiate a new controller object using the specified constructor function

• A new child scope is available as an injectable parameter to the controllers constructor function as $scope

• You can attach something on the $scope like $scope.message

• setup the model data and bind it to the view• binding expressions in view look for the models on the

scope

Controllers

Use them to 1) setup initial state of the $scope object2) add behavior to the $scope object

Don’t use them to 1) manipulate the DOM2) format input3) filter input4) share code

More on Controllers

• The properties you attach to $scope object constitutes the model that is going to be used in the view

• All properties on the $scope are available to the template at that point in the DOM where the controller is registered

• we don’t normally have controllers in the global namespace.

• Angular module as a home for a controller

Data Binding

• Automatic synchronization of data between model and view

• The way angular implements data binding lets you treat the model as the single source of truth in your application

• View is a projection of model at all times

• Any changes to the view are immediately reflected in the model and any changes in the model are immediately reflected on the view

Scopes

• Its an object that refers to the application model

• It is an execution context for expressions

• $scope.$watch observe model mutation

• $scope.$apply to propogate model changes through the system into the view

• It’s a glue between application controller and view

• During the template linking phase the directives setup a watch expression on the $scope

Forms

• ng-model

• novalidate used to disable browsers native validation

• ng-valid the model is valid

• ng-invalid the model is invalid

• ng-pristine the control hasn’t been interacted with yet

• ng-dirty the control has been interacted with

Form validation

• ng-required

• ng-pattern

• ng-minlength

• ng-maxlength

Directives

• are markers on DOM elements that tell the HTML compiler($compile) to attach a specified behavior to that DOM element or even transform the DOM element

• We register a directive using module.directivemethod

• types of directives: Element, Attribute, Class• Use Cases: resusable html code, DOM

manipulation• templateUrl is used to specify where this html is

located

More on Directives

• https://docs.angularjs.org/guide/directive

• Isolate scope

• creating directives that manipulate the DOM using the link option

• angular.element is an alias for Jquery function

• If Jquery is not available it uses the built-in subset of jquery called jqLite

Commonly used directives

• ng-app

• ng-controller

• ng-click

• ng-model

• ng-show

• ng-hide

• ng-class

• ng-repeat

Commonly used directives

• ng-submit

• ng-src

• ng-init

• ng-options

• ng-change

Why Services?

• For memory and performance purposes, controllers are instantiated only when they are needed and discarded when they are not. That means that every time we switch a route or reload a view, the current controller gets cleaned up by Angular.

• Services provide a method for us to keep data around for the lifetime of the app and communicate across controllers in a consistent manner.

Services

• Services are singleton objects that are instantiated only once per app(by the $injector) and lazy-loaded(created only when necessary). They provide an interface to keep together those methods that relate to a specific function.

• To use an angular service, you add it as a dependency for the component(controller, service, filter or directive) that depends on the service

Creating services

• you can register a service using module#factory method

• it returns an object or a function that represents the service which can injected into any component that specifies the service as a dependency

Switching Views based on routes

• ng-view: is a directive that complements the $route service by including the rendered template of the current route into the main layout file.

• Everytime the current route changes, the included view changes with it accordingly to the confuguration of the $route service

$route

• $route is used for deep-linking URLs to controllers and views. It watches $location.url() and tries to map the path to an existing route definition.

• Requires the ngRoute module to be installed

• You can define routes through $routeProvider’sAPI

• $route service is used in conjunction with the ngView directive and the $routeParams service

$location

• It parses the URL in the browser address bar and makes the url available in your application

commonly used methods are

• $location.path

• $location.url

$http

• It’s a core angular service that facilitates communication with remote HTTP servers using browsers XMLHTTPRequest object

More

• Most production applications most javascriptgoes through a minifier hence we need a different syntax for controller dependency injection using $injector

• angular.element($0).scope