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 吸引人的地方.
angular.js快速入门 hello world的更多相关文章
- Node.js快速入门
Node.js是什么? Node.js是建立在谷歌Chrome的JavaScript引擎(V8引擎)的Web应用程序框架. 它的最新版本是:v0.12.7(在编写本教程时的版本).Node.js在官方 ...
- Angular JS从入门基础 mvc三层架构 常用指令
Angular JS从入门基础 mvc模型 常用指令 ★ 最近一直在复习AngularJS,它是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心 ...
- Vue.js+vue-element搭建属于自己的后台管理模板：Vue.js快速入门（二）
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...
- JS快速入门（二）
目录 JS快速入门(二) 结构图 BOM window对象 open() window子对象 location对象 history对象(了解) navigator 对象 screen对象 BOM 定时 ...
- Vue.js 快速入门
什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...
- Vue.js快速入门
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
- Vue.js—快速入门
Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...
- Vue.js——快速入门
Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使 ...
- Vue.js—快速入门及实现用户信息的增删
Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...
随机推荐
- 在Java程序中做字符串拼接时一定要记得的MessageFormat.format
Java里从来少不了字符串拼接的活,Java程序员也肯定用到过StringBuffer,StringBuilder,以及被编译器优化掉的+=.但这些都和下文要谈的无关. 比如有这样的字符串: 张三将去 ...
- “/”应用程序中的server错误
前几天敲ASP.NET有关验证控件的样例的时候,出现了这个问题: 可是对于这个问题我们应该都不陌生,之前敲牛腩的时候也出现过,当时的解决方法是: 在web.config中找 <a ...
- 【转】TCP/IP详解学习笔记（一）
TCP/IP详解学习笔记 这位仁兄写得太好了. http://blog.csdn.net/goodboy1881/category/204448.aspx TCP/IP详解学习笔记(13)-T ...
- Struts2(五)Action二配置
一.method参数 action package com.pb.web.action; public class HourseAction { public String add(){ System ...
- Java从零开始学四(数据类型)
一.Java数据类型划分 二.基本数据类型 No. 数据类型 大小/位 可表示的数据范围 1 long(长整数) 64 -9223372036854775808 ~ 92233720368547758 ...
- 在命令行上 使用 mutt, fetchmail, maildrop, msmtp 收发邮件
基于shell 现在已经有了 Mail.app, Thunderbird, Outlook 这些图形化工具能很方便的处理邮件,为啥还需要 mutt 这种命令行文本方式的邮件工具呢?mutt 的一个优势 ...
- IntelliJ IDEA 2017.2.2 的破解 有效期 2116年
破解三部曲 下载破解文件 JetbrainsCrack-2.6.6-release-enc.jar http://idea.lanyus.com/jar/JetbrainsCrack-2.6.6- ...
- oracle tnsnames.ora文件用法说明
oracle tnsnames.ora文件用法说明 CreationTime--2018年8月10日08点32分 Author:Marydon 1.用途 oracle客户端所需要的一个文件,通过该 ...
- CreateThread、_beginthreadex和AfxBeginThread .
创建线程好几个函数可以使用,可是它们有什么区别,适用于什么情况呢?参考了一些资料,写得都挺好的,这里做一些摘抄和整合. [参考1]CreateThread, AfxBeginThread,_begin ...
- 解决windows下MySQL表名大写自动变小写的问题
解决windows下MySQL表名大写自动变小写的问题 有些人可能会遇到在windows下,表名不能用大写字母, 即使使用了大写字母的建表语句,还是会被自动转成小写. 解决方法: 打开 My ...