前言:为什么要用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. Spark RDD概念学习系列之RDD的缺点(二)

        RDD的缺点? RDD是Spark最基本也是最根本的数据抽象,它具备像MapReduce等数据流模型的容错性,并且允许开发人员在大型集群上执行基于内存的计算. 为了有效地实现容错,(详细见ht ...

  2. 关于MAC下的QQ聊天中看不到对方所发的图片解决

    使用QQ聊天我们会经常碰到一件让人烦心的事情,那就是别人发的截图自己看不大,是一张裂图(腾讯默认的那张图片).通常有几种情况可以造成这种结果: 第一种原因,网络延迟原因,你的网络不好或者对方的网络不好 ...

  3. MEF(Managed Extensibility Framework)依赖注入学习

    MSDN官方资料,并且微软还提供了SimpleCalculator sample学习样例 http://msdn.microsoft.com/en-us/library/dd460648(v=vs.1 ...

  4. C#dll中无法找到c++dll中函数的入口

    刚试验了一下,老是c#中的dll无法找到c++dll中的函数的入口: 暂时发现有俩个原因 1,没有用extern “C” _declspec(dllexport),导致c#无法找到入口. 2,在c++ ...

  5. hdoj 5327 Olmpiad

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5327 #include<stdio.h> #include<cstring> ...

  6. 关于JDBC 连接Access 数据库

    ************连接方式(一)Access_JDBC30.jar,此包由于是免费的,所有限制连接单次不超过50************************* Connection conn ...

  7. C:数组

    数组.排序 关于排序 :参考 关于数组: 参考 求a[i][j]行与列的和然后求平均值 参考 二维数组使用指针的表示方法  参考 字符串数组:char  name [5][20] ={ {} , {} ...

  8. 6.开放-关闭原则(Open-Close Principle)

    1.定义 一个软件实体(如类.模块.函数)应当对扩展开放,对修改关闭. 2.定义解读 在项目开发的时候,都不能指望需求是确定不变化的,大部分情况下,需求是变化的.那么如何应对需求变化的情况?这就是开放 ...

  9. PropertiesUtil 读取配置文件工具类

    package org.konghao.basic.util; import java.io.FileInputStream; import java.io.FileNotFoundException ...

  10. 史上最全APP推广渠道

    群主做App推广的过程中,有过失败也尝过成功的甜头,渐渐地在APP推广尤其是渠道推广中积累了一些实战经验想同大家分享.如果各位有更好的推广建议,欢迎沟通分享哦!   一.应用商店推广   1.应用市场 ...