Angular使用筆記4_AngularJS(Angular1.x)_控制器(ng-controller)

 

https://oscarvillarreal.com/2013/05/07/5-reasons-to-use-angularjs-in-the-corporate-app-world/

在AngularJS 1.3版本之前早期控制器定義方法會用以下作法

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的AngularJs練習3-1</title>
    <script type="text/javascript" src="./angular-1.6.4/angular.min.js" ></script>
</head>
<body>
    <div ng-controller="contr">
        {{s}}
        <div ng-bind="s"></div> 
    </div>
    <script type="text/javascript">
        function contr($scope){
            $scope.s='hello, welcome to angularjs world!';
        }
    </script>
</body>
</html>

這是JS控制器用一個建構子手法，去實體化物件模板的寫法。方法本身即為物件的建構子。

參數可以自訂像是$scope、$xxx .....等。

執行結果如下

由於我們這邊使用的是1.6.4版本，會報錯誤也不會正常呈現

AngularJS 1.3板之後就不再支援全域控制器的定義方式了

程式練習1.ng-controller
1.3之後版本寫法要改為以下這樣

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的AngularJs練習3-1</title>
    <script type="text/javascript" src="./angular-1.6.4/angular.min.js" ></script>
</head>
<body>
    <div ng-controller="contr">
        {{s}}
        <div ng-bind="s"></div> 
    </div>
    <script type="text/javascript">
        var app =  angular.module("app", []);
        app.controller("contr", function($scope) {
            $scope.s = 'hello, welcome to angularjs world!';
        });
    </script>
</body>
</html>

JavaScript 建立的 Module 名稱這邊指定為 app，所以要回到最上層去調整名稱改為"app"。

此外，在指定div元素屬性中，添加ng-controller去指定對應控制器名稱。

AngularJs框架會去查找對應controller的建構方法，並去實體化相應控制器物件，將該controller依賴的物件注入控制器物件中。

執行效果如下

程式練習2.ng-controller搭配as別名

ng-controller指令支持透過as語法來對控制器物件取一個別名，後續即刻通過該別名存取成員屬性、成員方法。

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的AngularJs練習3-2</title>
    <script type="text/javascript" src="./angular-1.6.4/angular.min.js" ></script>
</head>
<body>
    <div ng-controller="CalcController as calc">
        <div>UnitPrice:<input type="number" ng-model="price" /></div><br/>
        <div>Quantity:<input type="number" ng-model="num" /></div><br/>
        <div>TotalPrice:{{calc.totalPrice()}}</div>
    </div>
    <script type="text/javascript">
        function CalcController($scope){
            $scope.price=10;
            $scope.num=1;
            this.totalPrice = function(){
                return $scope.price * $scope.num;
            }
        }
        var app =  angular.module("app", []);
        app.controller("CalcController",CalcController);
    </script>
</body>
</html>

運行效果如下:

Ref:

https://code.angularjs.org/1.6.4/docs/guide/controller