首页 技术 正文
技术 2022年11月20日
0 收藏 872 点赞 3,212 浏览 1684 个字

什么是AngularJS

AngularJS是一款优秀的前端JS框架,是Google多款产品之一,简称ng。

ng有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

它可以让前端开发人员将获取数据、数据模型和视图隔离进行开发。

Angular包括什么

ng包括指令、服务、筛选器和一些常用的类库,其中指令是最为让人炫目的功能,它为增强HTML标签的互动性提供了极大的便利。

AngularJS学习笔记(一)走近AngularJS

ng有一些非常棒的特性,包括控制器、指令、服务、路由、筛选器。

AngularJS学习笔记(一)走近AngularJS

五大核心

  • MVVM —— 吸收了传统的MVC设计模式针但又并不执行传统意义上的MVC,更接近于MVVM(Moodel-View-ViewModel)。

  • 依赖注入 —— AngularJS拥有内建的依赖注入子系统,可以帮助开发人员更容易的开发,理解和测试应用。

  • 双向数据绑定 —— 实现了把model与view完全绑定在一起,model变化,view也变化,反之亦然。

  • 模板 —— 在AngularJS中,模板相当于HTML文件被浏览器解析到DOM中,AngularJS遍历这些DOM,也就是说AuguarJS把模板当做DOM来操作,去生成一些指令来完成对view的数据绑定。

  • 指令 —— 可以用来创建自定义的标签,也可以用来装饰元素或者操作DOM属性。

AngularJS的神奇

在ng中,双向绑定和指令是最为神奇的武器。

双向绑定让我们不用再考虑数据的同步问题,变量是否被同步,页面元素显示是否正确,这些由于双向绑定和指令的配合,已经确实从原来的Dom优先转向了数据优先。

而指令更是让html标签如虎添翼,极大的增强的html标签的交互能力,而自定义指令则给了我们造物主的能力,可以开发出更具语意的标签。

运行环境

每个例子均要通过手工编码,才能知道其中潜在的问题。

开发环境是:win7(64)、VS2013、ng1.3

运行环境是:win7(64)、360极速浏览器。

因本项目主要是学习前台框架,我将所有代码再jsrun.cn上已经备份一份,可以直接访问,查看效果。

来个例子吧

让我们从例子里来看下ng的应用,在逐步完善的过程中学习到新的东西。

<!DOCTYPE html><!--一个页面仅能有一个ng-app -->
<html ng-app="App">
<head>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script>
<script type="text/javascript"> var App = angular.module("App", []); App.controller("ctrl", function ($scope) {
//初始化为空
$scope.name = '';
});
</script>
</head>
<body >
<!--一个页面可以有多个ng-controller-->
<div ng-controller ="ctrl">
<input type="text" ng-model="name" /><br />
hello,{{name}}
</div>
</body>
</html>

运行结果:

AngularJS学习笔记(一)走近AngularJS

这个功能如果放在以前的话,我们需要监听textbox的onchange事件,并及时更新dom元素,显示textbox输入的数据,现在,我们既没有引用JQuery,也没有编写几行js代码,这些都实现了。

你可以点击这里尝试运行。

我了解了什么

  1. 在html元素上标记了ng-app属性,一个页面只能有一个该属性
  2. 在div元素上标记了ng-controller属性,该属性的值需在js脚本中定义
  3. 数据双向绑定,我们改动textbox中值的时候,下面文字自然跟着变化
  4. 在脚本中初始化值,例如:$scope.name=’’

结束语

本文档是我学习过程中的笔记,仅是我本阶段的学习心得。

随着学习的深入,理解加深,我会重新完善该笔记,希望此笔记不要起到误导的作用。

最后,我附上在学习过程中参考的手册:《AngularJS 中文API参考手册》。

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,994
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,507
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,350
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,135
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,768
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,845