AngularJS 应用

现在是时候创建一个真正的 AngularJS 单页 Web 应用（single page web application，SPA）了。

AngularJS 应用实例

现在可以开始创建第一个 AngularJS 应用程序：

效果：

应用程序讲解

  1. <html ng-app="myNoteApp">
  2. <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
  3. <body>
  5. <div ng-controller="myNoteCtrl">
  7. <h2>我的笔记</h2>
  9. <p><textarea ng-model="message" cols="40" rows="10"></textarea></p>
  11. <p>
  12. <button ng-click="save()">保存</button>
  13. <button ng-click="clear()">清除</button>
  14. </p>
  16. <p>Number of characters left:<span ng-bind="left()"></span></p>
  18. </div>
  20. <script src="myNoteApp.js"></script>
  21. <script src="myNoteCtrl.js"></script>
  23. </body>
  24. </html>
 

应用程序文件 "myNoteApp.js":

  1. var app = angular.module("myNoteApp",[]);
 

控制器文件 "myNoteCtrl.js":

  1. app.controller("myNoteCtrl",function($scope){
  2. $scope.message ="";
  3. $scope.left =function(){return100- $scope.message.length;};
  4. $scope.clear =function(){$scope.message ="";};
  5. $scope.save =function(){alert("Note Saved");};
  6. });
 

<html> 元素是 AngularJS 应用: ng-app="myNoteApp" 的容器:

  1. <html ng-app="myNoteApp">
 

<div> 是 HTML 页面中控制器: ng-controller="myNoteCtrl" 的作用域:

  1. <div ng-controller="myNoteCtrl">
 

ng-model 指令绑定了 <textarea> 到控制器变量 message:

  1. <textarea ng-model="message" cols="40" rows="10"></textarea>
 

两个 ng-click 事件调用了控制器函数 clear() 和 save():

  1. <button ng-click="save()">Save</button>
  2. <button ng-click="clear()">Clear</button>
 

ng-bind 指令绑定控制器函数 left() 到<span> ，用于显示剩余字符:

  1. Number of characters left:<span ng-bind="left()"></span>
 

应用库文件需要在 AngularJs 加载后才能执行：

  1. <script src="myNoteApp.js"></script>
  2. <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 应用的更多相关文章

  1. AngularJS笔记---数据绑定

    一.数据绑定 1.简单绑定 下面实现了一个简单的加法运算的绑定, A.ng-app:表示该div以内都在AngularJS的应用, 去掉ng-app="" 那么后面的绑定都将无效 ...

  2. Part 19 AngularJS Services

    What is a service in AngularJSBefore we talk about what a service is in Angular. Let's talk about a ...

  3. 20个angularjs开发工具

    AngularJS是那些渴望以动态方式来设计web app的web开发人员最偏爱的框架之一.如果你是一个希望启动AngularJS项目的开发人员,那么你可能需要帮助来挑选出趁手的工具…… 在Value ...

  4. AngularJS快速入门指南19：示例代码

    本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...

  5. 19、AngularJs知识点总结 part-1

    1.AngularJs AngularJs是一款JavaScript开源库,由Google维护,用来协助单一页面应用程序: AngularJs的目标是通过MVC模式增强基于浏览器的应用,使开发和测试变 ...

  6. 夺命雷公狗—angularjs—19—angular-route

    ngRoute包括的内容 ng的路由机制是靠ngRoute提供的,通过hash和history两种方式实现了路由,可以检测浏览器是否支持history来灵活调用相应的方式.ng的路由(ngRoute) ...

  7. 初探AngularJS

    一.前言 早已听说AngularJS的大名,并在很久前也编写过些小demo,但是都没有系统学习过.由于,在下个版本项目中用到了AngularJS,so,那就一起再来研究研究呗. 说到,这个Angula ...

  8. 前端MVC学习总结（二）——AngularJS验证、过滤器、指令

    一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...

  9. angularjs之filter过滤器

    现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤 ...

随机推荐

  1. MySQL权限及登陆、退出方法

    用户权限列表 SELECT 查询权限 INSERT 插入权限 UPDATE 更新权限 DELETE 删除权限(用于删除数据) CREATE 创建权限 DROP 删除权限(用户删除文件) RELOAD ...

  2. nginx+thinkPhp配置虚拟主机和伪静态规则重写

    /usr/local/nginx/conf/nginx.conf 进行配置 server    {        listen 80 default_server;        #listen [: ...

  3. MongoDB一些常用指令与他的JavaScript的对应表

  4. 全面学习ORACLE Scheduler特性(8)Application抛出的Events

    4.2 Application抛出的Events 首先要说明,这里所说的Application是个代词,即可以表示ORACLE数据库之外的应用程序,也可以是ORACLE数据库中的PROCEDURE等对 ...

  5. 《从Paxos到ZooKeeper 分布式一致性原理与实践》阅读【Watcher】

    ZooKeeper 允许客户端向服务端注册一个 Watcher 监听,当服务端的一些指定事件触发了这个 Watcher,那么就会向指定客户端发送一个事件通知来实现分布式的通知功能. ZooKeeper ...

  6. [ Luogu 3924 ] 康纳的线段树

    \(\\\) \(Description\) 现在有一个线段树维护长为\(N\)的数列,实现方式是\(mid=((l+r)>>1)\),支持区间加,节点维护区间和. 共有\(M\)次区间加 ...

  7. ubuntu下编译VLC源码

    http://blog.csdn.net/beitiandijun/article/details/9225591ubuntu下编译VLC源码 分类: 视频处理 2013-07-02 17:33 57 ...

  8. 主库binlog（master-log）与从库relay-log的关系

    主库binlog: # at # :: server id end_log_pos CRC32 COMMIT/*!*/; # at # :: server id end_log_pos CRC32 e ...

  9. XML解析——Java中XML的四种解析方式（转载 by 龍清扬）

    XML是一种通用的数据交换格式,它的平台无关性.语言无关性.系统无关性.给数据集成与交互带来了极大的方便.XML在不同的语言环境中解析方式都是一样的,只不过实现的语法不同而已. XML的解析方式分为四 ...

  10. linux cp复制文件 直接覆盖

    命令: \cp -rf aaaa/* bbbb 复制aaa下的文件到bbb目录