<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>入門</title>
<script src="node_modules/angular/angular.js"></script>
<style>
.bgc-red {
background-color: red;
}
</style>
</head>
<body ng-app="s1.app">
<button class="{{currentBtn == 1 ? 'bgc-red':''}}" ng-click="setCurrent(1)">按鈕1</button>
<button class="{{currentBtn == 2 ? 'bgc-red':''}}" ng-click="setCurrent(2)">按鈕2</button>
<button class="{{currentBtn == 3 ? 'bgc-red':''}}" ng-click="setCurrent(3)">按鈕3</button>
<button class="{{currentBtn == 4 ? 'bgc-red':''}}" ng-click="setCurrent(4)">按鈕4</button>
<script>
// 1. 定義一個我們自己的模塊，
// 第一個參數是：模塊名，
// 第二個參數：所依賴的其他的模塊的名字的數組
var app = angular.module('s1.app', []);
// app.run是Angularjs版本的“入口函數”，我們的Angularjs框架加載完成之后，就會來執行這里的函數。
// 其中有一點需要注意：$rootScope是Angularjs提供的“數據對象”，
// 我們操作這個數據對象，就可以把變化同步到DOM上
// 參數名是寫死的，不要變。（Angularjs的回調函數的傳參，很多地方是“只認名字，不認順序”的）
app.run(function ($rootScope) {
$rootScope['msg'] = 'hello angular';
$rootScope['cssClass'] = 'bgc-red';
$rootScope['currentBtn'] = 1; // 標識當前的按鈕
$rootScope['setCurrent'] = function (current) { // 當按鈕被點擊之后，調用，設置當前的按鈕
$rootScope['currentBtn'] = current;
}
})
</script>
</body>
</html>
