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. Vue Router过渡动效

    <router-view> 是基本的动态组件,所以我们可以用 <transition> 组件给它添加一些过渡效果: <transition> <router- ...

  2. C#面向过程项目之飞行棋

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace 飞行棋V ...

  3. mac apache虚拟主机配置

    <VirtualHost *:80>     ServerAdmin slin      DocumentRoot "/Users/slin/work/phpStudy/myPh ...

  4. oracle创建数据库与配置监听器

    上述是数据库创建完毕 *检测创建 -------------------------------------------------------------2配置监听器---------------- ...

  5. 无线网络发射选址 2014年NOIP全国联赛提高组(二维前缀和)

    P2038 无线网络发射器选址 题目描述 随着智能手机的日益普及,人们对无线网的需求日益增大.某城市决定对城市内的公共场所覆盖无线网. 假设该城市的布局为由严格平行的129 条东西向街道和129 条南 ...

  6. hexo简易脚本

    !/bin/bash 检查是否为master分支.目录是否正确 function git-branch-name { git symbolic-ref --short -q HEAD } functi ...

  7. SQL 设置登录名和密码

    1.打开SQL Server Manager管理器,在左面找到 ‘安全性’ 单击右键 选择‘新建”->“登录”, 如下图 2.弹出对话框,在登录名中输入你的登录号,选择'SQLSERVER身份验 ...

  8. 洛谷P1010 幂次方

    题目描述 任何一个正整数都可以用2的幂次方表示.例如 137=2^7+2^3+2^0 同时约定方次用括号来表示,即a^b 可表示为a(b). 由此可知,137137可表示为: 2(7)+2(3)+2( ...

  9. 转 phpmyadmin操作技巧：如何在phpmyadmin里面复制mysql数据库？

    对于每一个站长而言,都会遇到要进行网站测试的时候.这个时候,往往需要备份数据库.如果按照一般的操作方式,都是先把数据库导出并备份到本地,然后再服务器上测试.如果一切正常还好,一旦出了问题,就又得把数据 ...

  10. PHP 操作数据库乱码 以及调试

    mysql> show create database pxscj;+----------+--------------------------------------------------- ...