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.
