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. 策略模式Strategy

    定义一系列的算法,把他们封装起来,使得算法独立于适用对象. 比如,一个系统有很多的排序算法,但是使用哪个排序算法是客户对象的自有.因此把每一个排序当做一个策略对象,客户调用哪个对象,就使用对应的策略方 ...

  2. 编码格式简介：ASCII码、ANSI、GBK、GB2312、GB18030和Unicode、UTF-8，BOM头

    编码格式简介:ASCII码.ANSI.GBK.GB2312.GB18030和Unicode.UTF-8,BOM头 二进制: 只有0和1. 十进制.十六进制.八进制: 计算机其实挺笨的,它只认识0101 ...

  3. #define WIN32_LEAN_AND_MEAN

    不加载MFC所需的模块.用英语解释:Say no to MFC如果你的工程不使用MFC,就加上这句,这样一来在编译链接时,包括最后生成的一些供调试用的模块时,速度更快,容量更小.不过对于较大工程,MF ...

  4. C语言编程练习（一）

    问题一: 问题描述:输入n个数,n<=100,找到其中最小的数和最大的数 输入样例: 4                      1 2 3 4 输出样例:14 #include " ...

  5. 应试记录2（没有转载标注，NOIP2016复赛过后自动删除）

    #include<stdio.h> #include<string.h> int main() { ]; memset(a, , sizeof(a)); ;i<=;i++ ...

  6. Python实战之IO多路复用select实例

    Select方法: 句柄列表11, 句柄列表22, 句柄列表33 = select.select(句柄序列1, 句柄序列2, 句柄序列3, 超时时间)   参数: 可接受四个参数(前三个必须) 返回值 ...

  7. Jquery实现按钮点击遮罩加载，处理完后恢复

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="EasyUiLoad.aspx. ...

  8. Dos命令打印文件以及Dos打印到USB打印端口

    MS-DOS命令范例 要将当前目录中的 Report.txt 发送到连上本地计算机的 LPT2,请键入: print /d:LPT2 report.txt 要将 c:\Accounting 目录中的 ...

  9. 关于SEO的一些见解---关键词的选取布局以及内外链的建设

    前言     SEO是英文 Search EngineOptimiation的缩写,中文翻译为"搜索引擎优化"简单地说, SEO就是从搜索引擎上获得流量的技术 . 搜索引掌优化的主 ...

  10. DevOps之内容分发网络CDN

    唠叨话 关于德语噢屁事的知识点,仅提供专业性的精华汇总,具体知识点细节,参考教程网址,如需帮助,请留言. <内容分发网络CDN(Content Delivery Network)> 关于虚 ...