AngularJS【AngularJS】—— 3 我之首先独AngularJS小程序

style=”font-size: 13px;”>通过前两篇之上,基本上对AngularJS的下产生了定的垂询。

style=”font-size: 13px;”>本篇将会见友善手动写一个粗程序,巩固下理解。

  首先使专注的凡,引用AngularJS的资源文件angular.min.js文件。

  由于斯框架是Google的工作人员开发之,因此国内访问的当儿,会叫堵导致力不从心下载资源文件。

 

  因此,可以采取百度开源之静态链接:

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

  代替本来的海外的资源文件链接:http://code.angularjs.org/angular-1.0.1.min.js

  

  解决了资源文件之下载问题,就足以手动编写小程序了:

<!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>

  首先分析一下代码:

  1
当<head>中我们先是 加载了angularjs的js文件

  2
在html标签中,定义了 ng-app
应用程序,意思是angularjs的意图范围是确实个html。类似地,如果以div中定义ng-app,那么即使只好在这div中应用angularjs了。

  3
在div中定义了一个 控制器 ,该控制器的使用构造函数的法门,在本子中初始化两独变量。

  4
table中,采用 ng-model ,绑定数据元素number1,number2。

  5
在div的收尾部分,通过 {{表达式}} 起结果,这里并没有任何的措施调用,完全是动态的基于ng-model所绑定的价,自动改变。

  6
通过currency 过滤器 ,展现成为货币格式。

  运行结果:

AngularJS 1

相关文章