初识AngularJS 之 HelloWorld和数据绑定
1.Hello World
我用的开发工具是 atom ，大家有需要的话可以找我要安装包嘻嘻
第一步：
写入以下代码：
<!DOCTYPE html>
<html ng-app> <head>
<meta charset="UTF-8">
<title>Hello World</title>
<script src="../script/angular.min.js"></script>
</head> <body>
<input type="text" ng-model="person.name" placeholder="请输入您的姓名...">
<h1>Hello, {{person.name}} !</h1>
</body> </html>
第二步：保存你新建的html
点击保存后，你会发现在你刚创建的目录下有一个helloWorld.html
第三步：下载AngularJS库，并将其添加到项目中：
预览效果如下：
hello World就这样实现啦！当然大家也看到，当文本框里面的内容变了后，下面的内容也随之变化，这就是angular的数据双向绑定。
2.数据双向绑定
按照前面的 第一步 再在src下新建一个dataBinding.html，并将其保存。
代码如下：
<!DOCTYPE html>
<html ng-app="myApp"> <head>
<meta charset="UTF-8">
<title>数据双向绑定</title>
<script src="../script/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myController', function($scope, $timeout) {
var updateClock = function() {
$scope.clock = new Date();
$timeout(function() {
updateClock();
}, 1000);
};
$scope.value = 'aaa';
updateClock();
});
</script>
</head> <body>
<div ng-controller="myController">
<h1>现在时间：{{clock}}</h1>
<input type="text" ng-model="value" placeholder="请输入您的姓名...">
<h1>Hello, {{value}} !</h1>
</div>
</body> </html>
预览效果如下：
发vfvfv
初识AngularJS 之 HelloWorld和数据绑定的更多相关文章
- HelloWorld和数据绑定
HelloWorld和数据绑定 目录导读: AngularJS 系列 学习笔记 目录篇 前言: 好记性不如烂键盘,随笔就是随手笔记,希望以后有用. 本篇目录: 1. Hello World 2. An ...
- AngularJS 系列 01 - HelloWorld和数据绑定
目录导读: AngularJS 系列 学习笔记 目录篇 前言: 好记性不如烂键盘,随笔就是随手笔记,希望以后有用. 本篇目录: 1. Hello World 2. AngularJS中的数据绑定 3. ...
- AngularJS输出helloworld
AngularJS是什么? AngularJS是目前很火的前端JS框架之一, AngularJS的开发团队将其描述为一种构建动态Web应用的结构化框架.它是完全使用JavaScript编写的客户端技术 ...
- 我的angularjs源码学习之旅1——初识angularjs
angular诞生有好几年光景了,有Google公司的支持版本更新还是比较快,从一开始就是一个热门技术,但是本人近期才开始接触到.只能感慨自己学习起点有点晚了.只能是加倍努力赶上技术前线. 因为有分析 ...
- 前端 初识angularJS的基本概念
DEMO1演示地址:http://webenh.chinacloudsites.cn/default/demo1 今天在这里分享分享我个人学习angular的知识点总结.在还没有接触到angula ...
- 【AngularJS】—— 1 初识AngularJs
怀着激动与忐忑的心情,开始了学习AngularJS的旅程,很久之前就听说了这个前端框架,但是由于自己一直没有从事相关的工作,因此也没有进行学习.这次正好学习AngularJS,直接复习一下前端的知识. ...
- AngularJS语法基础及数据绑定——详解各种数据绑定指令、属性应用
AngularJS简单易学,但是功能强大.特别是在构建单页面应用方面效果显著.而 数据绑定 可以说是他被广泛使用的最主要的优点.他舍弃了对DOM的操作方式,一切都由AngularJS来自动更新视图,我 ...
- angularjs探秘<四> 双向数据绑定
双向数据绑定是angularjs的一大特性,这个特性在实际开发中省了不少事儿.之前第二篇提过数据绑定,这一篇从实际开发的案例中具体看下双向数据绑定的便捷. 首先看一个场景: 在 注册/登录 中经常遇到 ...
- AngularJS——第4章 数据绑定
第4章 数据绑定 AngularJS是以数据做为驱动的MVC框架,所有模型(Model)里的数据经由控制器(Controller)展示到视图(View)中. 所谓数据绑定指的就是将模型(Model)中 ...
随机推荐
- RecyclerView使用大全
RecylerView介绍 RecylerView是support-v7包中的新组件,是一个强大的滑动组件,与经典的ListView相比,同样拥有item回收复用的功能,这一点从它的名字recyler ...
- HTTPS 互联网世界的安全基础
近一年公司在努力推进全站的 HTTPS 化,作为负责应用系统的我们,在配合这个趋势的过程中,顺便也就想去搞清楚 HTTP 后面的这个 S 到底是个什么含义?有什么作用?带来了哪些影响?毕竟以前也就只是 ...
- 页面中多个script块之间的关系
一:函数声明与函数定义表达式在函数调用间的区别 <script type="text/javascript"> doA(); var doA = function(a ...
- 如何安全的将VMware vCenter Server使用的SQL Server Express数据库平滑升级到完整版
背景: 由于建设初期使用的vSphere vCenter for Windows版,其中安装自动化过程中会使用SQL Server Express的免费版数据库进行基础环境构建.而此时随着业务量的增加 ...
- JavaScript特性（attribute）、属性（property）和样式（style）
最近在研读一本巨著<JavaScript忍者秘籍>,里面有一篇文章提到了这3个概念. 书中的源码可以在此下载.我将源码放到了线上,如果不想下载,可以直接访问在线网址,修改页面名就能访问到相 ...
- PHP设计模式（二）工厂方法模式（Factory Method For PHP）
简单工厂简述: 简单工厂模式实现了生产产品类的代码跟客户端代码分离,在工厂类中你可以添加需要生成长跑的逻辑代码(new 产品类),但是问题来了,优秀的代码是符合"开闭原则"如果你要 ...
- 编译器开发系列--Ocelot语言2.变量引用的消解
"变量引用的消解"是指确定具体指向哪个变量.例如变量"i"可能是全局变量i,也可能是静态变量i,还可能是局部变量i.通过这个过程来消除这样的不确定性,确定所引用 ...
- angular中使用ngResource模块构建RESTful架构
ngResource模块是angular专门为RESTful架构而设计的一个模块,它提供了'$resource'模块,$resource模块是基于$http的一个封装.下面来看看它的详细用法 1.引入 ...
- js常用工具类.
一些js的工具类 复制代码 /** * Created by sevennight on 15-1-31. * js常用工具类 */ /** * 方法作用:[格式化时间] * 使用方法 * 示例: * ...
- Eclipse常用设置
用惯了VS,再回过去用Eclipse真是一件痛苦的事.so,在这里记录下使用过程中的一些设置以做备忘. 1.代码自动提示 在我们忘记方法名或者想偷懒时,代码自动提示很管用.不过Eclipse默认是输入 ...