(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;
};
}]);