AngularJS 简单应用实例


Posted in Javascript onJuly 28, 2016

AngularJS 应用

现在是时候创建一个真正的 AngularJS 单页 Web 应用(single page web application,SPA)了。

AngularJS 应用实例

您已经学习了足够多关于 AngularJS 的知识,现在可以开始创建您的第一个 AngularJS 应用程序:

我的笔记

 

 

剩余字数: 100

应用程序讲解

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</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>剩余字数: <span ng-bind="left()"></span></p>

<script src="myNoteApp.js"></script>
<script src="myNoteCtrl.js"></script>

</body>
</html>

运行结果:

我的笔记

 

剩余字数: 100

应用程序文件 "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("Note Saved");};
});

<html> 元素是 AngularJS 应用: ng-app="myNoteApp" 的容器:

<html ng-app="myNoteApp">

<div> 是 HTML 页面中控制器: ng-controller="myNoteCtrl" 的作用域:

<div ng-controller="myNoteCtrl">

ng-model 指令绑定了 <textarea> 到控制器变量 message:

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

两个 ng-click 事件调用了控制器函数 clear() 和 save():

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

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

ng-bind 指令绑定控制器函数 left() 到<span> ,用于显示剩余字符:

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

应用库文件需要在 AngularJs 加载后才能执行:

<script src="myNoteApp.js"></script>
<script src="myNoteCtrl.js"></script>

AngularJS 应用架构

以上实例是一个完整的 AngularJS 单页Web应用(single page web application,SPA)。

<html> 元素包含了 AngularJS 应用 (ng-app=)。

<div> 元素定义了 AngularJS 控制器的作用域 (ng-controller=)。

在一个应用可以由很多控制器。

应用文件(my...App.js) 定义了应用模型代码。

一个或多个控制器文件 (my...Ctrl.js) 定义了控制器代码。

总结 - 它是如何工作的呢?

ng-app 指令位于应用的根元素下。

对于单页Web应用(single page web application,SPA),应用的根通常为 <html> 元素。

一个或多个 ng-controller 指令定义了应用的控制器。每个控制器有他自己的作用域:: 定义的 HTML 元素。

AngularJS 在 HTML DOMContentLoaded 事件中自动开始。如果找到 ng-app 指令 , AngularJS 载入指令中的模块,并将 ng-app 作为应用的根进行编译。

应用的根可以是整个页面,或者页面的一小部分,如果是一小部分会更快编译和执行。

以上就是对AngularJS简单应用详解,希望能帮助AngularJS编程的朋友。

Javascript 相关文章推荐
jQuery 添加/移除CSS类实现代码
Feb 11 Javascript
Javascript insertAfter() 实现函数代码
Oct 12 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
Nov 07 Javascript
js弹出层永远居中实现思路及代码
Nov 29 Javascript
Jquery validation remote 验证的缓存问题解决方法
Mar 25 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
May 05 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
微信小程序自定义组件之可清除的input组件
Jul 17 Javascript
浅析Vue项目中使用keep-Alive步骤
Jul 27 Javascript
AngularJS 路由详解和简单实例
Jul 28 #Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 #Javascript
AngularJS中实现动画效果的方法
Jul 28 #Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 #Javascript
AngularJS中的包含详细介绍及实现示例
Jul 28 #Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 #Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 #Javascript
You might like
PHP新手上路(十一)
2006/10/09 PHP
PHP4中session登录页面的应用
2008/07/25 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
2009/05/25 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
Javascript Objects详解
2014/09/04 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
JS实现来回出现文字的状态栏特效代码
2015/10/31 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
利用JavaScript阻止表单提交的两种方法
2016/08/11 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
获取IE浏览器Cookie信息的方法
2017/01/23 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
js实现石头剪刀布游戏
2020/10/11 Javascript
理解Python中的With语句
2015/02/02 Python
Django框架中数据的连锁查询和限制返回数据的方法
2015/07/17 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
python 定时器,轮询定时器的实例
2019/02/20 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
python实现图片转字符画
2021/02/19 Python
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
拉飞逸官网:Lafayette 148 New York
2020/07/15 全球购物
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
留学经费担保书
2014/05/12 职场文书
2014最新离职证明范本
2014/09/12 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
2014年班主任工作总结
2014/11/08 职场文书
2014年科普工作总结
2014/12/06 职场文书
雷峰塔导游词
2015/02/09 职场文书
2015年毕业生实习评语
2015/03/25 职场文书