(This is the note of angular course in HKUST.)
Scope is the core part of Angular’s two-way binding, it’s the ‘glue’ between controller and view. The controller set properties to the scope and the view get the view binds to the properties. Then the angular will keep the values in sync.
在實際操作中，每個ng-app標籤下將生成一個rootScope，而每個Controller都將生成一個基於rootScope的子Scope，用於綁定數據與函數。在使用Scope之後，HTML代碼中不再需要再前置Controller的名字，只要將Controller賦值給ng-controller參數即可。子Scope中可以使用父節點的函數或值。
另外，在同時使用angular與gulp時，需要引入gulp-ng-annotate，並在JS文件執行uglify之前執行該工作。當然，首先要require進來。
gulp.task('usemin', ['jshint'],
function() {
return gulp.src('./app/index.html').pipe(usemin({
css: [minifycss(), rev()],
js: [ngannotate(), uglify(), rev()]
})).pipe(gulp.dest('dist/'));
});There is ngShow order been used, the HTML code is as followed.
<!DOCTYPE html>
<html lang="en" ng-app="confusionApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<title>Ristorante Con Fusion: Menu</title>
<!-- Bootstrap -->
<!-- build:css styles/main.css -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="styles/bootstrap-social.css" rel="stylesheet">
<link href="styles/mystyles.css" rel="stylesheet">
<!-- endbuild -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row row-content" ng-controller="MenuController">
<div class="col-xs-12">
<button ng-click="toggleDetails()" class="btn btn-xs btn-primary pull-right" type="button">
{{showDetails ? 'Hide Details':'Show Details'}}
</button>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" ng-class="{active:isSelected(1)}">
<a ng-click="select(1)" aria-controls="all menu" role="tab">Menu</a></li>
<li role="presentation" ng-class="{active:isSelected(2)}">
<a ng-click="select(2)" aria-controls="appetizers" role="tab">Appetizers</a></li>
<li role="presentation" ng-class="{active:isSelected(3)}">
<a ng-click="select(3)" aria-controls="mains" role="tab">Mains</a></li>
<li role="presentation" ng-class="{active:isSelected(4)}">
<a ng-click="select(4)" aria-controls="desserts" role="tab">Desserts</a></li>
</ul>
<div class="tab-content">
<ul class="media-list tab-pane fade in active">
<!-- only the dish variable who pass the filter will be enabled -->
<!-- the filter is quiet strange, seems that it will look through all the parameters of the object and find whether the key word exists -->
<li class="media" ng-repeat="dish in dishes | filter:filtText">
<div class="media-left media-middle">
<a href="#"><img class="media-object img-thumbnail" ng-src={{dish.image}} alt="Uthappizza"></a>
</div>
<div class="media-body">
<h2 class="media-heading">
{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<!-- use the filter to show price in a proper way -->
<span class="badge">{{dish.price | currency}}</span>
</h2>
<!-- this ng-show detail is assigned by a global variable, you can find it in the angular.js -->
<p ng-show="showDetails">{{dish.description}}</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- build:js scripts/main.js -->
<script src="../bower_components/angular/angular.min.js"></script>
<script src="scripts/angular.js"></script>
<!-- endbuild -->
</body>
</html>
The JS code is:
'use strict';
var app = angular.module('confusionApp',[]);
app.controller('MenuController', ['$scope', function($scope) {
$scope.showDetails = false;
$scope.tab = 1;
$scope.filtText = '';
// use the decide which tab is enabled
$scope.isSelected = function (checkTab) {
return ($scope.tab === checkTab);
}
// use to change the tab value and filter value
$scope.select = function(setTab) {
$scope.tab = setTab;
if (setTab === 2)
$scope.filtText = "appetizer";
else if (setTab === 3)
$scope.filtText = "mains";
else if (setTab === 4)
$scope.filtText = "dessert";
else
$scope.filtText = "";
}
$scope.dishes=[
{
name:'Uthapizza',
image: 'images/uthapizza.png',
category: 'mains',
label:'Hot',
price:'4.99',
description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
comment: ''
},
{
name:'Zucchipakoda',
image: 'images/zucchipakoda.png',
category: 'appetizer',
label:'',
price:'1.99',
description:'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce',
comment: ''
},
{
name:'Vadonut',
image: 'images/vadonut.png',
category: 'appetizer',
label:'New',
price:'1.99',
description:'A quintessential ConFusion experience, is it a vada or is it a donut?',
comment: ''
},
{
name:'ElaiCheese Cake',
image: 'images/elaicheesecake.png',
category: 'dessert',
label:'',
price:'2.99',
description:'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms',
comment: ''
}];
$scope.toggleDetails = function() {
$scope.showDetails = !$scope.showDetails;
};
}]);