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

转载于:https://www.cnblogs.com/yingzi1028/p/6164757.html

初识AngularJS 之 HelloWorld和数据绑定相关推荐

我的angularjs源码学习之旅1——初识angularjs
angular诞生有好几年光景了,有Google公司的支持版本更新还是比较快,从一开始就是一个热门技术,但是本人近期才开始接触到.只能感慨自己学习起点有点晚了.只能是加倍努力赶上技术前线. 因为有分析 ...
【AngularJs】Angular双向数据绑定
1.什么是双向数据绑定双向数据绑定: Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面.即数据模型(Module)和视图(View)之 ...
AngularJS中的双向数据绑定
双向数据绑定双向数据绑定是指两个方向:从数据模型到视图,从视图到数据模型.AngularJS是一个MVC框架,控制器去修改数据模型,数据模型的变更会反应到视图上.视图上发生了数据的变化,是否能够自动 ...
01 【Vue简介初识Vue 模板语法和数据绑定】
1.Vue简介 1.1官网英文官网中文官网 1.2介绍与描述 Vue 是一套用来动态构建用户界面的渐进式JavaScript框架 ○构建用户界面:把数据通过某种办法变成用户界面 ○渐进式:Vue可 ...
【AngularJS】—— 2 初识AngularJs（续）
前一篇了解了AngularJS的一些简单的使用,这里继续跟着w3c学习一下剩下的内容. 本篇根据w3cschool.cc继续学习AngularJS剩余的内容,包括: 1 事件 2 模块 3 表单 4 ...
【西祠日志】【17】初识AngularJS,下一代Web应用的前端
2015.08.06 周四今天学习状态不错,就是应该这样一点点的努力:今天主要还是把asp留言板任务完善了下,然后我陷入了一种困扰,就是前端的网页耦合性太高,复用也非常不利于SEO优化,考虑如何有更 ...
跟世界打个招呼c语言编程,（一）helloworld
Idea下用SBT搭建Spark Helloworld 没用过IDEA工具,听说跟Eclipse差不多,sbt在Idea其实就等于maven在Eclipse.Spark运行在JVM中,所以要在Idea ...
最新《北风网web全栈教程前端开发全套教程》
教程目录: 1-1初级教程入门必备 - 新手学HTML+CSS 1-2初级教程入门必备 - PS技法与切片技术 1.熟悉Photoshop基本知识 2.Photoshop工具的使用 3.Photo ...
AngularJS 作用域与数据绑定机制
AngularJS 简介 AngularJS 是由 Google 发起的一款开源的前端 MVC 脚本框架,既适合做普通 WEB 应用也可以做 SPA(单页面应用,所有的用户操作都在一个页面中完成).与 ...

初识AngularJS 之 HelloWorld和数据绑定

1.Hello World

2.数据双向绑定

初识AngularJS 之 HelloWorld和数据绑定相关推荐

最新文章

热门文章