当前位置:   article > 正文

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

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

scopescope对象 放在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
推荐阅读