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. 【174】C#添加非默认字体

    参考:C# WinForm程序安装字体或直接调用非注册字体 参考:百度知道 在Debug文件夹下面新建一个font的文件夹,然后将字体的文件复制到里面,使用的时候,直接调用字体文件! private ...

  2. 2-4 Vue中的属性绑定和双向数据绑定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 使用IntelliJ IDEA 创建Maven项目（入门）

    一. 下载Maven 下载地址:http://maven.apache.org/download.cgi tar.gz压缩格式用于unix操作系统,而zip用于windows的操作系统,但在windo ...

  4. sql server数据库占用cpu太大，使用sys.dm_exec_query_stats查询优化

    查询sql语句占用 CPU详细信息: SELECT (SELECT TOP 1 SUBSTRING(s2.text,statement_start_offset / 2+1 , ( (CASE WHE ...

  5. bzoj 1718: [Usaco2006 Jan] Redundant Paths 分离的路径【tarjan】

    首先来分析一下,这是一张无向图,要求没有两条路联通的点对个数 有两条路连通,无向图,也就是说,问题转化为不在一个点双连通分量里的点对个数 tarjan即可,和求scc还不太一样-- #include& ...

  6. redis简介及常见问题

    目录 简介 特点 优点 高性能 高并发 为什么要用 redis 而不用 map/guava 做缓存? redis 和 memcached 的区别 Redis快的原因 为什么redis是单线程 为什么r ...

  7. Quartz定时调度jar包的执行Demo分享

    1.Quartz简介 ​ Quartz框架的核心是调度器.调度器负责管理Quartz应用运行时环境.调度器不是靠自己做所有的工作,而是依赖框架内一些非常重要的部件.Quartz不仅仅是线程和线程管理. ...

  8. 基于.Net Core的API框架的搭建（4）

    6.加入日志功能 日志我们选用log4net,首先引入程序包: 选择2.0.8版本安装.然后在项目根目录新增log4net的配置文件log4net.config: <?xml version=& ...

  9. SQL中CRUD C——create 添加数据 R——read 读取数据 U——update 修改数据 D——delete 删除数据

    在SQL server中对数据库的操作: 删除表:drop table 表名修改表:alter table 表名 添加列add 列名 列类型alter table 表名 drop column 列名 ...

  10. mysql之命令行导入导出

    命令介绍 mysqldump:导出命令,在系统”命令提示符“窗口直接使用,如果提示没有此命令(前提是已经安装成功mysql),在环境变量中的path添加mysql,即path=D:\xxx\mysql ...