Ti-Tiâu

在 第16篇的AngularJS 談到factory()和service()，它們叫做「服務提供者(provider)」，可以包裹函式再提供給控制器使用。 value()也是一個服務提供者，讓你可以包裹一些常用的值，字串、數字、json都可以。 例如： myApp.value("intValue", 100); myApp.value("strValue", "This is a string."); myApp.value("jsonValue", [{name:'Lily'}]); 需要value時，就匯入value名稱到控制器即可。 myApp.controller("myController", ['$scope', 'strValue','intValue','jsonValue', function($scope, strValue, intValue, jsonValue){ $scope.str = strValue; $scope.integer = intValue; $scope.myjson = jsonValue; }]); This is a string. 100 Lily 範例程式碼( Plunker ) 同樣地，value()只能給控制器用，不能在HTML呼叫value()。

本篇範例程式碼( Plunker ) 我們可以在控制器裡面寫函式，這一點你應該知道。你也許會發現當你有太多的成員函式時，會讓控制器程式碼變得太長。 app1.controller("myController", ['$scope', function($scope){ $scope.add = function(val1, val2){return val1+val2;}; $scope.sub = function(val1, val2){return val1-val2;}; $scope.int1 = $scope.add(10,20); $scope.int2 = $scope.sub(50,30); }]); 為了方便管理程式碼，AngularJS提供了factory()和service()，把函式包在一個「服務提供者(provider)」。 Factory 改寫上面的例子，我們宣告Maths為factory物件，負責提供add和sub這兩個函式。 myApp.factory("Maths", function(){ var fact = {}; fact.add = function(a, b) { return a + b; }; fact.sub = function(a, b) { return a - b; }; return fact; }); 或是可以批次定義 myApp.factory("Maths", function(){ return { add: function(a, b) { return a + b ;} sub: function(a, b) { return a - b; }; } }); Service 我們也可以用service() myApp.service("Maths", function(){ this.add = function(a, b) { return a + b; }; this.sub = function(a, b) { return a - b; }; });

本篇範例的( Plunker Demo ) 大致上，Bootstrap這個網頁框架只支援JQUERY。不過現在，AngularJS 團隊做了網頁框架Bootstrap的擴件，UI Bootstrap，用AngularJS取代了 bootstrap.js jquery.js 所以，當你想要使用UI Bootstrap的元素時，你只需要匯入bootstrap.css、Angular.js、和ui-bootstrap.js。 <!-- bootstrap.css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <!-- Angular.js --> <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js"></script> <!-- ui-bootstrap.js --> <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script> 標籤集(tabset) {{tt.content}} 程式碼 <div ng-app="app15"> <div class="container" ng-controller="MyController"> <tabset> <!-- 頁面 --> <tab ng-repeat="tt in tabs"