现在可以开始创建您的第一个 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. c++ 设计模式4 （Strategy）

    3.2 Strategy (策略模式) 动机:在软件构建过程中,某些对象使用的算法可能多种多样,经常改变,如果将这些算法都编码到对象中,将会使对象变得异常复杂,而且有时候支持不使用或不常使用的算法也是 ...

  2. Conversions

    Problem Description Conversion between the metric and English measurement systems is relatively simp ...

  3. leetcode题解:Binary Tree Postorder Traversal (二叉树的后序遍历)

    题目: Given a binary tree, return the postorder traversal of its nodes' values. For example:Given bina ...

  4. 分享一款简洁的jQuery轮播源码

    <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页</titl ...

  5. JavaWeb 学习的第一阶段总结

    本人从事Asp.net开发三年,结合市场情况,综合考虑后决心转向JavaWeb方向.于是开始了自学Java的历程. 首先,我用马士兵的Java基础教学视频,快速地学习了一遍Java基础.因为有C#基础 ...

  6. iPhone开发 Swift - NSNotification 通知

    Swift创建Notification通知 创建一个SingleView Application 打开AppDelegate.swift,在方法 application(application:UIA ...

  7. 递归小Demo

    public class demo5 { public static void main(String[] args) {        //初始值为100         int n = 100;  ...

  8. Mousetrap - Keyboard shortcuts in Javascript

    Mousetrap is a simple library for handling keyboard shortcuts in Javascript. It is around 2kb minifi ...

  9. HTML5_用语义化标记重新定义博客

    HTML5文档的第一行便是文档类型声明,文档类型声明的作用有两个 一:验证器依据文档类型来判断采用何种验证规则去验证代码 二:文档类型声明能够强制IE6,IE7,IE8以“标准模式”渲染页面 1: & ...

  10. SQL 把查出来的信息整合为一张表

    select name ,population from bbc where name='France' union all select name ,population from bbc wher ...