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. 逆向实用干货分享,Hook技术第一讲,之Hook Windows API

    逆向实用干货分享,Hook技术第一讲,之Hook Windows API 作者:IBinary出处:http://www.cnblogs.com/iBinary/版权所有,欢迎保留原文链接进行转载:) ...

  2. MySQL所学所思所想

    MySQL更改线上配置方案思想:原则上,需要备机.备份工作准备到位,有参数调优配置方案.有配置回退方案.有应急切换备机方案.以上方案评审无问题,然后可以和客户约定实施的时间.服务中断时间,先向客户侧申 ...

  3. oracle数据库知识点

    1.oracle启动后的服务 1. Oracle ORCL VSS Writer Service:Oracle卷映射拷贝写入服务,VSS(Volume Shadow Copy Service)能够让存 ...

  4. httpd2.2配置文件详解

    httpd2.2官方配置手册:http://httpd.apache.org/docs/2.2/ 注意:关闭防火墙,iptables规则 vim /etc/sysconfig/selinux SELI ...

  5. Power Strings poj2406（神代码）

    Power Strings Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 29402   Accepted: 12296 D ...

  6. Java总结篇：Java多线程

    Java总结篇系列:Java多线程 多线程作为Java中很重要的一个知识点,在此还是有必要总结一下的. 一.线程的生命周期及五种基本状态 关于Java中线程的生命周期,首先看一下下面这张较为经典的图: ...

  7. 【JAVA零基础入门系列】Day8 Java的控制流程

    什么是控制流程?简单来说就是控制程序运行逻辑的,因为程序一般而言不会直接一步运行到底,而是需要加上一些判断,一些循环等等.举个栗子,就好比你准备出门买个苹果,把这个过程当成程序的话,可能需要先判断一下 ...

  8. C# 多线程、异步线程、线程池相关知识

    /* 线程池ThreadPool类会在需要时增减池中线程的线程数,直到最大的线程数.池中的最大线程数是可配置的. 在双核CPU中,默认设置为1023个工作线程和1000个I/O线程.也可以指定在创建线 ...

  9. SSH/HTTPS安全的本质都依赖于TLS/SSL

    1.SSH/HTTPS的安全本质是TLS/SSL. 2.1990年互联网上的网页主要是静态内容,作为信息发布,使用HTTP明文传输是可以的.不过,后来很多公司开始使用网页进行金融交易,例如:股票,于是 ...

  10. WAMPServer配置修改及问题汇总

    备忘录 软件版本wampserver2.5-Apache-2.4.9-Mysql-5.6.17-php5.5.12-64b -------------------------------------- ...