【19】AngularJS 应用
AngularJS 应用
现在是时候创建一个真正的 AngularJS 单页 Web 应用（single page web application，SPA）了。
AngularJS 应用实例
现在可以开始创建第一个 AngularJS 应用程序：
效果：
应用程序讲解
<html ng-app="myNoteApp"><script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script><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(){return100- $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 作为应用的根进行编译。
应用的根可以是整个页面，或者页面的一小部分，如果是一小部分会更快编译和执行。
【19】AngularJS 应用的更多相关文章
- AngularJS笔记---数据绑定
一.数据绑定 1.简单绑定 下面实现了一个简单的加法运算的绑定, A.ng-app:表示该div以内都在AngularJS的应用, 去掉ng-app="" 那么后面的绑定都将无效 ...
- Part 19 AngularJS Services
What is a service in AngularJSBefore we talk about what a service is in Angular. Let's talk about a ...
- 20个angularjs开发工具
AngularJS是那些渴望以动态方式来设计web app的web开发人员最偏爱的框架之一.如果你是一个希望启动AngularJS项目的开发人员,那么你可能需要帮助来挑选出趁手的工具…… 在Value ...
- AngularJS快速入门指南19：示例代码
本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...
- 19、AngularJs知识点总结 part-1
1.AngularJs AngularJs是一款JavaScript开源库,由Google维护,用来协助单一页面应用程序: AngularJs的目标是通过MVC模式增强基于浏览器的应用,使开发和测试变 ...
- 夺命雷公狗—angularjs—19—angular-route
ngRoute包括的内容 ng的路由机制是靠ngRoute提供的,通过hash和history两种方式实现了路由,可以检测浏览器是否支持history来灵活调用相应的方式.ng的路由(ngRoute) ...
- 初探AngularJS
一.前言 早已听说AngularJS的大名,并在很久前也编写过些小demo,但是都没有系统学习过.由于,在下个版本项目中用到了AngularJS,so,那就一起再来研究研究呗. 说到,这个Angula ...
- 前端MVC学习总结（二）——AngularJS验证、过滤器、指令
一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...
- angularjs之filter过滤器
现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤 ...
随机推荐
- mysql/sql server和java之间的数据类型对应关系
Mysql************************************当前列 ClassName ColumnType DisplaySize TypeName0: java.lang.I ...
- 如何在 ubuntu 12.04 上安装 skype（转载）
转自:http://blog.51osos.com/linux/how-to-install-skype-in-ubuntu-12-04/ 添加Canonical Partner Repository ...
- bzoj 1050: [HAOI2006]旅行comf【枚举+并查集】
m是5000,就想到了直接枚举比例 具体做法是是先把边按照边权从小到大排序,然后先枚举最小边权,再枚举最大边权,就是从最小边权里一个一个加进并查集里,每次查st是否联通,联通则退出,更新答案 #inc ...
- Mybatis Generator插件升级版
一.目的: 1. *mapper.java 文件名称 改为*DAO.java2. mapper以及mapper.xml 重复执行,只会覆盖原模板方法,不会覆盖自定义方法3. 实体类添加中文注释 二.步 ...
- cloudera-agent启动File not found ： /usr/sbin/cmf-agent解决办法（图文详解）
不多说,直接上干货! 问题详情 bigdata@nssa-sensor1:~$ sudo service cloudera-scm-agent startFile not found : /usr/s ...
- Storm概念学习系列之storm流程图
把stream当做一列火车, tuple当做车厢,spout当做始发站,bolt当做是中间站点!!! 见 Storm概念学习系列之Spout数据源 Storm概念学习系列之Topology拓扑 Sto ...
- 【转】Spark:Master High Availability（HA）高可用配置的2种实现
原博文出自于: 感谢! Spark Standalone集群是Master-Slaves架构的集群模式,和大部分的Master-Slaves结构集群一样,存在着Master单点故障的问题.如何解决这个 ...
- sublime text 3 使用技巧
一.下载 官网下载合适的版本(http://www.sublimetext.com/3) 二.破解 执行 Help->Enter license 粘贴你的License代码 ----- BEGI ...
- LN : Eden Bitset_3
Appreciation to our TA, 王毅峰, who designed this task. 问题描述 Give you N numbers a[1]...a[n] and M numbe ...
- centos源码编译安装nginx过程记录
前言:Centos系统编译安装LNMP环境是每来一台新服务器或换电脑都需要做的事情.这里仅做一个记录.给初学者一个参考! 一.安装前的环境 这里用的是centos 7系统. 我们默认把下载的软件放在 ...