Level 4 Level 6
Level 5

AngularJS Basics II


38 words 0 ignored

Ready to learn       Ready to review

Ignore words

Check the boxes below to ignore/unignore words, then click save at the bottom. Ignored words will never appear in any learning session.

All None

Ignore?
<div ng–view></div>
We are making this <div> as the place we will load partial pages or view. The surrounding page will stay static while we load changing UI into this section
angular.module('project', ['mongolab']).
project – this defines the project module. You use modules to configure existing services, and define new services, directives, filters etc. mongolab – modules can depend on other module. Here project needs mongolab which han…
function CreateCtrl($scope, $location, Project) { location?
You use the $location service to access the browser's location
function CreateCtrl($scope, $location, Project) { $scope.save = function() { $scope.save?
Called when the user clicks the save button in the view
Directives def
Directives is a unique and powerful feature available only in Angular. Directives let you invent new HTML syntax, specific to your application.
Sample angularjs
<!DOCTYPE html> <html ng–app> <head><title></title></head> <body><div class="container"> Name:<input type="text" ng–model="name" /> {{name}}</div> <script src="Scripts/angular.js"></script> </nody></html>
How can you confirm a document has angularljs
<html ng–app> ng–app is a build in directive this is an equivalent data–ng–app
ng–model directive {{ name }}
behind the scene adds a property called name in the scope data binding expression
ng–init and ng–repear ng–init allows to init some data ng–repeat allows to iterate through data
<!DOCTYPE html> <html data–ng–app> <head><title>Using AngularJS Directives and Data Binding</title> </head> <body data–ng–init="names=['John Smith', 'John Doe', 'Jane Doe']"> <ul><li data–ng–repeat="personName in names"> {{ personName }}</li></ul> <script src="
init an array of objects
<body data–ng–init="customer=[{name: 'John Smith', city: 'Phoenix' }, {name: 'John Doe', city: 'Texas' }, {name: 'Jane Smith', city: 'Austion' }]"> and then to access <ul> <li data–ng–repeat="…
filter an element from an array of values/obj
<body data–ng–init="customer=[{name: 'John Smith', city: 'Phoenix' }, {name: 'John Doe', city: 'Texas' }, {name: 'Jane Smith', city: 'Austion' }]"> and then to set Name: …
set upper case (lowercase)
<li data–ng–repeat="cust in customer | filter:name | orderBy:'city'"> {{ cust.name }} – {{ cust.city }} </li>
simple controller in AngularJS
<script> function SimpleCOntroller($scope) { $scope.customers = [ { name: 'Mikie', city: 'Orlando' }, { name: 'Pluto', city: 'Planetoid Pluto' }…
How to use a sample controller
<div data–ng–controller="SimpleController"> Name: …
define a module
var demoApp = angular.module('demoApp', []); the empty array is for dependencies
How do you add angular to a web page?
You use a script tag to include it: <script src="
Where is the best place to put scripts in an HTML page?
It is a good idea to place scripts at the bottom of the <body> element. This improves page loading, because HTML loading is not blocked by scripts loading.
The _______ directive defines an AngularJS application.
The ng–app directive defines an AngularJS application.
The _______ directive binds the value of HTML controls (input, select, textarea) to application data.
The ng–model directive binds the value of HTML controls (input, select, textarea) to application data.
The _______ directive binds application data to the HTML view.
The ng–bind directive binds application data to the HTML view.
The ng–app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application.
Given the following example, what is the "owner" of the angular application? <!DOCTYPE html> <html> <body> <div ng–app=""> <p>Name: <input type="text" ng–model="name"></p> <p ng–bind="name"></p> </div> <script src="
The ng–model directive binds the value of the input field to the application variable name.
Given the following example, what is the ng–model directive doing? <!DOCTYPE html> <html> <body> <div ng–app=""> <p>Name: <input type="text" ng–model="name"></p> <p ng–bind="name"></p> </div> <script src="
The ng–bind directive binds the innerHTML of the <p> element to the application variable name.
Given the following example, what is the ng–bind directive doing? <!DOCTYPE html> <html> <body> <div ng–app=""> <p>Name: <input type="text" ng–model="name"></p> <p ng–bind="name"></p> </div> <script src="
The ng–app directive does what?
The ng–app directive defines an AngularJS application.
The ng–model directive does what?
The ng–model directive binds the value of HTML controls (input, select, textarea) to application data.
The ng–bind directive does what?
The ng–bind directive binds application data to the HTML view.
The _______ directive initialize AngularJS application variables.
The ng–init directive initialize AngularJS application variables.
The ng–init directive does what?
The ng–init directive initialize AngularJS application variables.
You can use _______, instead of ng–, if you want to make your page HTML5 valid.
You can use data–ng–, instead of ng–, if you want to make your page HTML5 valid.
<div ng–app="" ng–init="firstName='John'"> <p>The name is <span ng–bind="firstName"></span></p> </div>
Fill in the blank for the following example: <div ng–app="" _______ ="firstName='John'"> <p>The name is <span ng–bind="firstName"></span></p> </div>
The Rule of One
At the heart of Separation of Concerns is _______
/app /content /scripts /test
What are the four root folders for an AngularJS application (according to the PluralSight course)?
feature folders as opposed to type folders.
What folders are found under the /app folder?
What is the LIFT principle?
(L)ocating our code is easy (I)dentify the code at a glance (F)lat structure as long as we can (T)ry to stay DRY
Location and long file names
In LIFT, what two properties of a file helps (I)dentify the code quickly?
3 to 7
In LIFT, to (F)latten the code, after how many files in a folder should you consider creating a new folder?
How can you apply the (I) in LIFT to your code?
Ensure that the different public properties and members are at the top of your source file ("above the fold")
filter an element from an array of values/obj and order by city
…<br /> <input type ="text" data–ng–model="name"/> {{ name }} <ul> <li data–ng–repeat="cust in customer | filter:name | orderBy:'city'"> {{ cust.name }} – {{ cust.city }} </li> </ul>