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

最简单的双向数据绑定：（使用默认模块控制）

<body ng-app>

<input type="text" ng-model='ngName'>

<h1>{{ngName}}</h1>

</body>

完成对数据的初始化：

//初始化原理：ng-app 初始完之后，就会往在ng-init里面赋值一个初始值：world , 这个值会自动绑定到下面 ；

<body ng-app ng-init="ngName = '张三'">

<input type="text" ng-model='ngName'>

<h1>{{ngName}}</h1>

</body>

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

使用自定义模块控制：（完成对数据的初始化）

<body ng-app="myApp" ng-controller="myAppController">

<input type="text" ng-model='userName'>

<h1>{{userName}}</h1>

</body>

<script type="text/javascript">

var myApp = angular.module('myApp',[]);

myApp.controller('myAppController',['$scope',function($scope){

    $scope.userName = '李四';

}]);

</script>

还可以这样：

<body ng-app="myApp" ng-controller="myAppController">

<input type="text" ng-model='user.name'>

<input type="text" ng-model='user.age'>

<h1>{{user.name}}的年纪是{{user.age}}</h1>

</body>

<script type="text/javascript">

var myApp = angular.module('myApp',[]);

myApp.controller('myAppController',['$scope',function($scope){

    $scope.user = {};

    $scope.user.name = "张三";

    $scope.user.age = 20;

}]);

</script>

angularJs降低了大量的dom操作：

案例一：实现 点击增加

<body ng-app>

<input type='number' ng-model='value'>

<input type="button" ng-click='value = value+1' value="增加">

<script type='text/javascript' src='node_modules/angular/angular.js'></script>

<script type='text/javascript' ></script>

</body>

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

<body ng-app>

<input type="number" value="1" ng-model='parameter1'>

<span>+</span>

<input type="number" value="2" ng-model='parameter2'>

<input type="button" value="=" ng-click='result = parameter1 + parameter2'>

<input type="text" ng-model='result'>

<script type='text/javascript' src='node_modules/angular/angular.js'></script>

</body>

注意：

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

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

<script type="text/javascript">

//没有用$选中器，而是 angular.element('body'); //拿到 body

angular.element('body');

</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. powerdesigner与mysql数据库的连接

    (1).在桌面新建一个mysql.dpc文件,里面可以什么内容也没有. (2).打开powerdesigner,操作如下: (3).把mysql.dcp文件选中: (4).建立连接属性: (5).测试 ...

  2. 12款优秀 jQuery Ajax 分页插件和教程

    12款优秀 jQuery Ajax 分页插件和教程 在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 W ...

  3. ajax回调函数中使用$(this)取不到对象的解决方法

    如果在ajax的回调函数内使用$(this)的话,实践证明,是取不到任何对象的,需要的朋友可以参考下 $(".derek").each(function(){ $(this).cl ...

  4. 7 款超炫的 jQuery 插件

    jQuery大大简化了我们的前端代码,因为jQuery的简单和开源,也涌现出了层出不穷的jQuery插件,这些实用的jQuery插件也不断推动着jQuery开源社区的发展.下面精选了几款让人跃跃欲试的 ...

  5. C#基础概念二十五问

    1.静态成员和非静态成员的区别? 答: 静态变量使用 static 修饰符进行声明,在类被实例化时创建,通过类进行访问 不带有 static 修饰符声明的变量称做非静态变量,在对象被实例化时创建,通过 ...

  6. 详解MathType中如何插入特殊符号

    在论文写作中,经常会用到一些特殊符号,MathType公式编辑器支持插入特殊符号,并且数量繁多,可以满足用户的需求.本教程将详解MathType如何插入特殊符号. MathType中插入特殊符号的操作 ...

  7. UI设计要学哪些软件

    准备做UI设计的或是已经在做UI设计的童鞋,哪些软件是我们要学习的重点,作者把UI设计分成了好几个不同的职业方向,从事什么UI设计方向,就学什么软件,这样针对性就很强了,无论怎么说,Photoshop ...

  8. mysqldump进行数据库的全备时,备份数据库的顺序是什么,就是先备份哪个库,然后再备份哪个库

    需求描述: 今天在用mysqldump工具进行数据库的备份的时候,突然想了一个问题,比如我有10个库要进行备份 那么是先备份哪个,然后再备份哪个呢,所以,做了实验,验证下. 操作过程: 1.使用--a ...

  9. Cocos2d-x 3.0final 终结者系列教程10-画图节点Node中的Action

    Action是作用在Node上的逻辑处理,比方让Node移动.旋转.缩放.变色.跳跃.翻转.透明等等.都有相相应的Action Action怎样在Node上使用 1. 定义Action对象 如 aut ...

  10. JQuery------jQuery.parseHTML()的使用方法

    代码: $(document).ready(function () { var data = jQuery.parseHTML("<p>你好</p>"); ...