现在可以开始创建您的第一个 AngularJS 应用程序，一个 AngularJS 单页 Web 应用。

<!DOCTYPE html>

<html lang="en" ng-app="myNoteApp">

<head>

    <meta charset="UTF-8">

    <title>笔记</title>

    <script src="angular-1.4.1/angular.min.js"></script>

    <script src="myNoteApp.js"></script>

    <script src="myNoteCtrl.js"></script>

</head>

<body>

   <div ng-controller="myNoteCtrl">

       <h2>我的笔记</h2>

       <p><textarea ng-model="message" cols="40" rows="10"></textarea></p>

       <p>

           <button ng-click="save()">保存</button>

           <button ng-click="clear()">清除</button>

       </p>

       <p>剩余字数:<span ng-bind="left()"></span></p>

   </div>

</body>

</html>

myNoteApp.js:

var app = angular.module('myNoteApp',[]);

myNoteCtrl.js:

app.controller('myNoteCtrl', function ($scope) {

   $scope.message = "";

    $scope.left = function () {

      return 100-$scope.message.length;

    };

    $scope.clear = function(){

        $scope.message = "";

    };

    $scope.save = function () {

       alert('保存成功!');

    };

});

　　运行结果：

AngularJS(17)-Angular小程序的更多相关文章

  1. 微信小程序开源项目库汇总

    最近做了一个微信小程序开源项目库汇总,里面集合了OpenDigg 上的优质的微信小程序开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. UI组件 ...

  2. 微信小程序开源项目库集合

    UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 - 微信小程序图表工具 wema ...

  3. 微信小程序一：微信小程序UI组件、开发框架、实用库

    作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/8079095.html 内容持续更新,维护中 邮箱 ...

  4. 微信小程序在开发中遇到的问题与解决方法

    1.  √ 这种错误多半是该js文件中没有Page这个方法,就算是空的js也必须要把Page({ })写上去 2.  √ 这种错误多半是该json文件没有内容,所以必须要加上{ },就算是空内容也要加 ...

  5. 微信小程序基础之开源项目库汇总

    awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合.我们会定期同步OpenDigg上的项目到这里,也欢迎各位提交项目给我们. (链接:ht ...

  6. 微信小程序UI组件、开发框架、实用库...

    UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 - 微信小程序图表工具 wema ...

  7. 微信小程序框架集合

    UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 - 微信小程序图表工具 wema ...

  8. 小程序源码下载[demo整理自github]

    微信小程序的火热程度大家都有所了解,也有很多牛人写了不错的小程序,今天ytkah就整理一些github上的小程序开源项目,源码可以直接下载来用,感兴趣的朋友赶紧去看看吧!以下小程序排名按star的数量 ...

  9. 微信小程序< 3 > ~ 微信小程序开源项目合集

    简介 移动开发者想学习微信小程序需要学习一点HTML ,CSS和JS才能够比较快速的上手,参考自己学习Android学习过程,阅读源码是一个很好的方式,所以才收集了一些WeApp的开源项目. awes ...

随机推荐

  1. CSS 之 控制图片与文字对齐

    文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明: baseline- ...

  2. GET和POST的主要区别

    1.get是从服务器上获取数据,post是向服务器传送数据 2.在客户端上,get通过url提交数据,数据在url上可以看到,post方式,数据放置在HTMLHEADER内提交 3.对于get方式,服 ...

  3. Android之旅：梦想、学习、坚持、自信、淡定

    前段时间参加了2012年度IT博客大赛,进了前十强,写了一篇获奖感言,不过还没正式在CSDN发表出来.眼看2012年就要结束了,刚好借这个机会将2012年度IT博客大十强获奖感言发表出来,也算是对20 ...

  4. Oracle 基础 —SQL语句优化的途径

    一:SQL语句的优化途径 1.选择合适的Oracle优化器 (1).RBO 基于规则进行优化的优化器   --Oracle 10G 后被抛掉 (2).CBO基于成本(CPU 和 内存的占用率)优化的优 ...

  5. xe5 android tts(Text To Speech)

    xe5 android  tts(Text To Speech) TTS是Text To Speech的缩写,即“从文本到语音”,是人机对话的一部分,让机器能够说话. 以下代码实现xe5 开发的文本转 ...

  6. HDU 1069 Monkey and Banana (DP)

    Monkey and Banana Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u S ...

  7. 剑指Offer33 第一个只出现一次的字符

    /************************************************************************* > File Name: 33_FirstN ...

  8. Win10 VMware虚拟机无法打开内核设备“\\.\Global\vmx86“

    前几项与Win7配置相同 用管理员模式打开CMD 运行 net start vmci net start vmx86 net start VMnetuserif 这三条命令 为了不用每次启动都这样,修 ...

  9. Differential Geometry之第五章曲面的内蕴几何学

    第五章.曲面的内蕴几何学 1.曲面的等距变换 2.曲面的协变微分 协变微分: 3.测地曲率与测地线 4.测地坐标系 4.1.测地平行坐标系 4.2.测地极坐标系和法坐标系 5.Gauss-Bonnet ...

  10. 使用Boost asio实现同步的TCP/IP通信

    可以先了解一下Boost asio基本概念,以下是Boost asio实现的同步TCP/IP通信: 服务器程序部分,如果想保留套接字之后继续通信,可以动态申请socket_type,保存指针,因为so ...