AngularJs教程-快速入门

最新推荐文章于 2023-12-04 11:43:38 发布

FreyFan

最新推荐文章于 2023-12-04 11:43:38 发布

阅读量1.6k

点赞数 1

文章标签： angularjs

本文链接：https://blog.csdn.net/fanchw/article/details/52849806

版权

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>

controllers.js

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

这里写图片描述

数据绑定

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

依赖注入

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

$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'>
  <

最低0.47元/天解锁文章

FreyFan

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
AngularJs教程-快速入门

AngularJs开发应用主要介绍AngularJs的特性、应用骨架、应用剖析、与服务器的交互、及简单的Demo关于AngularJsAngularJS是一款来自Google的前端JS框架。简称其为 ng 。这款框架最核心特性有：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入，等等。AngularJS框架通过TDD（测试驱动）的方式开发的，从这个角度看，AngularJS是敏捷开发的一次成
复制链接

扫一扫