现在可以开始创建您的第一个 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. 通用权限管理系统接口文档V4.2 版本之消息接口介绍

    通用权限管理系统提供的消息接口可实现消息获取,消息发送,底层使用Redis对消息进行缓存,解决消息的并发请求对数据库的压力. 前端可以通过客户端轮询来获取最新消息,前端效果截图如下:

  2. 基于MFC的Opengl实现动画

    对于了解MFC程序设计的来说,就太简单了.像我这种的,还是有必要记下来. OnCreate设置定时:SetTimer(1, 10, NULL);//设置#1定时器 key point void COp ...

  3. Spark installation for windows

    download spark from spark.apache.org download hadoop from hadoop.apache.org download hadoop.dll and ...

  4. 安装 vsftpd

    (1)安装vsftpdsudo apt-get install vsftpd (2)配置sudo vi /etc/vsftpd.conf #anonymous_enable=YESlocal_enab ...

  5. Java IO 技术之基本流类

    流式IO 流(Stream)是字节的源或目的.         两种基本的流是:输入流(Input Stream)和输出流(Output Stream).可从中读出一系列字节的对象称为输入流.而能向其 ...

  6. [转]Web Services使用out参数

    本文转自:http://www.cnblogs.com/zhaozhan/archive/2010/10/25/1860837.html Web Services使用out参数,在SOAP协议中会跟返 ...

  7. jQuery选择器之层次选择器Demo

    测试代码: 02-层次选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  8. Fuck Sharepoint 2013

    最近遇到一个貌似是bug的问题,每次点击页面的时候页面的地址多出一行/_layouts/15/start.aspx#/ 然后跑到google上搜索出解决方案, 地址:http://social.tec ...

  9. OGG

    Oracle Golden Gate软件是一种基于日志的结构化数据复制备份软件,它通过解析源数据库在线日志或归档日志获得数据的增量变化,再将这些变化应用到目标数据库,从而实现源数据库与目标数据库同步. ...

  10. 设置input(radio,checkbox)和lable对齐的问题

    在做页面的时候几次遇到label和前面的小图标无法对齐的情况,后来发现解决方法不过是 label { display:inline-block; vertical-align:top; line-he ...