AngularJS-入门篇
2018-06-23 22:44:31来源：未知 阅读 ()
AngularJS是什么?
既然能找到这篇日志，证明大家已经了解AngularJS了我这里也就不长篇大论的说了。
其实AngularJS就是，使用JavaScript编写的客户端技术。和Web技术（ HTML、 CSS 和JavaScript）配合使用，使Web应用开发比以往更简单、更快捷。
刚开始学习，咱们得有学的工具，这里建议推荐使用vs，版本无所谓 后面的demo ，我这里基本上都会使用vs2013来进行开发。
说了这么多，一起来写一个小demo，开始咱们神奇的AngularJS之旅吧。
1.先下载包：http://files.cnblogs.com/files/xiaowei0705/angular.min.js
2新建一个页面，写入以下代码：
<!doctype html>
<html ng-app>
<head>
<script src="Scripts/angular.min.js"></script>
</head>
<body>
姓名： <input type="text" ng-model="yourname" placeholder="请输入姓名">
<hr>
你好： {{yourname || '小伟'}}!
</body>
</html>
运行结果：
咱们页面没有做任何的js处理，居然能自动改变！
该示例有一下几点重要的注意事项：
- 文本输入指令
<input ng-model="yourname" />绑定到一个叫yourname的模型变量。 - 双大括号标记将
yourname模型变量添加到问候语文本。 - 你不需要为该应用另外注册一个事件侦听器或添加事件处理程序！
现在试着在输入框中键入您的名称，您键入的名称将立即更新显示在问候语中。 这就是AngularJS双向数据绑定的概念。 输入框的任何更改会立即反映到模型变量（一个方向），模型变量的任何更改都会立即反映到问候语文本中（另一方向）。
AngularJS应用的解析
本节描述AngularJS应用程序的三个组成部分，并解释它们如何映射到模型-视图-控制器设计模式：
模板（Templates）
模板是您用HTML和CSS编写的文件，展现应用的视图。 您可给HTML添加新的元素、属性标记，作为AngularJS编译器的指令。 AngularJS编译器是完全可扩展的，这意味着通过AngularJS您可以在HTML中构建您自己的HTML标记！
应用程序逻辑（Logic）和行为（Behavior）
应用程序逻辑和行为是您用JavaScript定义的控制器。AngularJS与标准AJAX应用程序不同，您不需要另外编写侦听器或DOM控制器，因为它们已经内置到AngularJS中了。这些功能使您的应用程序逻辑很容易编写、测试、维护和理解。
模型数据（Data）
模型是从AngularJS作用域对象的属性引申的。模型中的数据可能是Javascript对象、数组或基本类型，这都不重要，重要的是，他们都属于AngularJS作用域对象。
AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变，AngularJS会立即刷新反映在视图界面中，反之亦然。
此外，AngularJS还提供了一些非常有用的服务特性：
- 底层服务包括依赖注入，XHR、缓存、URL路由和浏览器抽象服务。
- 您还可以扩展和添加自己特定的应用服务。
- 这些服务可以让您非常方便的编写WEB应用。
代码在做什么呢？
ng-app指令：
<html lang="en" ng-app>ng-app指令标记了AngularJS脚本的作用域，在<html>中添加ng-app属性即说明整个<html>都是AngularJS脚本作用域。开发者也可以在局部使用ng-app指令，如<div ng-app>，则AngularJS脚本仅在该<div>中运行。
AngularJS脚本标签：
<script src="lib/angular/angular.js"></script>这行代码载入angular.js脚本，当浏览器将整个HTML页面载入完毕后将会执行该angular.js脚本，angular.js脚本运行后将会寻找含有ng-app指令的HTML标签，该标签即定义了AngularJS应用的作用域。
双大括号绑定的表达式：
<p>Nothing here {{'yet' + '!'}}</p>这行代码演示了AngularJS模板的核心功能——绑定，这个绑定由双大括号{{}}和表达式'yet' + '!'组成。
这个绑定告诉AngularJS需要运算其中的表达式并将结果插入DOM中，接下来的步骤我们将看到，DOM可以随着表达式运算结果的改变而实时更新。
AngularJS表达式Angular expression是一种类似于JavaScript的代码片段，AngularJS表达式仅在AngularJS的作用域中运行，而不是在整个DOM中运行。
源码：http://files.cnblogs.com/files/xiaowei0705/Web_Demo_001.rar
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- javascript面向对象入门基础详细介绍 2020-03-29
- AngularJS实现标签页的两种方式 2019-12-29
- 详解AngularJS 实现JavaScript 动画效果 2019-11-12
- 入门webpack,看这篇就够了 2019-08-14
- 如何在eclipse中安装angularjs插件 2019-08-14
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
