This post is a summary of CodeSchool Angular.JS Course
Directives:
Directives:
- A Directive is a marker on a HTML tag that tells Angular to run or reference some JavaScript code.
index.html:
StoreController is the name of function to call
Modules:
[ ] is for dependencies - Other libraries we might need.
app is another Directive for auto-loading of an application
Expressions:
<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="StoreController">
. . .
</body>
</html>
app.js:
function StoreController() {
alert('Welcome, Gregg!');
}
StoreController is the name of function to call
Modules:
- Where we write pieces of our Angular application.
- Mahes our code more maintainable, testable and readable.
- Where we define dependencies for our application.
var app = angular.module('store', [ ]);
[ ] is for dependencies - Other libraries we might need.
<html ng-app="store">
app is another Directive for auto-loading of an application
Expressions:
- Allow you to insert dynamic values into your HTML
Exampls:
<p>
I am {{4 + 6}} = <p>I am 10</p>
</p>
<p>
{{"hello" + " you"}} = <p>hello you</p>
</p>Controllers:
- Controllers are where we define our app's behavior by defining functions and values.
(function() {
var app = angular.module('store', [ ]);
app.controller('StoreController', function() {
this.product = gem;
});
var gem = {
name: 'Dodecahedron',
price: 2.95,
description: '. . .'
}
})();
we always use the word controller.
<!doctype html>
<html ng-app="store">
<head>
<meta charset="UTF-8">
<title>Example - example-example94-production</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
<div ng-controller="StoreController as store">
<h1> {{store.product.name}} </h1>
<h2> ${{store.product.price}} </h2>
<p> {{store.product.description}} </p>
</div>
<script src="angular.min.js"></script>
<script src="app02.js"></script>
</body>
</html>
- We have access to the store controller just inside the div element!
Some useful Directives:
ng-show
<button ng-show="store.product.canPurchase"> Add to Cart </button>
var gem = {
name: 'Dodecahedron',
price: 2.95,
description: '. . .',
canPurchase: false
}
ng-hide:
not ng-show
ng-repeat:
<div ng-repeat="product in store.products">
<h1> {{product.name}} </h1>
<h2> ${{product.price}} </h2>
<p> {{product.description}} </p>
<button ng-show="product.canPurchase"> Add to Cart </button>
</div>
var gem = [
{
name: 'Dodecahedron',
price: 2.95,
description: 'description kommt hier',
canPurchase: true,
},
{
name: 'Pentagonal Gem',
price: 5.95,
description: 'description kommt hier',
canPurchase: true,
}
];
Filters:
Filters the output:
date:
{{'1388123412323' | date:'MM/dd/yyyy @ h:mma'}} = 12/27/2013 @ 12:50AM
uppercase:
{{'octagon gem' | uppercase}} = OCTAGON GEM
limitTo:
{{'My Description' | limitTo:8}} = My Descr
limit an array for first 3 products:
<li ng-reapeat="product in store.products | limitTo:3">
orderBy:
<li ng-reapeat="product in store.products | orderBy: '-price'"|> sorts by descending price. Without '-': ascending order
Allow us to sort our products
ng-source:
A Directive for src in img tags (todo)
ng-click:
When ng-click changes the value of tab, the {{tab}} expression automatically gets updated!
Expressions define a 2-way Data Binding.
<ul class="nav nav-pills">
<li><a href ng-click="tab = 1">Description</a></li>
<li><a href ng-click="tab = 2">Description</a></li>
<li><a href ng-click="tab = 3">Description</a></li>
</ul>
{{tab}}
ng-init:
allows us to evaluate an expression in the current scope. (default value)
ng-class:
<li ng-class="{ active:tab === 3 }"> if tab is 3 the do this ...
Keine Kommentare:
Kommentar veröffentlichen