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. nrm -- NPM registry 管理工具

    https://cnodejs.org/topic/5326e78c434e04172c006826 cnpm:http://npm.taobao.org/

  2. C# 简单实现直线方程，抛物线方程（转载）

    http://www.cnblogs.com/hsiang/archive/2017/01/17/6294864.html 本例子是简单的在WinForm程序中实现在坐标系中绘制直线方程,抛物线方程, ...

  3. 清北考前刷题day2早安

    /* 做法一:按h sort一遍,对于一段区间[i,j],高度花费就是h[j]-h[i] 然后枚举区间,把区间内C排序,一个一个尽量选即可. n^3logn 标算:n^3 dp 高度排序,保证从前往后 ...

  4. python re的使用

    re 正则表达式操作  本模块提供了类似于Perl的正则表达式匹配操作.要匹配的模式和字符串可以是Unicode字符串以及8位字符串. 正则表达式使用反斜杠字符('\')来表示特殊的形式或者来允许使用 ...

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

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

  6. mutiset HDOJ 5349 MZL's simple problem

    题目传送门 /* 这题可以用stl的mutiset容器方便求解,我对这东西不熟悉,TLE了几次,最后用读入外挂水过. 题解有O(n)的做法,还以为我是侥幸过的,后来才知道iterator it写在循环 ...

  7. Window对象与DOM

    目前,前端插件数不胜数,比如有移动端滑动特效插件Swiper,下拉刷新的iScroll,弹出框插件layer,还有我们经常使用的JQuery,jquery.mobile等,这些插件能够满足我们日常的基 ...

  8. [转]mysql常用函数

    转自:http://sjolzy.cn/Common-functions-mysql.html 控制流函数 IFNULL(expr1,expr2) 如果expr1不是NULL,IFNULL()返回ex ...

  9. Spring框架及AOP

    Spring核心概念 Spring框架大约由20个功能模块组成,这些模块主分为六个部分: Core Container :基础部分,提供了IoC特性. Data Access/Integration ...

  10. 手机页面操作栏的创建及WebFont的使用

    一.手机界面底部操作栏的创建. <style> .opers{ position:absolute; bottom:0px; left:0px; right:0px; height:3re ...