前言：为什么要用AngularJS？  相信用过.NetMVC的人都知道用rezor绑定数据是一件很爽的事情，C#代码直接在前台页面中输出。然后这种比较适用于同步请求。   当我们的项目离不开异步请求绑定数据的时候，AngularJS的强大就能感受出来了！  下面大家就花十分钟的时间了解一下AngularJS的数据绑定吧！Let‘s go

 一、 AngularJS脚本引用

     

     就跟我们平常引用一个jquery一样

 二、 ng-App配置

         

          什么是ng-App，官方文档的解释是这样的The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application. 就是说加了这句以后代表AngularJs应用程序加载了这个页面

 三、 ng-controller配置！

        

       ng-controller就是用来做页面渲染的一个控制器

        

 四、 ng-repeat【数据绑定利器！】

         

      

<!DOCTYPE html>

<html>

<head>

    <script src='javascripts/jquery-1.11.3.min.js' type="text/javascript"></script>

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

</head>

<script>

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

    mainApp.controller('studentController',function($scope){

        $scope.student=null;

        //这边定义一个json的对象

        $scope.student=[{'name':'王小明',"age":"22"},{'name':'李小刚',"age":"30"}];

    });

</script>

<body ng-app="mainApp">

<h1><%= title %></h1>

<div ng-controller="studentController">

    <!--遍历对象-->

    <div  ng-repeat="item in student">

        <h1 ng-bind="item.name"></h1>

        <p ng-bind="item.age"></p>

    </div>

</div>

</body>

</html>

 五、 结果

 六 总结 

   到现在为止你已经掌握angularjs基本的数据绑定，介于一些人尚未用过angularjs，所以这一篇文章就让大家简单的了解一下angularjs的方便之处。

   下一篇文章我将会介绍在项目开发中百分百会用到的东西，如果觉得对你有用请点个推荐吧。

10分钟学会AngularJS的数据绑定的更多相关文章

  1. 10分钟学会Linux

    10分钟学会Linux有点夸张,可是能够让一个新手初步熟悉Linux中最重要最主要的知识,本文翻译的英文网页在众多Linux入门学习的资料中还是很不错的. 英文地址:http://freeengine ...

  2. 10分钟学会搭建Android开发环境 Eclipse: The import android.support cannot be resolved

    10分钟学会搭建Android开发环境_隋雨辰 http://v.youku.com/v_show/id_XNTE2OTI5Njg0.html?from=s1.8-1-1.2 The import a ...

  3. 10分钟学会VS NuGet包私有化部署

    前言 我们之前实现了打包发布NuGet,但是发布后的引用是公有的,谁都可以访问,显然这种方式是不可取的. 命令版本:10分钟学会Visual Studio将自己创建的类库打包到NuGet进行引用(ne ...

  4. UWP开发入门（十九）——10分钟学会在VS2015中使用Git

    写程序必然需要版本控制,哪怕是个人项目也是必须的.我们在开发UWP APP的时候,VS2015默认提供了对微软TFS和Git的支持.考虑到现在Git很火,作为微软系的程序员也不得不学一点防身,以免被开 ...

  5. 【译】10分钟学会Pandas

    十分钟学会Pandas 这是关于Pandas的简短介绍主要面向新用户.你可以参考Cookbook了解更复杂的使用方法 习惯上,我们这样导入: In [1]: import pandas as pd I ...

  6. 10分钟学会Less开发环境搭建与初体验

    Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充. 今天看一下,10分钟能不能手把手快速教会你Le ...

  7. 10分钟学会windows中iis搭建服务器集群实现负载均衡和nginx代理转发

    前言 我们之前聊过 10分钟搭建服务器集群--Windows7系统中nginx与IIS服务器搭建集群实现负载均衡:https://www.cnblogs.com/xiongze520/p/103087 ...

  8. [Pulsar系列] 10分钟学会Pulsar消息系统概念

    Apache Pulsar Pulsar是一个支持多租户的.高性能的服务与服务之间消息通讯的解决方案,最初由雅虎开发,现在由Apache软件基金会管理. Pulsar的主要特性如下: Pulsar实例 ...

  9. 10分钟学会前端调试利器——FireBug

    概述 FireBug是一个用于网站前端开发的工具,它是FireFox浏览器的一个扩展插件.它可以用于调试JavaScript.查看DOM.分析CSS.监控网络流量以及进行Ajax交互等.它提供了几乎前 ...

随机推荐

  1. python抓取网页例子

    python抓取网页例子 最近在学习python,刚刚完成了一个网页抓取的例子,通过python抓取全世界所有的学校以及学院的数据,并存为xml文件.数据源是人人网. 因为刚学习python,写的代码 ...

  2. CSS画出的各种形状图

    利用CSS可以画出各种需要的图形目录[1]矩形[2]圆形[3]椭圆[4]直角三角形[5]正三角形[6]平行四边形[7]梯形[8]六角星[9]六边形[10]五角星简单图形 矩形div{ width: 1 ...

  3. HDU2897邂逅明下（博弈）

    题目是说每次每个人可以取[p,q],而且是最后一个不得不取完的人输 这道题刚刚看别人过,还一直纠结感觉不会做,然后想到1+q的倍数,还是不会,想到p+q的倍数,却发现最后一个取的人是输的,然后就更加无 ...

  4. Xen入门系列一【使用Xen4CentOS 在 Centos 6 上安装 Xen】

    最近在学习Hadoop,在Win7下用VMware搭了三台虚拟机好不容易装好了Hadoop结果跑个两个单词的wordcount就跑了十分钟,郁闷啊,于是开始寻找效能更好的虚拟化解决方案,然后选定了Xe ...

  5. spring事物配置注意事项

    <tx:advice id="txAdvice" transaction-manager="transactionManager">  <tx ...

  6. 启动tomcat时 一闪而过解决方法

    1 首先确定JAVA 已经配好了环境变量,具体配置方法,找一下度娘. 测试方法:进入cmd -> javac -version 能看到JAVA的版本信息,证明配置成功了. 2 分析一下问题出现的 ...

  7. C#中的Collection 3

    IList<T> 和 ICollection<T> 最重要的一些类型 List<T>: Encapsulates[T], like array, but also ...

  8. jquery 选择器中含有空格注意

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 用jQuery解决弹出层的问题

    在BS 项目中 经常需要用到这种弹出层.做这种弹出层一般都会遇到下面几个问题:0,弹出层必须定义在input的下边显示.1,点击input弹出div层.2,点击div层外面任何地方,关闭div层.3, ...

  10. 使用jquery获取父元素或父节点的方法

    今天面试题问到了,没答上,jq要继续学习啊 jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: 先举个 ...