AngularJs教程-快速入门_angularjs是封装了dom吗

作者：知新_RL | 2024-06-10 00:06:00

踩

angularjs是封装了dom吗

AngularJs开发应用

主要介绍AngularJs的特性、应用骨架、应用剖析、与服务器的交互、及简单的Demo

关于AngularJs

AngularJS是一款来自Google的前端JS框架。简称其为 ng 。这款框架最核心特性有：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入，等等。

AngularJS框架通过TDD（测试驱动）的方式开发的，从这个角度看，AngularJS是敏捷开发的一次成功实践。

使用了指令的概念，AngularJS对DOM操作进行了彻底的封装。

AngularJS框架是完全免费开源的。

关于 ng 的几点：

对 IE 方面，它兼容 IE8 及以上的版本。
与 jQuery 集成工作，它的一些对象与 jQuery 相关对象表现是一致的。
使用 ng 时不要冒然去改变相关 DOM 的结构

HelloWorld

第一个Demo，HelloDynamic.html

<html ng-app>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
  <script src="controllers.js"></script>
</head>
<body>
  <div ng-controller='HelloController'>
    <input ng-model='greeting.text'>
    <p>{
   {
   greeting.text}}, World</p>
  </div>
</body>
</html>1
2
3
4
5
6
7
8
9
10
11
12
13
14

controllers.js

function HelloController($scope) {
   
  $scope.greeting = { text: 'Hello' };
}1
2
3
4

这里写图片描述

数据绑定

我们没有在输入框中注册任何change事件监听器就可以让UI自动刷新，AngularJs会自动把输入框和花括号中的文本更新为所获得值。

依赖注入

function HelloController($scope) {
   
  $scope.greeting = { text: 'Hello' };
}1
2
3
4

$scope 对象会自动传递给我们，我们并不需要任何函数去创建这个对象。只要把$ scope对象放在HelloController的构造函数里面，然后就可以获取它了。

当然 $scope对象并不是我们唯一可以获取的对象，我们还可以使用$ location，只要把$location对象放在我们的构造函数中即可。

这种神奇的效果是通过Angular的依赖注入机制实现的。

指令

我们在模板中看到一些新的属性，这些属性不属于HTML规范。我们引进了花括号用来实现数据的绑定；引入了ng-controller用来指定每个控制器负责监视视图的哪个部分；引入了ng-model，用来把输入数据绑定到模型中的以部门属性上。我们把这些叫做HTML扩展命令。

<html ng-app>
<head>
  <title>Your Shopping Cart</title>
</head>
<body ng-controller='CartController'>
<h1>Your Shopping Cart</h1>
<div ng-repeat='item in items'>
  <span>{
   {
   item.title}}</span>
  <input ng-model='item.quantity'>
  <1
2
3
4
5
6
7
8
9
10
11
12

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/696335