现在可以开始创建您的第一个 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. selenium python 定位一组对象

    为什么定位一组对象? 定位一组对象的思想    在定位一组对象的过程中我们如何实现?以前的都是通过具体的对象定位,那么定位一组我们就需要通过css来定位   在单个定位对象中使用的是find_elem ...

  2. Flume-ng-1.4.0 spooling source的方式增加了对目录的递归检测的支持

    因为flume的spooldir不支持子目录文件的递归检测,并且业务需要,所以修改了源码,重新编译 代码修改参考自:http://blog.csdn.net/yangbutao/article/det ...

  3. InActon-日志分析（KPI）

    我参照的前辈的文章http://blog.fens.me/hadoop-mapreduce-log-kpi/ 从1.x改到了2.x.虽然没什么大改.(说实话,视频没什么看的,看文章最好) 先用mave ...

  4. ios - 带动画圆形旋转的进度条

    #import <UIKit/UIKit.h> @interface TJCircleProgressView : UIView /** * 图标 */ @property(nonatom ...

  5. 使用Apache Felix Remote Shell远程管理OSGI

    通过Apache Felix Remote Shell提供的org.apache.felix.shell.remote能使用telnet客户端访问远程的[Apache Felix Shell]和[Ap ...

  6. Unity3D 4.61 实现淡入淡出的场景过渡方法。

    还在学习过程中,如果有大大看到请指点. orz原来官方就有了更好的处理方法的教程,具体查看下面视屏. [Unity官方实例教程 秘密行动] Unity官方教程<秘密行动>(五) 屏幕渐变效 ...

  7. Java优先级队列

    package com.lk.A; import java.util.PriorityQueue; public class Test5 { public static void main(Strin ...

  8. linux_jvm_jhat_dump内存分析

    jhat命令   jhat命令 -- Java Head Analyse Tool 用途:是用来分析java堆的命令,可以将堆中的对象以html的形式显示出来,包括对象的数量,大小等等,并支持对象查询 ...

  9. Lnmp下安装memcached

            Lnmp下安装memcached 1.先安装 libevent,再安装 Memcached主程序 # tar xf libevent-2.0.21-stable.tar.gz # cd ...

  10. hdu 4729 树链剖分

    思路:这个树链剖分其实还是比较明显的.将边按权值排序后插入线段树,然后用线段树查找区间中比某个数小的数和,以及这样的数的个数.当A<=B时,就全部建新的管子. 对于A>B的情况比较 建一条 ...