材料下载  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. MongoDB数据迁移

    将集合user从192.168.1.12:27017导入到192.168.1.120:27017 数据的导出:mongoexport 数据的导入:mongoimport 导出集合user的过程: [r ...

  2. 【GDAL】聊聊GDAL的数据模型(二)——Band对象

    在GDAL中栅格数据直接参与各种计算的重要对象是Band 摘录官方描述: Raster Band A raster band is represented in GDAL with the GDALR ...

  3. eclipse下实现热部署，tomcat不重新reload context

    1. 打开server的编辑器 2. 在modules页签内,修改auto load属性为disabled

  4. HDU 2063 过山车 (匈牙利算法)

    题目链接:HDU 2063 Problem Description RPG girls今天和大家一起去游乐场玩,终于可以坐上梦寐以求的过山车了.可是,过山车的每一排只有两个座位,而且还有条不成文的规矩 ...

  5. 获取EasyUI日期输入框的值

    var date = $('#PurDate').datebox('getValue');

  6. Docker 换源

    近几天又折腾起 docker来了    我发现自己在拉镜像的时候,总是超时    然后百度了一下  说要换源 90sec的一个水友 推荐了我 阿里云的加速源    我看了还是免费就想试一下 讲一下过程 ...

  7. c# Autofac依赖注入

    public class Container { /// <summary> /// IOC容器 /// </summary> public static IContainer ...

  8. Zookeeper——启动闪退

      Zookeeper好久不启动了,昨天项目要用Zookeeper了,我昨天突然启动它,调皮的zk居然害羞不让我看见它,启动不了,一启动就闪退,为啥呢?其实是因为报错了,有错zk启动时就会报错,所以昨 ...

  9. JVM（11）之 G1收集器

    开发十年,就只剩下这套架构体系了! >>>   在前两篇博文中讲解了新生代和年老代的收集器,在本篇博文中介绍一个收集范围涵盖整个堆的收集器--G1收集器.  先讲讲G1收集器的特点, ...

  10. mpvue 无法获取$store的问题

    在开发的时候,我们喜欢将一些公共的方法,属性,放在一个特定的位置,例如在mpvue开发小程序的时候, 我们将其放在 vue提供的store里面,或者在mainjs中通过Vue.prototype.xx ...