初识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)中 ...
随机推荐
- wepack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- 学习AOP之认识一下Spring AOP
心碎之事 要说知道AOP这个词倒是很久很久以前了,但是直到今天我也不敢说非常的理解它,其中的各种概念即抽象又太拗口. 在几次面试中都被问及AOP,但是真的没有答上来,或者都在面上,这给面试官的感觉就是 ...
- 8.仿阿里云虚拟云服务器的FTP（包括FTP文件夹大小限制）
平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html#iis 原文:http://dnt.dkill.net/Ar ...
- PHP以接口方式实现多重继承(完全模拟)--学习笔记
1.UML类图: 2.PHP代码: <?php /** * Created by PhpStorm. * User: andy * Date: 16-11-23 * Time: 下午7:57 ...
- 深入理解CSS六种颜色模式
前面的话 赏心悦目的颜色搭配让人感到舒服,修改元素颜色的功能让人趋之若鹜.但颜色规划不当,会让网站用户无所适从.颜色从<font color="">发展至今,保留了很多 ...
- 茂名石化BPM应用实践 ——业务协同及服务共享平台建设和应用
一.茂名石化简介 茂名石化隶属于中国石油化工集团公司,创建于1955年,是国家"一五"期间156项重点项目之一.经过50多年的发展,茂名石化已成为我国生产规模最大的炼油化工企业之一 ...
- 如何区别char与varchar?
1.varchar与char两个数据类型用于存储字符串长度小于255的字符,MySQL5.0之前是varchar支持最大255.比如向一个长度为40个字符的字段中输入一个为10个字符的数据.使用var ...
- Jenkins的一个bug-同时build一个项目两次导致失败
我们有一个job A, A只是配置了一些参数,它会去触发模板job B. 我一开始点击构建A, 马上发现参数配置不对,于是撤消了构建,但是我没有发现B已经被触发,我重新配置参数,然后再次构建A,这个时 ...
- 乐乎环球WiFi
乐乎环球WiFi招商加盟 随身WiFi设备 乐乎环球Wifi是由北京蔚蓝创智科技有限公司研发的产品,是一款可以在全球100多个国家和地区实现免漫游4G高速上网的随身WiFi设备.和普通MiFi设备相比 ...
- 第12章 Linux系统管理
1. 进程管理 1.1 进程查看 (1)进程简介 进程是正在执行的一个程序或命令(如ls命令也是一个进程),每个进程都是一个运行的实体,都有自己的地址空间,并占用一定的系统资源. (2)进程管理的作用 ...