顯示具有 AngularJS 1 標籤的文章。 顯示所有文章
顯示具有 AngularJS 1 標籤的文章。 顯示所有文章

2017年2月15日 星期三

ng-hide、ng-show、ng-disabled、ng-readonly、ng-selected、ng-checked (angularJS 六)

※ng-hide、ng-show、ng-disabled、ng-readonly 

※寫死的值

<html>
    <script type="text/javascript" src="angular.js"></script>
    
    <body ng-app>
        <p ng-hide="true">看不見</p>
        <p ng-hide="false">看見</p>
    
        <p ng-show="true">看見</p>
        <p ng-show="false">看不見</p>
    
        <p>
            <button ng-disabled="true">按不下去</button>
            <button ng-disabled="false">按的下去</button>
        </p>
    
        <p>
            <input ng-readonly="true" value="不可改" />
            <input ng-readonly="false" value="可改" />
        </p>
    </body>
</html>v

※注意 readonly 屬性在HTML裡有三種方式:readonly="true"、readonly、readonly="readonly"
但用ng-readonly就只有true|false;disabled也是一樣

※初始值

<html>
    <script type="text/javascript" src="angular.js"></script>
    
    <body ng-app ng-init="xxx=true; ooo=10">
        <p ng-hide="xxx">看不見</p>
    
        <p ng-show="xxx">看見</p>
    
        <p>
            <button ng-disabled="xxx">按不下去</button>
        </p>
    
        <p>
            <input ng-readonly="ooo > 1" value="不可改" />
        </p>
    </body>
</html>

※變數也可以取名為readonly,但並不表示 ng-readonly="readonly" 成立,只是剛好 readonly 是個true|false

※動態給值

<html>
    <script type="text/javascript" src="angular.js"></script>
    
    <body ng-app ng-init="xxx=true">
        <p ng-hide="xxx">看不見</p>
        <p ng-show="xxx">看見</p>
    
        <input type="checkbox" ng-model="xxx">按我
        <p>{{ xxx }}</p>
    </body>
</html>

※



※ng-selected、ng-checked

<html>
    <script type="text/javascript" src="angular.js"></script>
    
    <body ng-app>
        <select>
            <option value="a">A</option>
            <option value="b" ng-selected="true">B</option>
            <option value="c">C</option>
        </select>
        <br />
        <select multiple>
            <option value="a">A</option>
            <option value="b" ng-selected="true">B</option>
            <option value="c" ng-selected="true">C</option>
        </select>
        <br />
        <input type="checkbox" name="xxx" />c1
        <input type="checkbox" name="xxx" ng-checked="true" />c2
        <input type="checkbox" name="xxx" ng-checked="true" />c3
        <br />
        <input type="radio" name="ooo" />r1
        <input type="radio" name="ooo" ng-checked="true" />r2
        <input type="radio" name="ooo" />r3
    </body>
</html>

※觀念和上面一模一樣

2017年2月14日 星期二

ng-options、$even、$odd、$index (angularJS 五)

※ng-options 和 ng-repeat 不同

<html>
    <script type="text/javascript" src="angular.min.js"></script>
    
    <body ng-app='xxx' ng-controller='ccc'>
        <select ng-model="sel">
            <option ng-repeat="l in lists" value="{{l.x}}">{{l.o}}</option>
        </select>
        <p>選到的value是{{sel}}</p>
        
        <select ng-model="sel2" ng-options="l.o for l in lists"></select>
        <p>選了{{sel2.o}},value是{{sel2.x}}</p>
    </body>
</html>
    
<script>
    var app = angular.module('xxx', []);
    app.controller('ccc', ($scope) => {
        $scope.lists = [
            {
                o: 'a', x: 1
            }, {
                o: 'b', x: 2
            }, {
                o: 'c', x: 3
            }
        ];
    });
</script>

※ng-repeat by 字串;ng-options by 物件



※ng-options 可設多個物件

<html>
    <script type="text/javascript" src="angular.min.js"></script>
    
    <body ng-app='xxx' ng-controller='ccc'>
        <select ng-model="sel" ng-options=" p2.name for (p1, p2) in lists "></select>
        <p>選了{{sel.name}},價錢是{{sel.price}},製造年是{{sel.date}}年</p>
    </body>
</html>
    
<script>
    var app = angular.module('xxx', []);
    app.controller('ccc', ($scope) => {
        $scope.lists = {
            chessProduct1: {name:'象棋', price: 30, date: '1999'},
            chessProduct2: {name:'五子棋', price: 25, date: '2000'},
            chessProduct3: {name:'圍棋', price: 40, date: '2010'}
        };
    });
</script>

※注意chessProduct1~3,這三個變數如果一樣會覆蓋,使畫面上只剩最後一個



※$even、$odd、$index

<html>
    <script type="text/javascript" src="angular.min.js"></script>
    
    <body ng-app='xxx' ng-controller='ccc'>
        <table>
            <tr ng-repeat="l in lists |orderBy:'name'">
                <td ng-if="$odd" style="background-color:lightgreen">{{ $index + 1 }}</td>
                <td ng-if="$even">{{ l.name }}</td>
                <td>{{ l.price }}</td>
            </tr>
        </table>
    </body>
</html>
    
<script>
    var app = angular.module('xxx', []);
    app.controller('ccc', ($scope) => {
        $scope.lists = [
            {name: 'papaya', price: 30}, 
            {name: 'apple', price: 25}, 
            {name: 'guava', price: 80},
            {name: 'durian', price: 60},
            {name: 'banana', price: 40}
        ];
    });
</script>

※這三個都是從0開始的
$index:從0開始的數字
$odd:奇數時會顯示
$even:偶數時會顯示

2017年2月13日 星期一

Service (angularJS 四)

官網API連結

※$location、$http、$timeout、$interval

<html>
    <script type="text/javascript" src="angular.js"></script>
    
    <body ng-app='xxx'>
        <div ng-controller='ooo'>
            <p>{{myUrl}}</p>
            <p>{{myHttp}}</p>
            <p>{{myURL}}</p>
            <p>{{myTimeout}}</p>
            <p>{{myInterval}}</p>
        </div>
    </body>
</html>
    
<script>
    var app = angular.module('xxx', []);
    app.controller('ooo', function($scope, $location, $http, $timeout, $interval) {
        $scope.myUrl = $location.absUrl();
    
        $http.get("http://localhost:8080/TestServletXXX/xxx.jsp").then(function (response) {
            $scope.myHttp = response.data;
            $scope.myURL = response.config.url;
        });
    
        $timeout(function () {
            $scope.myTimeout = "我佇這,你看啥貨?";
        }, 2000);
    
        $interval(function () {
            $scope.myInterval = new Date().toLocaleTimeString();
        }, 1000);
    });
</script>

※$location:類似window.location

※$http:連到已啟動的伺服器,但Chrome會有同源策略的問題,可參考這篇

※$timeout:js的window.timeout,過幾毫秒做什麼事

※$interval:js的window.interval,每過幾毫秒做什麼事

※以上可以加debugger看還有什麼可以「.」的


※service

<html>
    <script type="text/javascript" src="angular.js"></script>
    
    <body ng-app='xxx'>
        <div ng-controller='ooo'>
            <p>{{self}}</p>
        </div>
    </body>
</html>
    
<script>
    var app = angular.module('xxx', []);
    app.controller('ooo', function($scope, zzz) {
        $scope.self = zzz.yyyFun(100);
    });
    
    app.service('zzz', function() {
        this.yyyFun = function (x) {
            return x + x;
        }
    });
</script>

※自定 service 的功能,也就是定義controller裡可以放的service,此例是zzz



※filter 抓 service 的方法

<html>
    <script type="text/javascript" src="angular.js"></script>
    
    <body ng-app='xxx'>
        <ul ng-controller='ooo'>
            <li ng-repeat="a in intArr">{{a | myFilter}}</li>
        </ul>
    </body>
</html>
    
<script>
    var app = angular.module('xxx', []);
    app.controller('ooo', ($scope) => {
        $scope.intArr = [73, 108, 49];
    });
    
    app.filter('myFilter',['zzz', (f) => { // 這裡的zzz對應到service,使用裡面的方法
        return (x) => {
            return f.yyy(x);
        };
    }]);
    
    app.service('zzz', function() {
        this.yyy = (x) => {
            return String.fromCharCode(x);
        }
    });
</script>

※zzz 對應好即可



※Servlet 回傳 JSON

@WebServlet(urlPatterns = { "/xxx" })
public class HelloServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String json = "{\"A\":\"1\",\"B\":2,\"C\":3.3}";
        System.out.println("json=" + json);
    
    //    JSONObject json = new JSONObject();
    //    json.put("A", "1");
    //    json.put("B", 2);
    //    json.put("C", 3.3);
    //    System.out.println("json=" + json.toString());
    
        resp.setContentType("application/json");
        resp.setCharacterEncoding("UTF-8");
    
        PrintWriter out = resp.getWriter();
        out.write(json);
        out.flush();
        out.close();
    }
}

※一定要用「"」,單引號我試的結果,前端會跑到fail,所以最好是用註解這一類的工具,才不會看到目睭拖窗

※JSON回傳「"xxx":["A":1,"B":2,"C":3]」,試的結果也是會跑到fail,很奇怪

※不使用setContentType也是可以的


※前端

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="angular.min.js"></script>
        <script>
            var app = angular.module('xxx', []);
            app.controller('ooo', function($scope, $http) {
                $http({
                    method : 'GET',
                    url : 'xxx'
                }).then(function successCallback(resp) {
                    $scope.a = resp.data.A;
                    $scope.b = resp.data.B;
                    $scope.c = resp.data.C;
                }, function errorCallback(resp) {
                    alert('fail');
                });
            });
        </script>
    </head>
    
    <body ng-app='xxx'>
        <div ng-controller='ooo'>
            <p>{{a}}</p>
            <p>{{b}}</p>
            <p>{{c}}</p>
        </div>
    </body>
</html>

※一載入頁面就呼叫了

※resp.data 是固定的,而後面如果是JSON還可以繼續「.」

2017年2月8日 星期三

filter (angularJS 三)

官方API,參考這裡

※lowercase、uppercase、currency、orderBy

<html>
    <script type="text/javascript" src="angular.js"></script>
    
    <body ng-app='xxx'>
        <div ng-controller='ooo'>
            <input ng-model='p3'><br />
            lowercase:
            <p>{{p3 | lowercase}}</p>
            ------------------------------ <br />
            uppercase:
            <p>{{p4 | uppercase}}</p>
            ------------------------------ <br />
            currency:
            <p>{{p1 * 2 | currency}}</p>
            ------------------------------ <br />
            orderBy:
            <p ng-repeat='x in p6 | orderBy:"pp1"'>
                {{x.pp1 + '=' + x.pp2}} <br />
                {{x.pp1 | uppercase}} = {{x.pp2 | currency}} <br />
                {{(x.pp1 | uppercase) + '=' + (x.pp2 | currency)}}
            </p>
            ------------------------------ <br />
            filter:
            <p ng-repeat='x in p6 | filter:"B" | orderBy:"pp1"'>
                {{x.pp1 + '=' + x.pp2}} <br />
                {{x.pp1 | uppercase}} = {{x.pp2 | currency}} <br />
                {{(x.pp1 | uppercase) + '=' + (x.pp2 | currency)}}
            </p>
            ------------------------------ <br />
            自定排序:<br />
            <table border="1">
                <th ng-dblclick="orderByXX('pp1')">Fruit</th>
                <th ng-dblclick="orderByXX('pp2')">Price</th>
                <tr ng-repeat="x in p6 | orderBy:orderBySelf">
                    <td>{{x.pp1}}</td>
                    <td>{{x.pp2}}</td>
                </tr>
            </table>
            ------------------------------ <br />
            自定過濾:<br />
            <ul>
                <li ng-repeat="x in p6">
                    {{x | filterSelf}}
                </li>
            </ul>
        </div>
    </body>
</html>
    
<script>
    var app = angular.module('xxx', []);
    app.controller('ooo', ($scope) => {
        $scope.p1 = 123456789;
        $scope.p2 = 'ddD';
        $scope.p3 = 'Bbb';
        $scope.p4 = 'aAA';
        
        $scope.p5 = () => {
            return $scope.p1 + $scope.p4;
        };
    
        $scope.p6 = [
            {pp1:'strawberry', pp2:'90'},
            {pp1:'apple', pp2:'67'},
            {pp1:'banana', pp2:'23'},
            {pp1:'blueberry', pp2:'90'},
            {pp1:'pineapple', pp2:'50'}
        ];
    
        $scope.orderByXX = function(x) {
            $scope.orderBySelf = x;
        }
    });
    
    app.filter('filterSelf', () => {
        return (x) => {
            return x.pp1.toUpperCase();
        };
    });
</script>

※orderBy可用倒序,只要在最後面加上「:"reverse"」,如:
<p ng-repeat='x in p6 | orderBy:"pp1":"reverse"'>

※filter:'b',裡面的字是不分大小寫的

※自定排序配合事件,以上例是在 th 標籤快按滑鼠左鍵兩下可排序

※結果:

lowercase:
bbb
------------------------------
uppercase:
AAA
------------------------------
currency:
$246,913,578.00
------------------------------
orderBy:
apple=67
APPLE = $67.00
APPLE=$67.00
banana=23
BANANA = $23.00
BANANA=$23.00
blueberry=90
BLUEBERRY = $90.00
BLUEBERRY=$90.00
pineapple=50
PINEAPPLE = $50.00
PINEAPPLE=$50.00
strawberry=90
STRAWBERRY = $90.00
STRAWBERRY=$90.00
------------------------------
filter:
banana=23
BANANA = $23.00
BANANA=$23.00
blueberry=90
BLUEBERRY = $90.00
BLUEBERRY=$90.00
strawberry=90
STRAWBERRY = $90.00
STRAWBERRY=$90.00
------------------------------
自定排序:
FruitPrice
strawberry90
apple67
banana23
blueberry90
pineapple50
------------------------------
自定過濾:
  • STRAWBERRY
  • APPLE
  • BANANA
  • BLUEBERRY
  • PINEAPPLE



※date、number、json

<html>
    <script type="text/javascript" src="angular.js"></script>
    
    <body ng-app='xxx'>
        <div ng-controller='ooo'>
            <input ng-model='p1'><br />
            date:
            <p>{{p1 | date}}</p>
            ------------------------------ <br />
            number:
            <p>{{p2 | number}}</p>
            <p>{{p2 | number:0}}</p>
            <p>{{p2 | number:2}}</p>
            <p>{{p2 | number:-1}}</p>
            ------------------------------ <br />
            json:
            <p>{{ p3 | json }}</p>
            <pre>{{ p3 | json }}</pre>
            <pre>{{ p3 | json:4 }}</pre>
        </div>
    </body>
</html>
    
<script>
    var app = angular.module('xxx', []);
    app.controller('ooo', ($scope) => {
        $scope.p1 = '2000-10-01';
        $scope.p2 = 1234.5678;
        $scope.p3 = [
            {pp1:'strawberry', pp2:'90'},
            {pp1:'apple', pp2:'67'},
            {pp1:'banana', pp2:'23'}
        ];
        $scope.p4 = {'a1':5, 'a2':10, 'a3':500};
    });
</script>

※json:4,這個數字是排版的空格有幾個的意思,但只有 pre 標籤有用

※date格式太多了,請參考上面的官網API連結

※結果:

date:
Oct 1, 2000
------------------------------
number:
1,234.568
1,235
1,234.57
1,230
------------------------------
json:
[ { "pp1": "strawberry", "pp2": "90" }, { "pp1": "apple", "pp2": "67" }, { "pp1": "banana", "pp2": "23" } ]
[
  {
    "pp1": "strawberry",
    "pp2": "90"
  },
  {
    "pp1": "apple",
    "pp2": "67"
  },
  {
    "pp1": "banana",
    "pp2": "23"
  }
]
[
    {
        "pp1": "strawberry",
        "pp2": "90"
    },
    {
        "pp1": "apple",
        "pp2": "67"
    },
    {
        "pp1": "banana",
        "pp2": "23"
    }
]




※limitTo

<html>
    <script type="text/javascript" src="angular.js"></script>
    
    <body ng-app='xxx'>
        <div ng-controller='ooo'>
            <p>{{ numArr | limitTo:4 }}</p>
            <p>{{ str | limitTo:7}}</p>
            <p>{{ num | limitTo:3}}</p>
            ------------------------------
            <p>{{ numArr | limitTo:-1 }}</p>
            <p>{{ str | limitTo:-1}}</p>
            <p>{{ num | limitTo:-1}}</p>
        </div>
    </body>
</html>
    
<script>
    var app = angular.module('xxx', []);
    app.controller('ooo', ($scope) => {
        $scope.numArr = [1,2,3,4,5,6,7,8,9];
        $scope.str = "abcdefghi";
        $scope.num = 9876543210;
    });
</script>

※不管是陣列、字串、數字都有效;負的從後面開始取

※結果:
[1,2,3,4]
abcdefg
987
------------------------------
[9]
i
0

2017年1月30日 星期一

ng-repeat、directive (angularJS 二)

※ng-repeat

迴圈功能

<html ng-app>
    <script type="text/javascript" src="angular.js"></script>
      
    <body>
        <div ng-init="xxx=[1,2,3]">
            <ul>
                <li ng-repeat="x in xxx">
                    {{x}}
                </li>
            </ul>
        </div>
    
        <div ng-init="ooo=[
            {o:'a',x:1},
            {o:'b',x:2},
            {o:'c',x:3}]">
    
            <table border=1>
                <tr>
                    <td ng-repeat="a in ooo">
                        {{a.o + '-' + a.x}}
                    </td>
                </tr>
            </table>
    
            <table border=5>
                <tr ng-repeat="a in ooo">
                    <td>
                        {{a.o + '-' + a.x}}
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

※ng-repeat 看要針對哪一個標籤循環,就寫在哪裡,上面的例子有寫在 tr 和 td



※ng-repeat 配合 controller

<html ng-app='xxx'>
    <script type="text/javascript" src="angular.js"></script>
    
    <body>
        <table border=1 ng-controller='ccc'>
            <tr ng-repeat="list in lists">
                <td>
                    {{list.o}} - {{list.x}}
                </td>
            </tr>
        </table>
    </body>
    
    <script>
        var app = angular.module("xxx", []);
        app.controller('ccc', ($scope) => {
            $scope.lists = [
                {
                    o: 'a', x: 1
                }, {
                    o: 'b', x: 2
                }, {
                    o: 'c', x: 3
                }
            ];
        });
    </script>
</html>

※注意 ng-controller 的宣告至少要在ng-repeat的上一層



※directive的Element、Attribute、Class

restrict有以下四種,可以合在一起
E:Element
A:Attribute
C:Class
M:Comment
預設是AE,所以不寫restrict時,可以用在元素和屬性上
要注意取的名字在使用時是用駝峰命名,如smallApple,要使用時,就要用small-apple
以上大小寫都不能錯,如果大小寫錯了不會報錯,只是沒有作用而已


<html ng-app='xxx'>
    <script type="text/javascript" src="angular.js"></script>
    
    <body>
        <div good-boy>div</div>
        <good-boy>defined</good-boy>
        <p class='good-boy'>p</p>
    </body>
    
    <script>
        var app = angular.module("xxx", []);
        app.directive("goodBoy", () => {
            return {
                restrict : "AEC",
                template : '<h1>h</h1>'
            };
        });
    </script>
</html>

※裡面還有一個「replace」的屬性,但不是給這三個值用的,是給下面的comment用的,但如果寫了而且給false不會有作用
但如果給true,有可能會報「Template for directive 'tag name' must have exactly one root element. 」的錯,那是因為template裡面的值至少要有一個頂層標籤,以這個例子就是<h1>
假設我的template只寫h,且replace給true,就會報這個錯

※div、good-boy、p 標籤裡的文字(div、defined、p),只有在angular 讀不到時才會顯示,一讀到一定是覆蓋




※directive 之 comment

<html ng-app='xxx'>
    <script type="text/javascript" src="angular.js"></script>
    
    <body>
        <!-- directive: good-boy -->
        content...
    </body>
    
    <script>
        var app = angular.module("xxx", []);
        app.directive("goodBoy", () => {
            return {
                restrict : "M",
                replace : true,
                template : '<h1>h1</h1>'
            };
        });
    </script>
</html>

※replace是配合restrict為「M」時使用

※在html裡打上<!-- directive: 自定標籤名 -->後,不管replace給什麼,在原始檔裡都會顯示

※這裡的replace是要不要將註解的部分取代成template寫的東東,如給true就會在網頁顯示,但並不會將content...取代掉

2017年1月29日 星期日

ng-app、ng-init、ng-model、ng-bind、module、ng-controller (angularJS 一)

我用的是1.6.1版,之後都用這一版來試


※ng-app、ng-init、ng-model、ng-bind

ng-app:angularJS的啟始點
ng-init:初始值
ng-model:設定變數
ng-bind:挷定變數


<html>
    <script type="text/javascript" src="angular.js"></script>
    
    <body ng-app>
        <p>test1: <input ng-model="xxx1"></p>
        <p ng-bind="xxx1"></p>
    
        <p>test2: <input ng-model="xxx2"></p>
        <p>{{xxx2}}</p>
    
        <div ng-init="ooo1='bruce'">
            <p>test3:<span ng-bind="ooo1"></span></p>
        </div>
    
        <div data-ng-init="ooo2='bruce'">
            <p>test4:<span data-ng-bind="ooo2"></span></p>
        </div>
    
        <div ng-init="xox='00FF00'">
        <input style="color:{{xox}}" ng-model="xox" value='{{xox}}' />
    </body>
    
    <script>
        window.onload = () => {
            console.log(angular.version.full);
        }
    </script>
</html>

※ng-app會針對設定的範圍啟作用,如上是在body設置,所以整個body都會啟作用,假設設定在第一個p標籤,那只有第一個標籤會啟作用

※可以用「data-ng-」開頭取代「ng-」開頭,也可以一起使用

※ng-init、ng-model 就沒有範圍了,例如test2的{{xxx2}}改成{{xxx1}}是抓的到的

※angular.version是取版本用的

※xxx1和xxx2是有差別的,xxx2在網路較慢時,或按F5不放,有時會看到{{xxx2}}出現;xxx1不會



※ng-init 多個變數

<html>
    <script type="text/javascript" src="angular.js"></script>
    
    <body ng-app>
        <div ng-init="xxx='x';ooo='o'">
            <p>test1: <span ng-bind="xxx + ' ' + ooo"></span></p>
        </div>
    
        <div ng-init="init={xxx:'x',ooo:'o'}">
            <p>test2: <span ng-bind="init.ooo"></span></p>
        </div>
    
        <div ng-init="zzz=[0,1,2,3]">
            <p>test3: {{zzz[2]}}</p>
        </div>
    
        <div>
            <p>test4: <span ng-bind="zzz[2]"></span></p>
        </div>
    </body>
</html>

※ng-init可設定多個變數;但ng-model不行



※module、ng-controller

module:設定模組
ng-controller:設定控制器的範圍


<html>
    <script type="text/javascript" src="angular.js"></script>
    
    <body ng-app='xxx'>
        <div ng-controller='ooo'>
            p1: <input type='number' ng-model='p1'><br />
            p2: <input type='number' ng-model='p2'><br />
            <span>number:{{p1 + p2}}</span>
        </div>
    </body>
</html>
    
<script>
    var app = angular.module('xxx', []);
    app.controller('ooo', ($scope) => {
        $scope.p1= 1;
        $scope.p2= 2;
    });
</script>

※設定完p1和p2變數,可以重覆用很多次,如上但直接寫{{p1}}和ng-model="p1"都抓的到

※<script>那一段也可以寫在一支(或兩支)js,然後用<script src>加載進來

※var app可寫成一行

※angular.module 第一個參數為 module 名稱,第二個參數為依賴哪一些module,這個例子為沒有依賴

※ng-app取得設定的module

※設定好ng-controller的範圍後,就可以在裡面取得設定的變數,其中「$scope」是不能改的

※{{}}裡面是可以四則運算的,所以寫死的數字也是可以運行的

※angulars也有MVC:
M:scope,可在V和C使用
V:HTML
C:Javascript



※module 的依賴

<html>
    <script type="text/javascript" src="angular.min.js"></script>
    
    <body ng-app='xxx'>
        <div ng-controller='ooo'>
            p1: <input type='number' ng-model='p1'><br />
            p2: <input type='number' ng-model='p2'><br />
            <span>number:{{p1 + p2}}</span><br /><br />
    
            p3: <input type='number' ng-model='p3'><br />
            p4: <input type='number' ng-model='p4'><br />
            <span>number:{{p3 + p4}}</span><br /><br />
    
            p5: <input type='number' ng-model='p5'><br />
            p6: <input type='number' ng-model='p6'><br />
            <span>number:{{p5 + p6}}</span>
        </div>
    </body>
</html>
    
<script>
    var app = angular.module('xxx', ['xxx2', 'xxx3']);
    app.controller('ooo', ($scope, zzz, yyy) => {
        $scope.p1= 1;
        $scope.p2= 2;
        $scope.p3 = zzz.zzzMultiply2(20);
        $scope.p4 = zzz.zzzMultiply2(100);
        $scope.p5 = yyy.yyyAdd2(20);
        $scope.p6 = yyy.yyyAdd2(100);
    });
    
    angular.module('xxx2', []).service('zzz', function() {
        this.zzzMultiply2 = (x) => {
            return x + x;
        }
    });
    
    angular.module('xxx3', []).service('yyy', function() {
        this.yyyAdd2 = (x) => {
            return x + 2;
        }
    });
</script>

※sevice的功能是定義的字串可以在controller裡用,並且使用裡面的方法

※此例還可寫成xxx只依賴 xxx2 ,xxx2 又依賴 xxx3 ,此時的 xxx 還是能抓的到 yyy



※scope範圍


<html>
    <script type="text/javascript" src="angular.min.js"></script>
    
    <body ng-app='xxx'>
        <div ng-controller='ooo1'>
            <p>p1+p2:{{p1 + p2}}</p>
            <p>p3:{{p3}}</p>
            <p>number:{{p4 + p5}}</p>
            <p>p6:{{p6}}</p>
        </div>
        ------------------------------
        <div ng-controller='ooo2'>
            <p>p1+p2:{{p1 + p2}}</p>
            <p>p3:{{p3}}</p>
            <p>number:{{p4 + p5}}</p>
            <p>p6:{{p6}}</p>
        </div>
    </body>
</html>
    
<script>
    var app = angular.module('xxx', []);
    
    app.controller('ooo1', ($scope, $rootScope) => {
        $scope.p1= 1;
        $scope.p2= 2;
        $rootScope.p3=3;
    });
    
    app.controller('ooo2', ($scope, $rootScope) => {
        $scope.p4= 4;
        $scope.p5= 5;
        $rootScope.p6=6;
    });
</script>

※定了兩個controller,ooo1和ooo2,第一個div使用ooo1;第二個div使用ooo2,個別使用不同的範圍

※$scope 只能使用在 ng-controller 設定的範圍;而 $rootScope 沒有這種限制,哪裡都能使用

※如果$scope 和 $rootScope 都設一樣的變數,會以 $scope 為主