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. Tomcat根目录下work文件夹的作用（转载）

    用 tomcat作web服务器的时候,部署的程序在webApps下,这些程序都是编译后的程序.tomcat有一个work目录,里面存放了页面的缓存, 访问的jsp都会编译,编译后的文件都会存储在wor ...

  2. redis实际项目作用

    我整理一下redis主要在项目作用,只是我接触到的 1  手机验证码存入redis中,可以限制什么时候有效 2 防止接口请求频率过高,例如一分钟只能请求5次 代码如下: <?php /** * ...

  3. spring 异常处理

    1. 实现接口 HandlerExceptionResolver 捕获异常 2.@ExceptionHandler 在方法添加注解,捕获本地controller异常 3.@ControllerAdvi ...

  4. C#与C++的区别（三） 委托与事件

    在C#中没有C++中的函数指针的概念,但是有委托的概念,功能与函数指针类似. C# 委托(Delegate) C# 中的委托(Delegate)类似于 C 或 C++ 中函数的指针.委托(Delega ...

  5. 贪心 CodeForces 137B Permutation

    题目传送门 /* 贪心:因为可以任意修改,所以答案是没有出现过的数字的个数 */ #include <cstdio> #include <algorithm> #include ...

  6. [转]ASP.NET MVC Domain Routing

    本文转自:http://blog.maartenballiauw.be/post/2009/05/20/ASPNET-MVC-Domain-Routing.aspx ASP.NET MVC Domai ...

  7. python之路 之一pyspark

    pip包下载安装pyspark pip install pyspark  这里可能会遇到安装超时的情况   加参数  --timeout=100 pip   -default   -timeout=1 ...

  8. java IO流 之 字节输入流 InputString()

    学习java的重点之一:InputStream  字节输入流的使用 (1)FileInputstream: 子类,读取数据的通道 使用步骤: 1.获取目标文件:new File() 2.建立通道:ne ...

  9. MVC之参数验证(三)

    在实际开发中,项目经理会一直强调一句话,永远不要相信客户端的数据(前端可以不用验证,但是后端必须验证).大家同意这样的说法吧..新端验证毋庸质疑JS验证,提高用户体验我们不得不添加一些与后端一致的验证 ...

  10. Git命令add和commit的区别

    要想弄明白git add和git commit的区别,首先我们需要知道三个概念:工作区(Working Directory).版本库(Repository).暂存区(Stage or index). ...