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. 转：给C++初学者的50个忠告

                                                           转:给C++初学者的50个忠告 1.把C++当成一门新的语言学习(和C没啥关系!真的.): ...

  2. Java实现人民币大写代码解析

    想要实现人民币大写,在发票等场景中使用?? 1234.56显示为:壹仟贰佰叁拾肆元伍角陆分,那就往下看看吧! 本程序可以实现 0 到 9999 9999 9999.994 以内的人民币大写转换,精确到 ...

  3. Seek the Name, Seek the Fame - POJ 2752（next运用）

    题目大意:小猫是非常有名气的,所以很多父母都来找它给孩子取名字,因为找的人比较多,小猫为了摆脱这个无聊的工作,于是它发明了一种取名字的办法,它把孩子父母的名字合在一起,然后从这个名字里面找一个前缀,并 ...

  4. 全情投入是做好工作的基础——Leo鉴书39

    很多人都有:“内向的人则不擅长社交,只能会活得很封闭”的思想,于是不少内向的朋友要么认为只有扭曲自己的性格变得外向才能在社会上吃得开,才能很爽的行走职场:要么就决定完全封闭自己活在孤独之中,其实以上两 ...

  5. 从Delphi 7升级到Delphi XE

    Delphi 7和XE中间有好几个版本号,可都不太流行,一是由于Delphi有些边缘化,二是7在XP环境下是近乎完美的版本号.市场上关于delphi的书越来越少,提供从7升级到XE介绍的资料差点儿没用 ...

  6. nginx的upstream目前支持5种方式的分配

    Nginx   nginx的upstream目前支持5种方式的分配 FROM: 转载 1 轮询(默认) 每个请求按时间顺序逐一分配到不同的后端服务器, 如果后端服务器down掉, 能自动剔除. 2 w ...

  7. [PWA] 11. Serve skeleton cache for root

    Intead of cache the root floder, we want to cache skeleton instead. self.addEventListener('install', ...

  8. css3之 media query 使用(转)

    原文链接:http://www.moke8.com/article-5657-1.html 讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决 ...

  9. Java基础知识强化之IO流笔记12：递归之递归解决问题的思想（图解）

    1. 使用递归计算5!的结果,递归思想的本质如下: 2. 下面就要使用代码实现这个递归: 递归实现分析: (1)做递归要写一个方法 (2)出口条件 (3)规律 代码实现如下: package com. ...

  10. SGU 199 - Beautiful People 最长上升子序列LIS

    要邀请n个人参加party,每个人有力量值strength Si和魅力值 beauty Bi,如果存在两人S i ≤ S j and B i ≥ B j 或者  S i ≥ S j and B i ≤ ...