10分钟学会AngularJS的数据绑定
前言：为什么要用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的数据绑定的更多相关文章
- 10分钟学会Linux
10分钟学会Linux有点夸张,可是能够让一个新手初步熟悉Linux中最重要最主要的知识,本文翻译的英文网页在众多Linux入门学习的资料中还是很不错的. 英文地址:http://freeengine ...
- 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 ...
- 10分钟学会VS NuGet包私有化部署
前言 我们之前实现了打包发布NuGet,但是发布后的引用是公有的,谁都可以访问,显然这种方式是不可取的. 命令版本:10分钟学会Visual Studio将自己创建的类库打包到NuGet进行引用(ne ...
- UWP开发入门（十九）——10分钟学会在VS2015中使用Git
写程序必然需要版本控制,哪怕是个人项目也是必须的.我们在开发UWP APP的时候,VS2015默认提供了对微软TFS和Git的支持.考虑到现在Git很火,作为微软系的程序员也不得不学一点防身,以免被开 ...
- 【译】10分钟学会Pandas
十分钟学会Pandas 这是关于Pandas的简短介绍主要面向新用户.你可以参考Cookbook了解更复杂的使用方法 习惯上,我们这样导入: In [1]: import pandas as pd I ...
- 10分钟学会Less开发环境搭建与初体验
Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充. 今天看一下,10分钟能不能手把手快速教会你Le ...
- 10分钟学会windows中iis搭建服务器集群实现负载均衡和nginx代理转发
前言 我们之前聊过 10分钟搭建服务器集群--Windows7系统中nginx与IIS服务器搭建集群实现负载均衡:https://www.cnblogs.com/xiongze520/p/103087 ...
- [Pulsar系列] 10分钟学会Pulsar消息系统概念
Apache Pulsar Pulsar是一个支持多租户的.高性能的服务与服务之间消息通讯的解决方案,最初由雅虎开发,现在由Apache软件基金会管理. Pulsar的主要特性如下: Pulsar实例 ...
- 10分钟学会前端调试利器——FireBug
概述 FireBug是一个用于网站前端开发的工具,它是FireFox浏览器的一个扩展插件.它可以用于调试JavaScript.查看DOM.分析CSS.监控网络流量以及进行Ajax交互等.它提供了几乎前 ...
随机推荐
- Jquery 操作页面中iframe自动跟随窗口大小变化，而页面不出现滚动条，只在iframe内部出滚动条
很多时候大家需要iframe自适应所加载的页面高度而不要iframe滚动条,但是这次我需要的是页面不需要滚动条而iframe要滚动条,且iframe自动跟随窗口大小变化.自适应页面大小.下面是代码,下 ...
- Spark RDD概念学习系列之RDD的转换（十）
RDD的转换 Spark会根据用户提交的计算逻辑中的RDD的转换和动作来生成RDD之间的依赖关系,同时这个计算链也就生成了逻辑上的DAG.接下来以“Word Count”为例,详细描述这个DAG生成的 ...
- Spark RDD概念学习系列之RDD的缓存（八）
RDD的缓存 RDD的缓存和RDD的checkpoint的区别 缓存是在计算结束后,直接将计算结果通过用户定义的存储级别(存储级别定义了缓存存储的介质,现在支持内存.本地文件系统和Tachyon) ...
- Linux下的grep搜索命令详解(一)
Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expression Print,表示全局正则表达 ...
- 编译安装－PHP
一.编译配置选项2 配置帮助表:2 安装目录:2 交叉编译选项:2 特征选项:3 SAPI模块设置:3 普通参数设置:4 扩展参数:4 PEAR相关选项:9 ZEND相关选项:9 TSRM线程安全资源 ...
- T4 模板入门
T4,即4个T开头的英文字母组合:Text Template Transformation Toolkit.T4(Text Template Transformation Toolkit)是微软官方在 ...
- Spring REST实践之Versioning，Paging和Sorting
Versioning 为适应需求的变化以及兼容已有的API,需要创建新版本的API,一般有四种流行的版本化API的方法: URI版本化 URI参数版本化 Accept header版本化 自定义hea ...
- Unable to generate a temporary class (result=1)解决方法
Unable to generate a temporary class (result=1).error CS2001: Source file 'C:\WINDOWS\TEMP\ug5v9uxt. ...
- FTP远程命令集
使用ftp命令进行远程文件传输 ftp命令是标准的文件传输协议的用户接口.ftp是在TCP/IP网络上的计算机之间传输文件的简单有效的方法.它允许用户传输ASCII文件和二进制文件. 在ftp会话过程 ...
- jQuery操作checkbox选择
1.checkbox list选择 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...