【AngularJS】—— 3 我的第一个AngularJS小程序-阿里云开发者社区

开发者社区> 青夜之衫> 正文

【AngularJS】—— 3 我的第一个AngularJS小程序

简介:
+关注继续查看

  首先要注意的是,引用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 过滤器 ,展现成为货币格式。

  运行结果:

本文转自博客园xingoo的博客,原文链接:【AngularJS】—— 3 我的第一个AngularJS小程序,如需转载请自行联系原博主。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
6919 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4488 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
5458 0
阿里云服务器远程登录用户名和密码的查询方法
阿里云服务器远程连接登录用户名和密码在哪查看?阿里云服务器默认密码是什么?云服务器系统不同默认用户名不同
444 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
3228 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
16831 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
1131 0
+关注
1029
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载