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 document.referrer 用法
Apr 30 Javascript
Array的push与unshift方法性能比较分析
Mar 05 Javascript
jQuery动态地获取系统时间实现代码
May 24 Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 Javascript
15个常用的jquery代码片段
Dec 19 Javascript
js实现文字超出部分用省略号代替实例代码
Sep 01 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
Javascript实现的StopWatch功能示例
Jun 13 Javascript
详解使用React进行组件库开发
Feb 06 Javascript
微信小程序滑动选择器的实现代码
Aug 10 Javascript
深入学习JavaScript中的bom
May 27 Javascript
JavaScript一元正号运算符示例代码
Jun 30 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
一个改进的UBB类
2006/10/09 PHP
PHP语法速查表
2006/12/06 PHP
解析PHP高效率写法(详解原因)
2013/06/20 PHP
PHP+Javascript实现在线拍照功能实例
2015/07/18 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
three.js实现3D视野缩放效果
2017/11/16 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
[01:28:56]2014 DOTA2华西杯精英邀请赛 5 24 CIS VS DK
2014/05/26 DOTA
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
python 队列详解及实例代码
2016/10/18 Python
Python端口扫描简单程序
2016/11/10 Python
Python正则表达式教程之一:基础篇
2017/03/02 Python
python中的set实现不重复的排序原理
2018/01/24 Python
服务生自我鉴定
2014/01/22 职场文书
运动会广播稿400字
2014/01/25 职场文书
优秀士兵先进事迹
2014/02/06 职场文书
国培计划培训感言
2014/03/11 职场文书
服务质量承诺书
2014/03/27 职场文书
培训研修方案
2014/06/06 职场文书
2014年保密工作总结
2014/11/22 职场文书
大队委员竞选稿
2015/11/20 职场文书
公务员的复习计划书,请收下!
2019/07/15 职场文书
为什么在foreach循环中JAVA集合不能添加或删除元素
2021/06/11 Java/Android