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多浏览器捕捉回车事件代码
Jun 22 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
Dec 30 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
简述AngularJS相关的一些编程思想
Jun 23 Javascript
JS插件overlib用法实例详解
Dec 26 Javascript
基于jQuery实现选项卡效果
Jan 04 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
微信小程序实现选项卡功能
Jun 19 Javascript
JavaScript函数IIFE使用详解
Oct 21 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
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
PHP5.3新特性小结
2016/02/14 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
nodejs个人博客开发第五步 分配数据
2017/04/12 NodeJs
angular内置provider之$compileProvider详解
2017/09/27 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
Python实现的石头剪子布代码分享
2014/08/22 Python
python快速查找算法应用实例
2014/09/26 Python
Python实现在线程里运行scrapy的方法
2015/04/07 Python
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
Python中操作符重载用法分析
2016/04/29 Python
python中星号变量的几种特殊用法
2016/09/07 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
英国假睫毛购买网站:FalseEyelashes.co.uk
2018/05/23 全球购物
俄罗斯名牌服装网上商店:UNIQUE FABRIC
2019/07/25 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
农场厂长岗位职责
2013/12/28 职场文书
庆元旦广播稿
2014/02/10 职场文书
大学新闻系应届生求职信
2014/06/02 职场文书
培训计划通知
2015/07/15 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
python某漫画app逆向
2021/03/31 Python
python 三边测量定位的实现代码
2021/04/22 Python
利用uni-app生成微信小程序的踩坑记录
2022/04/05 Javascript