Understanding AngularJS Flashcards
Why is AngularJS MV*
AngularJS is MV* because of the binding between the Model and the View, using either controllers, or the model view. The * represent whatever because there are various ways of binding the model and the view, meaning whatever happens in the Model, automatically affects the View, and vice versa
What is an attribute?
An attribute is a modifier of an html element, that provides more information about an html element
What is an angular controller?
An angular controller is a javascript constructor function that controls the flow of data in an angular application. It is the glue that sticks the model(data) and the view(html)
Describe dependency injection in javascript
Dependency injection is a process of passing an object to a function, instead of defining the object inside a function
Illustrate dependency injection
var Animal = function(type, sex) {
this.type = type;
this.sex = sex;
}
function logAnimal(animal) {
console.log(animal);
}
var tiger = new Animal(‘tiger’, ‘male’);
logAnimal(tiger); // passing tiger object to logAnimal function
- The logAnimal function is dependent on the animal object to be able to log it, and hence we are injecting the dependency, which is the animal
What is the $scope?
The $scope is a service object that is injected into the controller, and binds the controller data and the view. It sits in between the view and the controller
How does dependency injection work in angular?
Dependency injection works through JavaScript’s ability to pass a function as a string. When a function is passed as an object, the function arguments are converted by angular into a string array, with each argument representing the array element. Angular then reads each string element and creates an object based on the string value. For example, if angular sees ‘$scope’, it knows to create the $scope object
Illustrate how a controller definition survives minification
myApp.controller(‘mainController’, [‘$scope’, ‘$log’, function($scope, $log) {
} ] )
What is interpolation?
Interpolation is the process of creating a string by combining a string and a variable, e.g. ‘Hello’ + name
How does interpolation work in angular?
Interpolation works by defining variables in the controller, passing values to them, and then injecting the variable values in the view using double curly braces
Give an example of interpolation in angular
myApp.controller(‘mainController’, [‘$scope’, function($scope){
$scope.name = ‘Saki’;
}])
<h1>Hello {{ name }}</h1>
// displays Hello Saki
What is a directive?
A directive is an instruction to angular to manipulate a piece of the dom, eg. add a class
What are some examples of angular directives?
ng-model - specifies which scope variable the view element is bound to
ng-controller, ng-app
What is an angular watcher?
An angular watcher is metaphor which describes the action that angular takes to monitor any changes made to a $scope object variable. Whenever you create a data binding in your view, on a $scope object variable, angularjs automatically creates a “watch” for that variable
How are watches created in angular
Watches are created using the $scope.$watch() function
Explain how $scope.$watch() works
$scope.$watch() watches a particular $scope object variable. $scope.$watch() take two parameters, function value/scope model and listener function. When it runs, it compares the current function/model value with a previous function/model value, and if there is a difference, the listener function is called
Explain how $scope.$digest() works
$scope.$digest() iterates through all watchers in the $scope object. As it iterates over them, it interrogates the values returned by the watchers, comparing them with previous values, and if there are differences, it calls the listener function
Explain how $scope.$apply() works
$scope.$apply() takes a function as a parameter, which is executed, and after execution, the $scope.$digest is called
What is a singleton
A singleton is the one and only copy of an object. In angular, all services are singletons are services, except for $scope
What is the advantage of using services in angular?
Angular services are singletons, and this enables content sharing across ‘pages’
In angularjs, what does it mean to bootstrap?
In angularjs, bootstraping means initializing, or starting, your angularjs app.
Name two ways to bootstrap your angular app
Two ways to bootstrap your angularjs app are:
- automatic bootstraping - achieved by including ng-app to an html element i.e.
- use javascript, angular.bootstrap(document, [‘myApp’])
What is normalization
Normalization is the process in which angular converts an attribute’s name to match with a directive, eg, ng-model is converted to ngModel
What is a module?
A module is a container that contains angular components such as services, controllers, etc
What is a controller?
A controller acts as the brain of the view, it interacts with factories/services to retrieve some data, and bind the data into the view using the $scope
What is a factory?
A factory is a custom object, used to
- define re-usable tasks
- share data or state between controllers
What are the differences between a factory and a service?
The differences between a factory and a service are:
- a service is instantiated, therefore you need to use this . On the other hand, a factory is not instantiated, you need to return a custom object, which is accessible outside of the factory
- you use the service keyword to attach a service to the main module, and the factory keyword to attach a factory
What is scope isolation?
Scope isolation is the process of defining an isolated model for a directive, meaning the directive will not have access to its parent’s scope, and the parent will not have access to the directive’s scope.
How do you isolate a directive’s scope?
By defining a scope object
scope : {
}
What is the compile function?
Compile is an angular function defined for a directive, that can be called, and passed the original DOM as an argument. You can manipulate the DOM before it is instantiated
What is the link function?
Link is an angular function defined for a directive, that can be called, passed an instantiated DOM, scope, as well as attributes as arguments
What does the ngInclude directive do?
The ngInclude directive enables you to conditionally include templates, pieces of AngularJS-infused HTML,
into the page, based on the JavaScript state
which main method is exposed by the $routeProvider
the $routeProvider exposes:
when - used to map URLs. It takes 2 parameters
a. url
b. an object, which takes its own parameters,
such as templateUrl, controller, resolve,
redirectTo, etc
How is ngInclude useful?
To avoid facing CORS errors, you can use ngInclude to load files from the same domain
