材料下载  https://github.com/liuch0228/AngularJS-learn.git

1.使用原生jquery实现 实现输入框内容 在页面上跟随输入值动态更新

项目路径

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>原生js实现输入框内容动态显示在页面</title>
</head>
<body>
<input type="text"/>
<p>输入的内容是:<span></span></p>
<script type="text/javascript" src="../../js/jquery/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function () {
//文档加载完毕,执行document.ready() 等于$(function(){}) window.onload():整个页面加载完毕
$('input').keyup(function () { //$('input') 是jquery属性选择器,选中input元素
// var value = this.value;//使用原生js,this.value
var value = $(this).val(); // $(this) 把js原生对象转换为了DOM元素,调用DOM的val()方法
$('span').html(value);
});
});
</script>
</body>
</html>

当鼠标抬起,获取输入框input元素的值,然后更新到span标签中去:

2.使用angular js完成同样的功能:

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="">
<input type="text" ng-model="value"/>
<p>输入的内容是{{value}}</p>
<script src="../../js/angular-1.2.29/angular.js"></script>
</body>
</html>

上面仅仅引入angularjs,在body中添加 ng-app=""  在 input标签中添加 ng-model="value",然后 在p标签里面 {{}}中写上value ,就实现相同的效果了

点击ng-inspector插件,如下图所示:

ng-app(指令) : 告诉angular核心它管理当前标签所包含的整个区域,并且会自动创建$rootScope根作用域对象。上面代码中 ng-app在 body中,表示它管理的是body的整个区域,并创建一个根作用域对象$rootScope

ng-model : 将当前输入框的 值与谁关联(属性名:属性值), 并作为当前作用域对象($rootScope)的属性。上面例子中, <input type="text" ng-model="value"/>  通过ng-model指令,把当前输入框的输入值与指定的属性:value 进行绑定,并作为当前作用域的一个属性,这个属性的值就是输入框的输入内容。{{ }}  是angular js的表达式,用来显示数据,显示的是作用域对象的指定属性名对应的值。

接下来做2个小测试:

把上面例子中,input标签的  ng-model="value" 去掉,再运行并输入内容,结果如下,只有一个根作用域对象,下面没有属性了,而没删之前是有的,说明内存中的 属性,是来自于ng-model中指定的属性名,这个属性的值就是输入框的输入内容。

input标签的  ng-model="value" 恢复,然后把 {{}}表达式中的value改成value1 再运行,输入框里面随便输入点内容,可以看到插件中显示一个 属性名为value ,属性值为“sss” 的属性,但是原来的表达式的位置不显示了;说明这个表达式显示的值,是向angular内存中 这个value属性要的,也就是说,页面输入的数据从 view层,流向了 angular内存(model),然后又通过angular表达式显示到了页面上,

这个表达式的变量名必须是内存中的属性名,也即ng-model指定的属性名。因此,ng-model是一个双向的数据绑定指令。

webstorm使用小技巧:

如图,把左边项目文件目录收起来了,这时如果想要查看当前打开的文件在哪里,按alt+1 展开左侧资源列表,

然后点击下图中国红色圈起来的图标,就自动定位到当前打开的文件所在的目录里面去了,此时,如果再按住ctrl + shift + 左/右方向键,会发现左侧资源列表的宽度会发生变化,这样的操作同样适用于idea

Angular JS - 2 - angularjs helloworld的更多相关文章

  1. Angular JS 基础应用--第一篇

      前  言          Android应用开发中,有一些功能虽然能够使用原生JS来实现,但是会比较的复杂,因此一些相应的框架应运而生了.框架相对于原生JS而言,从主观上来说,最大的改变就是代码 ...

  2. AngularJS进阶(四)ANGULAR.JS实现下拉菜单单选

    ANGULAR.JS: NG-SELECT AND NG-OPTIONS PS:其实看英文文档比看中文文档更容易理解,前提是你的英语基础还可以.英文文档对于知识点讲述简明扼要,通俗易懂,而有些中文文档 ...

  3. 【js类库AngularJs】解决angular+springmvc的post提交问题

    [js类库AngularJs]解决angular+springmvc的post提交问题 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前 ...

  4. Angular.js!(附:聊聊非原生框架项目)

    最近,为了项目接触了一个很火的前端框架Angular.js,下面就Angular做一个简介吧(大牛请绕步,只针对没有接触过angular的人). Angular.js是一款精简的前端框架,如果要追溯它 ...

  5. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  6. angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testServe

    angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testSer ...

  7. angular.js写法不规范导致错误

    以下写法:没有明确指定module和controller,写法不规范. 更改angular.js版本会出bug. <html ng-app> <head> <title& ...

  8. python , angular js 学习记录【1】

    1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...

  9. Angular JS 学习之路由

    1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/firs ...

随机推荐

  1. Matplotlib系列(四)--plt.bar与plt.barh条形图

    (一)竖条条形图 参数说明 参数 说明 类型 x x坐标 int,float height 条形的高度 int,float width 线条的宽度 0~1,默认是0.8 botton 条形的起始位置 ...

  2. Spring Boot 获取 java resources 下文件

    Spring Boot 获取 java resources 下文件 Spring Boot 获取 resources 目录下的目录(例:获取 resources 目录下的 template 目录): ...

  3. ADO.NET-EF:ADO.NET Entity Framework 百科

    ylbtech-ADO.NET-EF:ADO.NET Entity Framework 百科 ADO.NET Entity Framework 是微软以 ADO.NET 为基础所发展出来的对象关系对应 ...

  4. gitlab+jenkins自动化打包IOS-jenkins配置

    实现的效果如图:  构建界面: 完成效果: 功能说明: 根据选择的代码分支,执行构建打包 构建成功后根据ipa/apk生成二维码,并可在历史构建列表中展示各个版本的二维码,通过手机扫描二维码可直接安装 ...

  5. Eclipse报内存溢出

    (1)在配置tomcat的JDK里面设置.Window-->proference->Myeclipse-->servers-->Tomcat5-->JDK里面设置: -X ...

  6. Jmeter发送SOAP请求对WebService接口测试

    Jmeter发送SOAP请求对WebService接口测试 1.测试计划中添加一个用户自定义变量 2.HTTP信息头管理器,添加Content-Tpe,  application/soap+xml;c ...

  7. hdu2602Bone Collector ——动态规划(0/1背包问题)

    Problem Description Many years ago , in Teddy’s hometown there was a man who was called “Bone Collec ...

  8. 如何免费注册codepen

    点击注册以后,发现是要美刀的.靠,没钱.可是要用怎么办...... 如果不注意可以没有看到free.....看着free是个文本.其实是个链接啊啊啊啊啊 重点来了: 进入到注册页面,显示recaptc ...

  9. _groovy

    _groovy与beanshell类似,只是它执行的是apache groovy脚本,并返回结果. 如果定义了属性 “groovy.utilities”,属性将会被脚本引擎加载,这样就可以定义一些通用 ...

  10. 《JAVA设计模式》之迭代器模式(Iterator)

    在阎宏博士的<JAVA与模式>一书中开头是这样描述迭代子(Iterator)模式的: 迭代子模式又叫游标(Cursor)模式,是对象的行为模式.迭代子模式可以顺序地访问一个聚集中的元素而不 ...