Reading...
Play button
Play button
Use LEFT and RIGHT arrow keys to navigate between flashcards;
Use UP and DOWN arrow keys to flip the card;
H to show hint;
A reads text to speech;
23 Cards in this Set
- Front
- Back
|
What is AngularJS
|
AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries
|
|
|
how to tell AngularJS to be active in a postion of the pages (in our example the entire document)
|
<html ng-app>
<html ng-app="project"> the ng-app activates the project module for this page region |
|
|
how to load AngularJS in our HTML
|
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> </head> |
|
|
<h1>Hello {{yourName}}!</h1> is
|
The {{ }} are a declarative way of specifying data binding locations in the HTML. AngularJS will automatically update this text whenever the yourName property change
<div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div> |
|
|
Data Binding def
|
Data-binding is an automatic way of updating the view whenever the model changes, as well as updating the model whenever the view changes. This is awesome because it eliminates DOM manipulation from the list of things you have to worry about.
|
|
|
Controller def
|
Controllers are the behavior behind the DOM elements. AngularJS lets you express the behavior in a clean readable form without the usual boilerplate of updating the DOM, registering callbacks or watching model changes.
|
|
|
Deep Linking def
|
deep link reflects where the user is in the app, this is useful so users can bookmark and email links to locations within apps. Round trip apps get this automatically, but AJAX apps by their nature do not. AngularJS combines the benefits of deep link with desktop app-like behavior.
|
|
|
<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 handles the persistence for this application |
|
|
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="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> </body> </html> |
|
|
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="cust in customer"> {{ cust.name }} - {{ cust.city }} </li> </ul> |
|
|
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: <br /> <input type ="text" data-ng-model="name"/> {{ name }} <ul> <li data-ng-repeat="cust in customer | filter:name"> {{ cust.name }} - {{ cust.city }} </li> </ul> //this will filter on names and cities |
|
|
filter an element from an array of values/obj and order by city
|
<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: <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> |
|
|
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' }, { name: 'Minie', city: 'Disneyland' }, ]; } </script> |
|
|
How to use a sample controller
|
<div data-ng-controller="SimpleController">
Name: <br /> <input type ="text" data-ng-model="name"/> {{ name }} <ul> <li data-ng-repeat="cust in customers | filter:name | orderBy:'city'"> {{ cust.name }} - {{ cust.city | uppercase }} </li> </ul> </div> <script> function SimpleController($scope) { $scope.customers = [ { name: 'Mikie', city: 'Orlando' }, { name: 'Pluto', city: 'Planetoid Pluto' }, { name: 'Minie', city: 'Disneyland' }, ]; } </script> |
|
|
define a module
|
var demoApp = angular.module('demoApp', []);
the empty array is for dependencies |
