【AngularJS】—— 3 個人第一個AngularJS小程序

時間 2019-11-19

標籤 AngularJS 個人第一個 angularjs 程序欄目 AngularJS 简体版

原文原文鏈接

經過前面兩篇的學習，基本上對AngularJS的使用有了必定的瞭解。html

本篇將會本身手動寫一個小程序，鞏固下理解。angularjs

　　首先要注意的是，引用AngularJS的資源文件angular.min.js文件。小程序

　　因爲這個框架是Google的工做人員開發的，所以國內訪問的時候，會被牆致使沒法下載資源文件。app

　　所以，能夠使用百度開源的靜態連接：框架

　　http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js函數

　　代替原來的國外的資源文件連接：http://code.angularjs.org/angular-1.0.1.min.js學習

　　解決了資源文件的下載問題，就能夠手動編寫小程序了：ui

<!doctype html>
<html ng-app>
    <head>
        <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    </head>
    <body>
        <div ng-controller="testCtrl">
            <b>Invoice:</b>
            <br>
            <br>
            <table>
                <tr><td>num1</td><td>num2</td></tr>
                <tr>
                    <td><input type="number" min="0" max="10" ng-model="number1" required ></td>
                    <td><input type="number" min="2" max="10" ng-model="number2" required ></td>
                </tr>
            </table>
            <hr>
            <b>Total:</b> {{number1 * number2 | currency}}
        </div>
        <script>
            function testCtrl($scope) { $scope.number1 = 2; $scope.number2 = 5.6; } </script>
    </body>
</html>