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 相关文章推荐
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
Javascript合并表格中具有相同内容单元格示例
Aug 11 Javascript
JS案例分享之金额小写转大写
May 15 Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
JavaScript 学习笔记之语句
Jan 14 Javascript
js获取时间精确到秒(年月日)
Mar 16 Javascript
JavaScript操作表单实例讲解(上)
Jun 20 Javascript
一个简单的JavaScript Map实例(分享)
Aug 03 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 Javascript
小程序实现按下录音松开识别语音
Nov 22 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也可以?成Shell Script
2006/10/09 PHP
yii框架表单模型使用及以数组形式提交表单数据示例
2014/04/30 PHP
为原生js Array增加each方法
2012/04/07 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
2016/02/02 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
JavaScript轮播图简单制作方法
2017/02/20 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
小程序实现留言板
2018/11/02 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
2020/09/08 Javascript
[14:50]2018DOTA2亚洲邀请赛开幕式
2018/04/03 DOTA
将Django框架和遗留的Web应用集成的方法
2015/07/24 Python
python 容器总结整理
2017/04/04 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
python中的错误如何查看
2020/07/08 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
HTML5 video播放器全屏(fullScreen)方法实例
2015/04/24 HTML / CSS
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
Java模拟试题
2014/11/10 面试题
通信工程毕业生求职信
2013/11/16 职场文书
人力资源经理的岗位职责范本
2014/02/28 职场文书
大一学生职业生涯规划
2014/03/11 职场文书
党员剖析材料范文
2014/12/18 职场文书
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis
JS实现数组去重的11种方法总结
2022/04/04 Javascript