Hello AngularJS Flashcards
What is a module?
A module contains the different components of an AngularJS app
What is a controller?
A controller manages the app’s data.
What is an expression?
An expression displays values on the page.
What is a filter?
A filter formats the value of an expression.
In which file are modules usually defined?
App.js
What is the basic syntax for defining a module?
var app = angular.module(“myApp”, []);
where myApp is the name of your module.
How is a module applied to an html page?
By adding the ng-app attribute to the body tag.
<body>
myApp is the name of the module
</body>
In which file are controllers usually defined?
Controllers are usually defined in their own JS file whose name matches the name of the controller.
A controller called MainController is usually defined in a JS file named MainController.js.
What is the basic syntax for defining a controller?
app.controller(‘MyController’, [‘$scope’,
function($scope) {
$scope.title = ‘Most Popular in Books’;
$scope.promo = ‘My Promo’;
$scope.product = {
name: ‘The Book of Trees’,
price: 19,
pubdate: new Date(‘2014’, ‘03’, ‘08’)
};
}]);
MyController is the name of the controller
How is a controller applied to an html page?
By adding the ng-controller tag
<div>
MainController is the name of the controller
</div>
How does a controller and its associated HTML page communicate with each other?
Using the $scope object
How can a controller send data to an HTML page using the $scope object?
By defining properties on the $scope variable during or after the definition of the controller.
app.controller(‘MyController’, [‘$scope’,
function($scope) {
$scope.title = ‘Most Popular in Books’;
$scope.promo = ‘My Promo’;
$scope.product = {
name: ‘The Book of Trees’,
price: 19,
pubdate: new Date(‘2014’, ‘03’, ‘08’)
};
}]);
During the definition of the MyController controller, the properties title, promo, and product are defined on the $scope object.
How does an HTML page display the properties defined on a $scope object?
Using handlebars expressions
<div>
<h1>{{ title }}</h1>
<h2>{{ promo }}</h2>
</div>
title and promo are properties defined on the $scope object during the definition of the MyController controller
What is a filter?
A filter formats the value of an expression.
How are filters applied to expressions?
{{ title | uppercase }}
The uppercase filter is being applied to the title property of the $scope object.
What filter is used to display a string in uppercase?
uppercase
What filter is used to display a number as currency?
currency
What filter is used to format a date?
date
How can an array of objects defined on a $scope object be displayed on an HTML page?
Using the ng-repeat attribute
<div>
<div>
<img></img>
<p>{{ product.name }}</p>
<p>{{ product.price | currency }}</p>
<p>{{ product.pubdate | date }}</p>
</div>
</div>
products is a property on the $scope object that returns an array of objects
How can the src attribute of an image be configure using an expression
Using the ng-src attribute
<img></img>
cover is a property defined on the product object which is in turn defined on the $scope object or is the iteration variable if this HTML code is placed inside an element with ng-repeat defined
What attribute to used to configure which function is called when an element is clicked?
ng-click
<p>
plusOne is a function defined on the $scope object
$index is a property available inside ng-repeat loops that returns the value of the current index of the array being iterated</p>
What property inside ng-repeat loops returns the index of the current object in the array being iterated?
$index
What property inside ng-repeat loops returns true if the current object is the first object in the array being iterated ?
$first
What property inside ng-repeat loops returns true if the current object is the last object in the array being iterated ?
$last
What property inside ng-repeat loops returns true if the the index of the current object in the array being iterated is even?
$even
What property inside ng-repeat loops returns true if the the index of the current object in the array being iterated is odd?
$odd
What value for the date filter is used to print a date in this format (Sep 9, 2015)?
mediumDate
Ex:
{{ product.date | date:’mediumDate’ }}
What value for the date filter is used to print a date in this format (9/9/2015)?
shortDate
Ex:
{{ product.date | date:’shortDate’ }}
What value for the date filter is used to print a date in this format (2:00 PM)?
shortTime
Ex:
{{ product.date | date:’shortTime’ }}
