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 相关文章推荐
网络之美 JavaScript中Get和Set访问器的实现代码
Sep 19 Javascript
自己用jQuery写了一个图片的马赛克消失效果
May 04 Javascript
jQuery Validation PlugIn的使用方法详解
Dec 18 Javascript
js+canvas绘制矩形的方法
Jan 28 Javascript
JS验证逗号隔开可以是中文字母数字
Apr 22 Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
记录一次完整的react hooks实践
Mar 11 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 Javascript
TypeScript 内置高级类型编程示例
Sep 23 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 Reflection API详解
2015/05/12 PHP
javascript一点特殊用法
2008/05/28 Javascript
jquery特效 幻灯片效果示例代码
2013/07/16 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
Vue Promise的axios请求封装详解
2018/08/13 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
如何实现一个webpack模块解析器
2018/10/24 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
python 实现将字典dict、列表list中的中文正常显示方法
2018/07/06 Python
用python代码将tiff图片存储到jpg的方法
2018/12/04 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
python自动点赞功能的实现思路
2020/02/26 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
Sephora丝芙兰马来西亚官方网站:国际化妆品购物
2018/03/15 全球购物
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
模具专业自荐信
2014/05/29 职场文书
捐款活动总结
2014/08/27 职场文书
教师自查自纠材料
2014/10/14 职场文书
2014年体育部工作总结
2014/11/13 职场文书
通报表扬范文
2015/01/17 职场文书
发布会邀请函
2015/01/31 职场文书
班主任高考寄语
2015/02/26 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
答辩状格式范本
2015/05/22 职场文书
高温慰问简报
2015/07/21 职场文书
七年级语文教学反思
2016/03/03 职场文书
Python中的xlrd模块使用整理
2021/06/15 Python