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 作为应用的根进行编译。

应用的根可以是整个页面，或者页面的一小部分，如果是一小部分会更快编译和执行。

AngularJS学习篇（二十四）的更多相关文章

  1. AngularJS学习篇（十四）

    AngularJS 事件 ng-click 指令 ng-click 指令定义了 AngularJS 点击事件. <!DOCTYPE html> <html> <head& ...

  2. python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法

    python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法window安装redis,下载Redis的压缩包https://git ...

  3. 学习笔记：CentOS7学习之二十四：expect-正则表达式-sed-cut的使用

    目录 学习笔记:CentOS7学习之二十四:expect-正则表达式-sed-cut的使用 24.1 expect实现无交互登录 24.1.1 安装和使用expect 24.2 正则表达式的使用 24 ...

  4. 设计模式学习（二十四）：Spring 中使用到的设计模式

    设计模式学习(二十四):Spring 中使用到的设计模式 作者:Grey 原文地址: 博客园:设计模式学习(二十四):Spring 中使用到的设计模式 CSDN:设计模式学习(二十四):Spring ...

  5. (C/C++学习笔记) 二十四. 知识补充

    二十四. 知识补充 ● 子类调用父类构造函数 ※ 为什么子类要调用父类的构造函数? 因为子类继承父类,会继承到父类中的数据,所以子类在进行对象初始化时,先调用父类的构造函数,这就是子类的实例化过程. ...

  6. AngularJS学习篇（十二）

    AngularJS SQL ASP.NET 中执行 SQL 获取数据 <!DOCTYPE html> <html> <head> <meta charset= ...

  7. javaweb学习总结(二十四)——jsp传统标签开发

    一.标签技术的API 1.1.标签技术的API类继承关系 二.标签API简单介绍 2.1.JspTag接口 JspTag接口是所有自定义标签的父接口,它是JSP2.0中新定义的一个标记接口,没有任何属 ...

  8. GUI学习之二十四——QDialog学习总结

    今天学习对话框输入控件的基类(QDialog). 一.描述 是对话类窗口(字体框.颜色选择.文件选择框等)的基类. 对话框窗口是顶级窗口(就是说不包含于哪个父类的显示界面里),主要用于短期任务和与用户 ...

  9. Python学习（二十四）—— 前端基础之Bookstrap

    转载自:http://www.cnblogs.com/liwenzhou/p/8214637.html 一.Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.Jav ...

  10. java web学习总结(二十四) -------------------Servlet文件上传和下载的实现

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用 ...

随机推荐

  1. ASP.NET Core 2.0 使用支付宝PC网站支付

    前言 最近在使用ASP.NET Core来进行开发,刚好有个接入支付宝支付的需求,百度了一下没找到相关的资料,看了官方的SDK以及Demo都还是.NET Framework的,所以就先根据官方SDK的 ...

  2. Linux入门之常用命令（14） kill

    Linux kill 命令使用详解 功能说明:删除执行中的程序或工作. 语 法:kill [-s <信息名称或编号>][程序] 或 kill [-l <信息编号>] 补充说明: ...

  3. Just Finish it up UVA - 11093

    Just Finish it up Time Limit: 3000MS   Memory Limit: Unknown   64bit IO Format: %lld & %llu [Sub ...

  4. 天上掉Pizza

    天上掉Pizza 时间限制: 3 Sec  内存限制: 128 MB提交: 73  解决: 48[提交][状态][讨论版] 题目描述 明明喜欢Pizza,但总是缺钱.有一天,他在报纸上阅读,他最喜爱的 ...

  5. P60 2.6

    import java.util.Scanner; public class Num { public static void main(String[] args) { Scanner input ...

  6. Node.js学习之TCP/IP数据通讯

    Node.js学习之TCP/IP数据通讯 1.使用net模块实现基于TCP的数据通讯 提供了一个net模块,专用于实现TCP服务器与TCP客户端之间的通信 1.1创建TCP服务器 在Node.js利用 ...

  7. Ubuntu Docker 版本的更新与安装

    突然发现自己的docker 版本特别的低,目前是1.9.1 属于古董级别的了,想更新一下最新版本,这样最新的一下命令就可以被支持.研究了半天都没有更新成功,更新后的版本始终都是1.9.1 :蒙圈了,找 ...

  8. win 7 系统ie浏览器升级11版本后，f12功能不可用的问题

    自从把ie8升级成11后,f12功能就不可用了.浏览器兼容模式也无法使用. 解决办法:下载windows补丁 IE11-Windows6.1-KB3008923-x64.msu 下载地址: 64位:h ...

  9. java web Servlet 学习笔记 -3 会话管理技术

     Cookie和HttpSession 什么是会话: 用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 每个用户在使用浏览器与服务器进行会话的过 ...

  10. RTKLIB编译及RTCM数据读取样例

    1.RTKLIB简介 RTKLIB是全球导航卫星系统GNSS(global navigation satellite system)的标准&精密定位开源程序包,RTKLIB由日本东京海洋大学( ...