Angularjs简介
很久没有系统学习一个新技术了,angularjs将会比较系统的讲解这个技术的语法、应用。次类型的博客将会持续更新,博主也是一个初学者,如果有问题欢迎留言讨论。
angularjs简介。
angularjs在创建优质的web应用的方面有着令人难以置信的能力。你将会用到一些概念,这个概念将会贯穿整个应用。并非杜撰了这些概念,而只是从其他开发环境中大量地借用了这些比较成功的习惯用语,然后以适合HTML、浏览区一起其他常见的web标准的方式来实现了这些概念。
多页面的应用会在服务端创建HTML,把HTML和数据装配并混合起来,然后把生成的页面发送到浏览器中。在某种程度上,大部分单页应用也叫作AJAX应用,也会做同样的事情。在这一方面。Angularjs在处理方式完全不同,模版和数据都会发送到浏览器中,然后客户端进行专配。这样一来,服务器的角色就是仅仅为这些模版提供一些静态资源,然后为这些模版提供所需的正确的数据。
我们能来看一个例子,看看angular是如何把数据和模版进行装配的。我们会例行公事的写一个“Hello World!”,但是不会把“Hello world!”写成一个完整的字符串打印出来。
为了实现这一功能,我把模版放在hello.html中:
<!DOCTYPE html>
<html ng-app="hello">
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<script src="static/js/angular.js" type="text/javascript"></script>
<script src="static/app/controller/controller.js" type="text/javascript"></script>
</head>
<body ng-controller="HelloController">
<p>{{greeting.text}},world</p>
</body>
</html>
!(function (){
var app= angular.module('hello',[]);
app.controller('HelloController', function ($scope) {
$scope.greeting = {text: "Hello"};
});
}());
使用任意的浏览器打开hello.html,你会看到如下效果:
与之前广泛的应用相比,这里有些非常有趣的东西需要注意:
1、HTML里没有ID或者class来定义事件和监听器。
2、当把HelloController中的greeting.text设置成其他的文本的时候,我们没有必要设置任何的监听事件和回调函数
3、HelloController只是一个普通的javascript类,并没有继承任何angularjs类
4、HelloController可以获取到它的$scope类,而没有必要去创建它
5、没有必要去自己调用HelloController的构造方法,或者指定合适调用它
数据绑定
当数据改变的时候,我们会把HTML模版和数据混合起来,然后把获得的DOM数据插入到UI中,但是,当根据用户的修改状态来修改数据的时候可能要编写极其复杂度代码来保证数据的状态是正确的,并且UI和JAVASCRIPT是属性要同时正确。
但是,我们不需要编写代码就能做到以上所有事情会怎样呢?如果我们可以仅仅声明UI中某个部分需要映射到javascript属性,然后它们自己去同步又会怎样呢?这样是编码风发就叫数据绑定。
为了实战中看到这一点,我们把第一个例子,让它变成动态的。目前的情况是greeting.text是一个静态的值,之后再也不会修改它。为了让它变成动态的,我们来增加一个输入框,会把greeting.text值变成用户输入的值:
<!DOCTYPE html>
<html ng-app="hello">
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<script src="static/js/angular.js" type="text/javascript"></script>
<script src="static/app/controller/controller.js" type="text/javascript"></script>
</head>
<body ng-controller="HelloController">
<input type="text" ng-model="greeting.text"/>
<p>{{greeting.text}},world</p>
</body>
</html>
!(function (){
var app= angular.module('hello',[]);
app.controller('HelloController', function ($scope) {
$scope.greeting = {text: "Hello"};
});
}());
我们在没有添加任何事件的时候UI就自动刷新了,这一机制对于来自服务器的数据同样有效。angular会自动把输入框和花括号中的文本更新为所获得的新值。
依赖注入
如代码所示,我们并不需要编写任何代码去获得$scope对象,而是$scope对象会自动传递给我们,我们并不需要调用任何函数去调用它,只需要办$scope对象放到HelloController中我们就可使用它了,正如以后的讲解当中,$scope并不是我们唯一能获得的对象,如:如果我们想获得浏览器中URL上的操作,可以适应$location对象,只需把$location对象放到HelloController中就可以使用了。
!(function (){
var app= angular.module('hello',[]);
app.controller('HelloController', function ($scope,$location) {
$scope.greeting = {text: "Hello"};
//在这里进行一些$locaotion操作
});
}());
指令
angularjs最强大的功能之一就是,你可以把模版编写成HTML的形式。之所以可以做到这一点,是因为,我们引入了一款强大的DOM转换引擎,可以用他来扩展HTML语法。
有了这个东东,你就可以实现一些神奇的功能!
Angularjs简介的更多相关文章
- AngularJS学习之旅—AngularJS 简介(一)
一.AngularJS 简介 1.AngularJS 是一个 JavaScript 框架. AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库.Angu ...
- 【03】AngularJS 简介
AngularJS 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML ...
- AngularJS简介与四大特征
1.1 AngularJS简介 AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.A ...
- Angular企业级开发(1)-AngularJS简介
AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...
- 01、AngularJs简介
AngularJs致力于减轻程序员在开发Ajax应用过程的痛苦.做前端的童鞋都知道,当在开发Ajax应用时,我们在与后台交互的同时,还在不断的手动操作Dom,诸如自己组装后台数据,渲染Html标签生成 ...
- AngularJS 简介
AngularJS 是一个 JavaScript 框架. 它可通过 <script> 标签添加到 HTML 页面. <script src="http://apps.bdi ...
- AngularJS 简介、指令、表达式
AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HT ...
- AngularJS开发指南1:AngularJS简介
什么是 AngularJS? AngularJS 是一个为动态WEB应用设计的结构框架.它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚.简洁地构建你的应用组件.它的创新点在于, ...
- 跨平台移动APP开发进阶(四)AngularJS简介
AngularJS 是一个为动态WEB应用设计的结构框架.它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚.简洁地构建你的应用组件. 它的创新点在于,利用 数据绑定 和 依赖注入 ...
随机推荐
- kvm 性能调优
CPU Tuning Cache share tuning 对于物理 CPU,同一个 core 的 threads 共享 L2 Cache,同一个 socket 的 cores 共享 L3 cache ...
- MFC发送自定义消息-PostMessage和SendMessage
PostMessage:把消息投放到线程的消息队列,不能消息被处理就立即返回SendMessage:消息被处理完后才返回 几种发送消息的写法: ::PostMessage(GetSafeHwnd( ...
- seaJs学习笔记之javascript的依赖问题
之前分别为大家介绍了有关javascript中的冲突和性能问题,今天为大家介绍一下有关javascript中的依赖问题.我们将继续就之前javascript中性能问题继续介绍. 先来回顾一下性能问题的 ...
- (4/18)重学Standford_iOS7开发_框架和带属性字符串_课程笔记
第四课(干货课): (最近要复习考试,有点略跟不上节奏,这节课的内容还是比较重要的,仔细理解掌握对今后的编程会有很大影响) 本节课主要涉及到Foundation和UIKit框架,基本都是概念与API知 ...
- ABAP更改现有程序
语法: READ REPORT <prog> INTO <itab>. INSERT REPORT <prog> FROM <itab>. 假定下列简 ...
- 聊一聊 Android 6.0 的运行时权限
权限一刀切 棉花糖运行时权限 权限的分组 正常权限 正常权限列表 特殊权限危险权限 请求SYSTEM_ALERT_WINDOW 请求WRITE_SETTINGS 必须要支持运行时权限么 不支持运行时权 ...
- hibernate入门之person表
下面的hibernate入门person表指的是:根据mysql数据库中的test表和其中的元素-->建立映射表==>进而创建持久化类的顺序来操作了,下面为步骤 1.配置MySQL驱动程序 ...
- windows7 'telnet'不是内部或外部命令--转载
['telnet'不是内部或外部命令,也不是可运行的程序或批处理文件]当你想用telnet命令时,发现提示这句话怎么办?其实很简单,接下来为大家介绍下如何使用 方法/步骤 一般只有windows7 ...
- python学习笔记--Django入门四 管理站点--二
接上一节 python学习笔记--Django入门四 管理站点 设置字段可选 编辑Book模块在email字段上加上blank=True,指定email字段为可选,代码如下: class Autho ...
- java io 文件操作
package com.svse; import java.io.File; import java.io.IOException; public class IOTest { public stat ...