AngularJS:应用
ylbtech-AngularJS:应用 |
1.返回顶部 |
AngularJS 应用
现在是时候创建一个真正的 AngularJS 单页 Web 应用(single page web application,SPA)了。
AngularJS 应用实例
您已经学习了足够多关于 AngularJS 的知识,现在可以开始创建您的第一个 AngularJS 应用程序:
我的笔记
保存 清除
剩余字数: 100
应用程序讲解
AngularJS 实例
<html ng-app="myNoteApp"> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body><div ng-controller="myNoteCtrl"><h2>我的笔记</h2><p><textarea ng-model="message" cols="40" rows="10"></textarea></p><p> <button ng-click="save()">保存</button> <button ng-click="clear()">清除</button> </p><p>Number of characters left: <span ng-bind="left()"></span></p></div><script src="myNoteApp.js"></script> <script src="myNoteCtrl.js"></script></body> </html>
尝试一下 »
应用程序文件 "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 作为应用的根进行编译。
应用的根可以是整个页面,或者页面的一小部分,如果是一小部分会更快编译和执行。
2.返回顶部 |
3.返回顶部 |
4.返回顶部 |
5.返回顶部 |
6.返回顶部 |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
转载于:https://www.cnblogs.com/storebook/p/8569365.html
AngularJS:应用相关推荐
- AngularJS和DataModel
通常,在AngularJS中使用JSON作为存储数据的模型.我们可能这样在controller中写model: app.controller('BookController',['$scope',fu ...
- AngularJS 杂项知识点
1.要用ngChange要同时使用ngModel,下拉选择获取当前选中值. 2.打包代替动态加载(js文件) requirejs真正的价值在于模块化,不是动态加载,angularjs本身有模块化机制, ...
- angularjs post 跨域
web api搞好了:用Ajax妥妥的:但是前端用的AngulagJS,也懒得再换为Ajax了: 但是问题来了:提示: 已拦截跨源请求:同源策略禁止读取位于 http://x.x.x.x:port/a ...
- AngularJS 指令
1. AngularJS指令的特点: AngularJS通过被称为指令的新属性来扩展HTML,指令的前缀为ng-. AngularJS通过内置的指令来为应用添加功能. AngularJS允许你自定义指 ...
- AngularJS中的按需加载ocLazyLoad
欢迎大家讨论与指导 : ) 初学者,有不足的地方希望各位指出 一.前言 ocLoayLoad是AngularJS的模块按需加载器.一般在小型项目里,首次加载页面就下载好所有的资源没有什么大问题.但是当 ...
- 【12】AngularJS 事件
AngularJS 事件 AngularJS 有自己的 HTML 事件指令. ng-click 指令 ng-click 指令定义了 AngularJS 点击事件. <div ng-app=&qu ...
- Angular的ChangeDetectorRef.detectChanges()实现angularJS的$apply()方法,强制刷新数据渲染
在Javascript代码里,都是按照一定顺序来执行的,当轮到一个代码片段执行的时候,浏览器就只会去执行当前的片段,不会做任何其他的事情.所以有时候一些做得不是很好的网页,当点击了某个东西之后会卡住, ...
- AngularJS学习笔记(3)——通过Ajax获取JSON数据
通过Ajax获取JSON数据 以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app=&quo ...
- angularjs 学习笔记 简单基础
angularjs是谷歌公司的一个项目,弥补了hml在构建方面的不足,通过指令(directive)来扩展html标签,可以使开发者使用html来声明动态内容. angularjs主要用来开发单页应用 ...
- Angularjs集成第三方js插件之Uploadify
有时候需要用一些第三方插件,比如datepicker,slider,或者tree等.以前的做法是直接通过jquery取得某个元素,然后调用某个方法即可.但在angularjs中,不能直接这么写,必须写 ...
最新文章
- html 逗号用什么替换,字符串用javascript数组中的逗号替换“↵”
- Python的控制语句2
- docker本地私有仓库搭建
- android 输入法的显示和隐藏
- [NOIP2001] 提高组 洛谷P1024 一元三次方程求解
- IE6下z-index犯癫不起作用bug的初步研究
- Windows堆栈区别[转]
- android包结构规范,【Android】Android产品-开发规范
- 图说Hadoop HA
- VS2010测试功能之旅:编码的“.NET研究”UI测试(2)-操作动作的录制原理(上)...
- Oracle 10g学习笔记(一)
- Bundling and Minification
- APUE 线程的分离状态
- mysql linux通用版_Linux下安装通用版本的MySQL
- python基础代码大全-Python字典及基本操作(超级详细)
- Visual C# 2008+SQL Server 2005 数据库与网络开发――3.1.2 C# 2005和2008之间的关系
- Flex builder 3 激活码
- Microsoft VS Code安装教程
- pidgin qq_Pidgin入门:Skype的开源替代品
- Android美女拼图游戏