现在可以开始创建您的第一个 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. ES6新特性以及一些规范

    1.let:使变量成为块级变量,类似于C++,java类的变量 b = 2 if (b == 2) { let c = 2; } console.log(c) // 报错,因为c是一个块级变量,只存在 ...

  2. jquery 和 $

    而jQuery就是jQuery库提供的一个函数.(好像也不仅仅只是函数, 因为还有 $.ajax(options) 这样的使用,等同 jQuery.ajax(options)) 这个函数的作用是根据 ...

  3. 基于python3的手机号生成脚本

    今天利用业余,自己突发想法来写个手机号码生成的脚本,其实自己用的方法很简单,想必肯定又不少人写的比我的好,我只是自己闲来无聊搞一下, #作者:雷子 #qq:952943386 #日期:2016年7月1 ...

  4. LOG4J.PROPERTIES配置详解（转载）

    Log4J的配置文件(Configuration File)就是用来设置记录器的级别.存放器和布局的,它可接key=value格式的设置或xml格式的设置信息.通过配置,可以创建出Log4J的运行环境 ...

  5. MySQL（26）：事务的隔离级别出现问题之 幻读

    1. 幻读 幻读(Phantom Read)又称为虚读,是指在一个事务内两次查询中数据条数不一致,幻读和不重复读有些类型,同样是在两次查询过程中,不同的是,幻读是由于其他事务做了插入记录的操作,导致记 ...

  6. Android（java）学习笔记66：实现Runnable接口创建线程 和 使用Callable和Future创建线程

    1. 前面说的线程的实现是新写一个子类继承Thread: 是将类声明为 Thread 的子类.该子类应重写 Thread 类的 run 方法.接下来可以分配并启动该子类的实例 2. 这里说的方案2是指 ...

  7. 文本的输入输出(page52)

    2.2.4 再谈输入输出, 所用java类有:Out.java , In.java public class Cat{ public static void main(String[] args){ ...

  8. Git之忽略文件(ignore file)

      1.    环境 Windows XP SP3 + TortoiseGit + msysGit 2.  ignore files的三种方法 以下涉及的ignore文件均为如下格式: # 以'#'开 ...

  9. External Table

    CREATE TABLE AS SELECT,使用Oracle9i的External Table  Oracle 9i 的一项新特性就是 External Table,它就象通常的数据库表一样,拥有字 ...

  10. PLSQL执行sql语句输出的中文是???之解决方法和步骤

    方法/步骤 1 登陆plsql,执行sql语句,输出的中文标题显示成问号????:条件包含中文,则无数据输出 步骤阅读 2 输入sql语句select * from V$NLS_PARAMETERS查 ...