angularjs小应用

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title></title>

</head>

<body ng-app="myNoteApp" ng-controller="myNoteCtrl">

<h2>我的笔记</h2>

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

<p>

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

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

</p>

<p>Number of characters left:<span ng-bind="left()"></span></p>

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

<script>

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

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

$scope.message = "";

$scope.left = function(){

return 100 - $scope.message.length;

}

$scope.clear = function(){

$scope.message = "";

}

$scope.save = function(){

alert("note saved");

}

});

</script>

</body>

</html>

时间: 2024-12-27 21:45:48

angularjs小应用的相关文章

AngularJS小知识点一

AngularJS是由谷歌公司及一个由开发者组成的个人社区共同打造.其主要优势在于帮助使用者在web应用程序中实现必要的动态视图.它是通过原生的MVC(模型-视图-控制器)功能来增强HTML. PS:MVC是一种软件架构设计模式,它将表现从用户交互中分离出来.模型--->应用的数据+与数据进行交互的方法,视图--->将数据呈现给用户,控制器--->二者的桥梁.即一个函数,用来向视图的作用域中添加额外的功能. ng-app---->>声明所有被其包含的内容都属于这个Angula

AngularJS小练习

首先可能需要安装npm,并且配置环境. 1.打开Dos(命令提示符).按Windows徽标键+R组合键,输入cmd然后按回车键进入Dos. 2.安装Yeoman.在Dos下输入npm install -g yo. 3.安装Grunt.在Dos下输入npm install -g grunt-cli. 4.安装Bower.在Dos下输入npm install -g bower. 5.安装Generator-angular的0.9.8版本.在Dos下输入npm install -g [email pr

(四)Angularjs - 小实例(2)

自定义指令编写时钟 模板 <!-- 模板文件 --><html> <!-- 内置的ng-app指令通知编译器启动AngularJS框架--> <body ng-app="ezstuff"> <!-- 我们自己定义的ez-clock指令通知编译器生成时钟widget--> <ez-clock></ez-clock> </body> <script src="angular.js

(二)Angularjs - 小实例

AngularJS处理数据表格 使用 np-repeat 指令 <table> ... <!-- 这里使用ng-repeat指令来重复数据生成表格 --> <tr ng-repeat="subject in student.subjects"> <td>{{ subject.name }}</td> <td>{{ subject.marks }}</td> </tr> ... </ta

AngularJS小示例&lt;2&gt;

<ul ng-init="names=[                     {name: '乔乐', age:'25'},                     {name: '周迅', age:'40'},                     {name: '魏瑞', age:'25'},                     {name: '展昭', age:'98'}                     ]"> <li ng-repeat=&q

AngularJS小示例

效果如上图.代码如下 <!DOCTYPE html> <html lang="en" ng-app="app">     <head>         <meta name="generator"         content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tr

Angularjs切换网站配色模式简单示例2(切换body元素的class)

一个网站可以有多种配色方案,例如正常模式,夜间模式等. 简单示例一个通过点击toggle 按钮,切换body元素的class,达到切换配色模式的angularjs小app. 1. Live范例可以在以下Codepen网址查看: http://codepen.io/ChristyWang/pen/NPxNMx 2. Toggle button源代码由以下网站生成:https://proto.io/freebies/onoff/ 3. 主要文件有两个:index.html和main.css. ind

Angularjs切换网站配色模式简单示例

一个网站可以有多种配色方案,例如正常模式,夜间模式等. 简单示例一个通过点击按钮,更换css文件,达到切换配色模式的angularjs 小app. 主要文件有三个:index.html(主文件),white.css(白色背景配色方案css文件),black.css(黑色背景配色方案css文件). index.html文件代码如下: <!DOCTYPE html> <html> <head> <link rel='stylesheet' type='text/css

requireJS的基本用法

引言 目前项目中的前端架构采用的是RequireJS+AngularJS,小编在工作之余对这个前端框架比较感兴趣,在开始的 时候对这个框架不是很懂,因为里面有很多平台自己封装的东西,所以在理解起来不是很容易,经过这一段时间在项 目中的运用有了一定的理解,下面先来总结总结一下其中的一个技术点--RequireJS的基本用法. 基本介绍 RequireJS是一个JavaScript文件或者模块的加载器.它可以提高JavaScript文件的加载速度,避免不必要的 堵塞.它针对于在浏览器环境中使用做过专