angular.js快速入门 hello world
我们整个系列的学习会去写一个简单blog雏形,如果有精力再完善美化.
但是这篇还是要从HelloWorld开始学习.
angular.js 文件加载我们选用 bootstrap中文网提供的一个cdn服务.
我们找到 1.3.8的angular.js cdn地址,引用到页面 index.html中
http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js
初识 angular.js :
它是一个前端的MVC框架,对应 模型,视图,控制器.
页面根据指令运行,angular.js 内置了很多指令,随后的学习中会逐渐应用到,还可以自己定义自己的指令.
最简单的单页面如下:
<!DOCTYPE html>
<html ng-app>
<head>
<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"></script>
<title>一介布衣</title>
<base href="/" />
</head>
<body>
</body>
</html>
这个简单的页面已经可以运行 angular.js
我们首先看到 最上方的指令 ng-app ,这个指令告诉我们 angular.js 要接管 <html>….</html> 之间的部分.
那么这个节点之间我们出现的所有指令都会被处理.
下来来个简单的 Hello World!,非常简单.
在<body>....</body> 之间为视图区.
angular.js 中定义 {{ }} 2个{}之间的数据为模型数据,就是说,{{模型数据}} 之间定义的数据是来自模型,之间的数据也可以改变模型,这就是双向绑定的意思,模型可以改变视图,视图可以改变模型.
既然这个简单的页面我们没有定义控制器,那么我们如何取到当前模型的数据呢?没有办法取到.
但是,因为是双向绑定,所以我们可以改变模型,就是给模型赋值.
<body>
<span>{{name='hello world!'}}</span>
</body>
我们在body 标签中新加span ,span的内容区给当前模型定义一个属性 name,并且赋值 hello world.
既然是双向绑定,我们赋值的变量,是不是可以在视图中再直接使用变量呢?
<body>
<span>{{name='hello world!'}}</span>
<a style="color:red;">{{name}}</a>
</body>
如图所见,我们直接在 a标签中使用 {{name}} 变量,直接显示出来上面赋值的 "hello world!"
下面我们再看一种双向绑定, ng-model 指定模型参数.
<body>
<input type="text" ng-model="name" />
显示文字,{{name}}
</body>
我们看到 input 绑定到了模型 name 参数上,所以input 的value 变化直接导致 模型中的name 值在变化.这和 {{name='hello world!'}} 类似.
而下面我们通用使用 {{name}} 让视图绑定模型,因为模型的改变导致视图实时变化.
但是上面这种视图绑定有一点点弊端,就是当页面加载卡顿或者加载augular.js失败,导致ng-app 节点中间的绑定没有被angular.js 及时处理.结果用户会在页面上直接看到这种表示符 {{name}} ,这是很不友好的,我们下面看另外一种绑定 ng-bind 指令.
<body>
<input type="text" ng-model="name" />
显示文字,<span ng-bind="name" ></span>
</body>
上面同样达到双向绑定的效果,实时变化.
这一切的一切,我们竟然没有通过js去操作一个dom ,这就是 angular.js 吸引人的地方.
最新文章
- 使用Slf4j集成Log4j2构建项目日志系统的完美解决方案
- c#_1:后台post请求
- 区别和详解:jQuery extend()和jQuery.fn.extend()
- Ubuntu 安装 ImageMagic(6.9.1-6)及 PHP 的 imagick (3.0.1)扩展
- 【python】RGB图片到灰度图的转换
- maven之详解继承与聚合
- iOS开发 字符串添加行间距
- SQL Server数据库PIVOT函数的使用详解(一)
- 【python自动化第二篇:python入门】
- phpcms v9使用GET调用指定id文章内容、页面数据方法
- (转)Linux内核之进程和系统调用
- 【转】VS2013中如何解决error C4996: &#39;fopen&#39;问题
- websocket(二) websocket的简单实现,识别用户属性的群聊
- iOS支付宝,微信,银联支付集成封装调用(下)
- Centos查看系统CPU个数、核心数、线程数
- 分布式消息中间件rocketmq的原理与实践
- windows下缩短time_wait的时间
- Extmail 批量添加邮箱用户
- RabbitMQ系列教程之一:我们从最简单的事情开始!Hello World(转载)
- Mask R-CNN详解和安装