1.引入脚本文件

<link rel="stylesheet" href="http://lib.sinaapp.com/js/bootstrap/v3.0.0/css/bootstrap.min.css">

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />

<script src="http://lib.sinaapp.com/js/jquery/2.0.1/jquery-2.0.1.min.js"></script>

<script src="http://lib.sinaapp.com/js/bootstrap/v3.0.0/js/bootstrap.min.js"></script>

<script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>

<script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular-route.min.js"></script>

2.显示值

<body>

<div  ng-app="app" ng-controller="controller">

<h1>{{ inputValue }}</h1>

</div>

</body>

<script type="text/javascript">

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

app.controller('controller',function($scope){

    $scope.inputValue="william's home";

});

</script>

3.双向绑定

<div  ng-app="app" ng-controller="controller">

<input type="text" ng-model="inputValue">

<h1>{{ inputValue }}</h1>

</div>

修改input中的值，h1标题中的内容也会修改

4添加事件

<body>

<div  ng-app="app" ng-controller="controller">

<button ng-click="myclick()">Click Me</button>

</div>

</body>

<script type="text/javascript">

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

app.controller('controller',function($scope){

    $scope.myclick=function(){

        alert("click")

    }

});

</script>

可以看出对$scope扩展属性和方法，就可以在html通过ng-model,ng-click使用

5 显示表格

<body>

<div  ng-app="app" ng-controller="controller">

    <table class="">

        <tr ng-repeat="x in names">

            <td>{{ x.firstName }}</td>

            <td>{{ x.lastName }}</td>

        </tr>

    </table>

</div>

</body>

<script type="text/javascript">

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

app.controller('controller',function($scope){

   $scope.names=[

{ "firstName":"John" , "lastName":"Doe" },

{ "firstName":"Anna" , "lastName":"Smith" },

{ "firstName":"Peter" , "lastName":"Jones" }

]

});

</script>

6通过get获取数据

<body>

<div  ng-app="app" ng-controller="controller">

    <table class="">

        <tr ng-repeat="x in names">

            <td>{{ x.firstName }}</td>

            <td>{{ x.lastName }}</td>

        </tr>

    </table>

</div>

</body>

<script type="text/javascript">

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

app.controller('controller',function($scope,$http){

$http.get("data.json")

  .success(function (response) {$scope.names = response;});

});

</script>

data.json

[

{ "firstName":"John" , "lastName":"Doe" },

{ "firstName":"Anna" , "lastName":"Smith" },

{ "firstName":"Peter" , "lastName":"Jones" }

]

get后的url可以替换为任意地址，比如服务端的rest api地址，只要返回类型是json即可

angularJS快速入门的更多相关文章

  1. AngularJS快速入门指南20：快速参考

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  2. AngularJS快速入门指南19：示例代码

    本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...

  3. AngularJS快速入门指南18：Application

    是时候创建一个真正的AngularJS单页面应用程序了(SPA). 一个AngularJS应用程序示例 你已经了解了足够多的内容来创建第一个AngularJS应用程序: My Note Save Cl ...

  4. AngularJS快速入门指南17：Includes

    使用AngularJS,你可以在HTML中包含其它的HTML文件. 在HTML中包含其它HTML文件? 当前的HTML文档还不支持该功能.不过W3C建议在后续的HTML版本中增加HTML import ...

  5. AngularJS快速入门指南16：Bootstrap

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  6. AngularJS快速入门指南15：API

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  7. AngularJS快速入门指南14：数据验证

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  8. AngularJS快速入门指南13：表单

    一个AngularJS表单是一组输入型控件的集合. HTML控件 HTML输入型标签标包括: input标签 select标签 button标签 textarea标签 HTML表单 HTML表单将各种 ...

  9. AngularJS快速入门指南12：模块

    AngularJS模块定义了一个application. 模块是一个application中不同部分的容器. application中的所有控制器都应该属于一个模块. 带有一个控制器的模块 下面这个a ...

  10. AngularJS快速入门指南11：事件

    AngularJS拥有自己的HTML事件指令. ng-click指令 ng-click指令定义了AngularJS的click事件. <div ng-app="" ng-co ...

随机推荐

  1. linq里的select和selectmany操作 投影运算

    原文地址:https://msdn.microsoft.com/zh-cn/library/bb546168.aspx#Mtps_DropDownFilterText 投影运算   其他版本   投影 ...

  2. [转]机器学习&数据挖掘笔记_16（常见面试之机器学习算法思想简单梳理）

    机器学习&数据挖掘笔记_16(常见面试之机器学习算法思想简单梳理) 转自http://www.cnblogs.com/tornadomeet/p/3395593.html 前言: 找工作时(I ...

  3. XPath与Xquery

    XPath 和 XQuery 在某些方面很相似.XPath 还是 XQuery 完整不可分割的一部分.这两种语言都能够从 XML 文档或者 XML 文档存储库中选择数据.本文简要介绍了 XPath 和 ...

  4. Linux网络编程echo多线程服务器

    echo_server服务器多线程版本 #include <unistd.h> #include <stdlib.h> #include <stdio.h> #in ...

  5. PHP学习之［第09讲］PHP 的 Mysql 数据库函数 (微型博客系统)

    一.数据库函数: mysql_connect(数据库地址,用户名,密码) mysql_select_db(数据库名) mysql_set_chartset(‘编码’) //PHP5.2.3以后的函数 ...

  6. C primer plus 读书笔记第十四章

    这一章主要介绍C语言的结构和其他数据形式,是学习算法和数据结构的重点. 1.示例代码 /*book.c -- 仅包含一本书的图书目录*/ #include <stdio.h> #defin ...

  7. 让你的WizFi250适应各种气候

    这篇文章会具体描写叙述如何马上得到指定城市的天气状况(比方首尔).由OpenWeatherMap提供. 用JSON(由OpenWeatherMap提供),XML和一个以太网模块.使WIZnet-Wiz ...

  8. Android群英传》读书笔记 (1) 第一章 Android体系与系统架构 + 第二章 Android开发工具新接触

    第一章 Android体系与系统架构 1.Dalvik 和 ARTDalvik好比是一辆可折叠的自行车,平时是折叠的,只有骑的时候,才需要组装起来用.ART好比是一辆组装好了的自行车,装好就可以骑了. ...

  9. Linux磁盘管理：LVM逻辑卷基本概念及LVM的工作原理

    一.传统的磁盘管理 其实在Linux操作系统中,我们的磁盘管理机制和windows上的差不多,绝大多数都是使用MBR(Master Boot Recorder)都是通过先对一个硬盘进行分区,然后再将该 ...

  10. Activity 【生命周期】

    不同情况下的回调 我们打开应用时先后调用了onCreate()->onStart()->onResume 当我们按BACK键时,我们这个应用程序将结束,这时候我们将先后调用onPause( ...