草庐IT

AngularJS 简介

runoob 2023-04-06 原文

AngularJS 简介

AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。

AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。

AngularJS 是一个 JavaScript 框架

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

我们建议把脚本放在 <body> 元素的底部。
这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。

各个 angular.js 版本下载： https://github.com/angular/angular.js/releases

AngularJS 扩展了 HTML

AngularJS 通过 ng-directives 扩展了 HTML。

ng-app 指令定义一个 AngularJS 应用程序。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

ng-bind 指令把应用程序数据绑定到 HTML 视图。

AngularJS 实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app=""> <p>名字 : <input type="text" ng-model="name"></p> <h1>Hello {{name}}</h1> <p ng-bind="name"></p> </div> </body> </html>

尝试一下 »

实例讲解：

当网页加载完毕，AngularJS 自动开启。

ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"。

ng-model 指令把输入域的值绑定到应用程序变量 name。

ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

如果您移除了 ng-app 指令，HTML 将直接把表达式显示出来，不会去计算表达式的结果。

什么是 AngularJS？

AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。

  • AngularJS 把应用程序数据绑定到 HTML 元素。
  • AngularJS 可以克隆和重复 HTML 元素。
  • AngularJS 可以隐藏和显示 HTML 元素。
  • AngularJS 可以在 HTML 元素"背后"添加代码。
  • AngularJS 支持输入验证。

AngularJS 指令

正如您所看到的，AngularJS 指令是以 ng 作为前缀的 HTML 属性。

ng-init 指令初始化 AngularJS 应用程序变量。

AngularJS 实例

<div ng-app="" ng-init="firstName='John'"> <p>姓名为 <span ng-bind="firstName"></span></p> </div>

尝试一下 »

HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。

带有有效的 HTML5：

AngularJS 实例

<div data-ng-app="" data-ng-init="firstName='John'"> <p>姓名为 <span data-ng-bind="firstName"></span></p> </div>

尝试一下 »

AngularJS 表达式

AngularJS 表达式写在双大括号内：{{ expression }}。

AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

AngularJS 实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app=""> <p>我的第一个表达式： {{ 5 + 5 }}</p> </div> </body> </html>

尝试一下 »

AngularJS 应用

AngularJS 模块（Module） 定义了 AngularJS 应用。

AngularJS 控制器（Controller） 用于控制 AngularJS 应用。

ng-app指令指明了应用, ng-controller 指明了控制器。

AngularJS 实例

<div ng-app="myApp" ng-controller="myCtrl"> 名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br> <br> 姓名: {{firstName + " " + lastName}} </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; }); </script>

尝试一下 »

AngularJS 模块定义应用:

AngularJS 模块

var app = angular.module('myApp', []);

AngularJS 控制器控制应用:

AngularJS 控制器

app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; });

在接下来的教程中你将学习到更多的应用和模块的知识。

AngularJS简介spanclasshl-brackets

有关AngularJS 简介的更多相关文章

  1. HBase Region 简介和建议数量&大小 - 2

    Region是HBase数据管理的基本单位,region有一点像关系型数据的分区。region中存储这用户的真实数据，而为了管理这些数据，HBase使用了RegionSever来管理region。Region的结构hbaseregion的大小设置默认情况下，每个Table起初只有一个Region，随着数据的不断写入，Region会自动进行拆分。刚拆分时，两个子Region都位于当前的RegionServer，但处于负载均衡的考虑，HMaster有可能会将某个Region转移给其他的RegionServer。RegionSplit时机：当1个region中的某个Store下所有StoreFile

  2. ruby-on-rails - 获取 ActionController::RoutingError(当尝试使用 AngularJS 将数据发布到 Rails 服务器时，没有路由匹配 [OPTIONS] "/users" - 2

    尝试从我的AngularJS端将数据发布到Rails服务器时出现问题。服务器错误:ActionController::RoutingError(Noroutematches[OPTIONS]"/users"):actionpack(4.1.9)lib/action_dispatch/middleware/debug_exceptions.rb:21:in`call'actionpack(4.1.9)lib/action_dispatch/middleware/show_exceptions.rb:30:in`call'railties(4.1.9)lib/rails/rack/logg

  3. IDEA 2023.1 正式发布，新特性简介 - 2

     昨晚看到IDEA官推宣布IntelliJIDEA2023.1正式发布了。简单看了一下，发现这次的新版本包含了许多改进，进一步优化了用户体验，提高了便捷性。至于是否升级最新版本完全是个人意愿，如果觉得新版本没有让自己感兴趣的改进，完全就不用升级，影响不大。软件的版本迭代非常正常，正确看待即可，不持续改进就会慢慢被淘汰！根据官方介绍：IntelliJIDEA2023.1针对新的用户界面进行了大量重构，这些改进都是基于收到的宝贵反馈而实现的。官方还实施了性能增强措施，使得Maven导入更快，并且在打开项目时IDE功能更早地可用。由于后台提交检查，新版本提供了简化的提交流程。IntelliJIDEA

  4. pytest简介 - 2

    介绍pytest是一个非常成熟的全功能的Python测试框架，主要有以下几个特点：简单灵活，容易上手支持参数化能够支持简单的单元测试和复杂的功能测试，还可以用来做selenium/appnium等自动化测试、接口自动化测试（pytest+requests）pytest具有很多第三方插件，并且可以自定义扩展，比较好用的如pytest-selenium（集成selenium）、pytest-html（完美html测试报告生成）、pytest-rerunfailures（失败case重复执行）、pytest-xdist（多CPU分发）等测试用例的skip和xfail处理可以很好的和jenkins集成

  5. SpringCloud入门实战（七）-Hystrix入门简介 - 2

    📝学技术、更要掌握学习的方法，一起学习，让进步发生👩🏻作者：一只IT攻城狮。💐学习建议：1、养成习惯，学习java的任何一个技术，都可以先去官网先看看，更准确、更专业。💐学习建议：2、然后记住每个技术最关键的特性（通常一句话或者几个字），从主线入手，由浅入深学习。❤️《SpringCloud入门实战系列》解锁SpringCloud主流组件入门应用及关键特性。带你了解SpringCloud主流组件,是如何一战解决微服务诸多难题的。项目demo：源码地址👉🏻SpringCloud入门实战系列不迷路👈🏻：SpringCloud入门实战（一）什么是SpringCloud？SpringCloud入门实战

  6. 最新2023年Kali Purple，紫色的带防御kali，简介和安装（超详细） - 2

    文章目录一，什么是kaliPurle（卡利紫）二，如何安装kaliPurple。（有步骤没图片直接是默认）1，复制它的下载链接到迅雷可以让你下镜像变得更快。2，打开你的虚拟机创建新的虚拟机3，点击后面浏览然后找到镜像的所在地选中确定，下一步4，这里默认就可以，因为Ubuntu和这个差不多架构。5，然后，名字自己改一下，然后把他安到你想要装的盘，容量默认。之后一直下一步就可以**6，打开它，然后第一个图形界面安装，直接回车，然后选中文点continue之后没有图片的直接点继续。7，密码想设什么设什么。然后一直继续到我的图片那里改一下就可以了。8，软件默认就行。9，耐心等待。然后点手动配置dvc然

  7. MPU6050 简介 - 2

    目录关于MPU6050芯片关于小板关于厂家和DATASHEET关于漂移关于角加速度还是角速度关于精度和量程（可调，可选）关于功耗，陀螺仪+加速器工作电流：3.8mA（全功率，陀螺仪在所有速率下，在1kHz采样率下加速）采样率高，功耗也高可以参考  MPU6050陀螺仪与Processing和匿名上位机飞控联动实录-知乎关于MPU6050芯片MPU6050传感器模块是6轴运动跟踪设备。包含3轴陀螺仪、3轴加速度计、运动处理器、温度传感器。I2C总线接口，可与微控制器进行通信。通过辅助I2C总线与其他传感器设备通信，如3轴磁力计、压力传感器等。如果3轴磁力计连接到辅助I2C总线，则MPU6050可

  8. MySQL REPLACE字符串函数简介 - 2

    MySQL为您提供了一个有用的字符串函数REPLACE()，它允许您用新的字符串替换表的列中的字符串。REPLACE()函数的语法如下：REPLACE(str,old_string,new_string);SQLREPLACE()函数有三个参数，它将string中的old_string替换为new_string字符串。注意:有一个也叫作REPLACE的语句用于插入或更新数据。所以不要将REPLACE语句与这里的REPLACE字符串函数混淆。REPLACE()函数非常方便搜索和替换表中的文本，例如更新过时的URL，纠正拼写错误等。在UPDATE语句中使用REPLACE函数的语法如下：UPDATE

  9. javascript - angularjs $state 和 $rootScope.$on($stateChangeStart) 问题 - 2

    我已经回答了多个问题，但还没有找到解决方案。我对状态处理有疑问。$urlRouterProvider.otherwise(function($injector,$location){var$state=$injector.get("$state");$state.go("cover");});$stateProvider.state('auth',{url:'/auth',templateUrl:'../views/authView.html',controller:'AuthControllerasauth'}).state('users',{url:'/users',templat

  10. javascript - 在具有静态内容的 angularjs bootstrap 选项卡上处于事件状态 - 2

    我正在使用AngularBootstrapUI来显示带有静态内容的标签集。我对此感到沮丧，因为UIBootstrapTab文档仅显示导航到通过绑定(bind)ng-repeat创建的选项卡。tab1GotoTab3tab2我发现了一些东西听到Stackoverflow但这不适用于当前版本的AngularBootstrapUI..Plunker 最佳答案 要将选项卡设置为事件状态，您需要在范围内将bool标志设置为“true”并将其与给定选项卡的active属性相关联。这看起来像tab1tab2当tabOneActive设置为true

随机推荐