使用初体验:ng 双向数据绑定:

最简单的双向数据绑定:(使用默认模块控制)

  1. <body ng-app>
  2. <input type="text" ng-model='ngName'>
  3. <h1>{{ngName}}</h1>
  4. </body>

完成对数据的初始化:

  1. //初始化原理:ng-app 初始完之后,就会往在ng-init里面赋值一个初始值:world , 这个值会自动绑定到下面 ;
  2. <body ng-app ng-init="ngName = '张三'">
  3. <input type="text" ng-model='ngName'>
  4. <h1>{{ngName}}</h1>
  5. </body>

注意:angularJs默认的是双向数据绑定,单项数据绑定 {{::ngName}}

使用自定义模块控制:(完成对数据的初始化)

  1. <body ng-app="myApp" ng-controller="myAppController">
  2. <input type="text" ng-model='userName'>
  3. <h1>{{userName}}</h1>
  4. </body>
  5. <script type="text/javascript">
  6. var myApp = angular.module('myApp',[]);
  7. myApp.controller('myAppController',['$scope',function($scope){
  8. $scope.userName = '李四';
  9. }]);
  10. </script>

还可以这样:

  1. <body ng-app="myApp" ng-controller="myAppController">
  2. <input type="text" ng-model='user.name'>
  3. <input type="text" ng-model='user.age'>
  4. <h1>{{user.name}}的年纪是{{user.age}}</h1>
  5. </body>
  6. <script type="text/javascript">
  7. var myApp = angular.module('myApp',[]);
  8. myApp.controller('myAppController',['$scope',function($scope){
  9. $scope.user = {};
  10. $scope.user.name = "张三";
  11. $scope.user.age = 20;
  12. }]);
  13. </script>

angularJs降低了大量的dom操作:

案例一:实现 点击增加

  1. <body ng-app>
  2. <input type='number' ng-model='value'>
  3. <input type="button" ng-click='value = value+1' value="增加">
  4. <script type='text/javascript' src='node_modules/angular/angular.js'></script>
  5. <script type='text/javascript' ></script>
  6. </body>

案例二:实现简单的加法运算

  1. <body ng-app>
  2. <input type="number" value="1" ng-model='parameter1'>
  3. <span>+</span>
  4. <input type="number" value="2" ng-model='parameter2'>
  5. <input type="button" value="=" ng-click='result = parameter1 + parameter2'>
  6. <input type="text" ng-model='result'>
  7. <script type='text/javascript' src='node_modules/angular/angular.js'></script>
  8. </body>

注意:

angularJS虽然摈弃了DOM操作,但是angularJS还是提供了操作 DOM 的方法:

(使用 angular 提供的 jqlite 也就是angular里面帮我们提供的一个轻量级的 jQuery)

  1. <script type="text/javascript">
  2. //没有用$选中器,而是 angular.element('body'); //拿到 body
  3. angular.element('body');
  4. </script>

angularJS四大特点

1、MVC;

2、模块化;

3、自动化双向数据绑定;

4、指令系统;

angularJS安装

1、直接下载angularJS包:

- https://github.com/angular/angularjs.js/releases

2、使用CDN上的angularJS

- http://cdn.code.baidu.com/

3、使用Bower安装(推荐)

- bower install angular

4、推荐使用 NPM 安装(推荐)

- npm install angular --save

angularJS 使用总结

1、angularJS最大程度上降低了页面上的DOM操作;

2、让javascript中,专注业务逻辑的代码;

3、通过自定义指令实现组件化编程;

4、代码结构更加简单;

5、angularJs解放了传统 javascript 中频繁的DOM操作,同时也还原了javascript的本质;

angularJs初体验,实现双向数据绑定!使用体会:比较爽的更多相关文章

  1. angularJs的指令系统和双向数据绑定

    一.langularJs的指令系统 <!DOCTYPE HTML> <html ng-app><!--这种以ng开头的就是指令系统,初始化的一个指令,不仅可以加在html ...

  2. AngularJS初体验

    最近突然发现,Coding.net真是一个神奇的网站.这各网站90%的请求都是通过ajax完成的.可以发现,不管你点任何链接,网页都不会刷新,点击浏览器的返回或前进按钮也是这样,打开chrome的开发 ...

  3. MVC + AngularJS 初体验(实现表单操作)

    AngularJS AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page Applications). Ang ...

  4. AngularJS之双向数据绑定,class绑定

    之前一直都是用vue来完成一些日常开发,初入AngularJS,记录一些日常开发遇到的问题. 1.双向数据绑定 AngularJS与vue的区别在于,vue采用的是虚拟DOM,模板文件上绑定的一大堆指 ...

  5. 玩转angularJs——通过自定义ng-model,不仅仅只是input可以实现双向数据绑定

    体验更优排版请移步原文:http://blog.kwin.wang/programming/angularJs-user-defined-ngmodel.html angularJs双向绑定特性在开发 ...

  6. day21—AngularJS学习初体验

    转行学开发,代码100天——2018-04-06 今天按照学习计划安排,开始AngularJS的学习. 关于AngularJS,在菜鸟教程上这样介绍 好吧,Angular学习起来非常简单,哈哈,现在就 ...

  7. 《AngularJS权威教程》中关于指令双向数据绑定的理解

    在<AngularJS权威教程>中,自定义指令和DOM双向数据绑定有一个在线demo,网址:http://jsbin.com/IteNita/1/edit?html,js,output,具 ...

  8. AngularJS入门心得2——何为双向数据绑定

    前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...

  9. angularJs:双向数据绑定

    示例1 <!DOCTYPE html> <html ng-app> <head> <meta charset="UTF-8" /> ...

随机推荐

  1. 将BAT文件注册为服务的方法

    一.什么是instsrv.exe和srvany.exe instsrv.exe.exe和srvany.exe是Microsoft Windows Resource Kits工具集中 的两个实用工具,这 ...

  2. 没有启动 ASP.NET State service错误的解决方法

    具体错误如下: 异常详细信息: System.Web.HttpException: 无法向会话状态服务器发出会话状态请求.请确保已启动 ASP.NET State service,并且客户端和服务器端 ...

  3. Nginx之虚拟目录-root与alias的区别

    最近在nginx上部署日志分析工具awstats时,在配置awstats分析结果可供网页浏览这步时,分析结果页面访问总是404.后来查阅了一些资料,发现是root和alias的用法区别没搞懂导致的,这 ...

  4. 关于Cocos2d-x项目运行的过程和场景切换步骤

    1.AppDelegate.cpp文件里面的applicationDidFinishLaunching函数其实可以看做C语言里面的main函数,是整个游戏运行的入口 这个函数里面的语句 auto sc ...

  5. opencv3.2 dnn 图像分割

    下载 http://dl.caffe.berkeleyvision.org/fcn32s-heavy-pascal.caffemodel 在opencv_contrib-3.2.0/modules/d ...

  6. CentOS 6.5 下Vim 配置图解

    分享个CentOS 6.5 下Vim 配置图文详解,希望对大家有所帮助. 1. 登录并进入你常用的用户名下,查看其主目录 命令: # su xxx $ cd xxx $ ls -a 2.查看并建立目录 ...

  7. Bash 脚本 getopts为什么最后一个參数取不到

    看以下的Bash脚本: #!/bin/bash interval=0 count=0 pid="" while getopts "p:d:n" arg do c ...

  8. 数据结构 http://www.cnblogs.com/sun-haiyu/p/7704654.html

    数据结构与算法--从平衡二叉树(AVL)到红黑树 上节学习了二叉查找树.算法的性能取决于树的形状,而树的形状取决于插入键的顺序.在最好的情况下,n个结点的树是完全平衡的,如下图“最好情况”所示,此时树 ...

  9. Webpack vs Gulp(转载)

    理想的前端开发流程 在说构建工具之前得先说说咱期望的前端开发流程是怎样的? 写业务逻辑代码(例如 es6,scss,pug 等) 处理成浏览器认识的(js,css,html) 浏览器自动刷新看到效果 ...

  10. 【Mongo】数据备份与还原

    http://blog.51yip.com/nosql/1573.html mongorestore -d 数据库名 -c 集合名 --drop **.bson