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. 最近 弄了一个 discuz 7.2，管理员发帖 会出现 很多错误，解决 办法 在别的帖子中找到了

    公司弄了一个网站,是php 的 还要有 论坛,然后配置论坛配置 了 好几天,然后好不容易配置上了,发现以管理员 发帖 的时候, 页面就会出现 各种错误,各种 警告 解决办法 是,在bbs  文件夹 里 ...

  2. arcgis数据文件使用

    dem数据打开,保存,使用 打开

  3. MyEclipse里项目部署到tomcat上之后，tomcat webpps文件夹里为什么找不到这个项目

         今天在MyEclipse中部署了一个java web项目,然后发现报404错误,跑到tomcat目录下的webapps文件夹里并发现没有这个项目,才发现MyEclipse没有写入webapp ...

  4. 无题II hdu 2236（二分枚举区间）

    分析:只需要用二分找一个区间,然后不断枚举这个区间是否可以达到最大匹配,一直二分到答案为止.   代码: =============================================== ...

  5. JQuery实现悬浮工具条

    实现效果如下 html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  6. SQL 约束解说

    SQL 约束解说 2009-04-27 09:29 约束主要包含: NOT NULL UNIQUE PRIMARY KEY FOREIGN KEY CHECK DEFAULT 1.not null : ...

  7. Ruby On Rails 4 hello world,Ruby On Rails上手

    有机会再试一试Rails了,仅仅是原来接触的是2,如今已然变成了4,似乎如今的安装比原来会快些.. Rails 4 安装 针对于安装了RVM gem install rails 没有的话应该主 sud ...

  8. jquery.scrollTo-min.js

    jquery.scrollTo-min.js 用户返回顶部及动画到目的地,支持目标值.锚点. 用法: 1.引入jQuery 2.$.scrollTo( this.hash || targetValue ...

  9. 在浏览器地址栏按回车、F5、Ctrl+F5刷新网页的区别--转

    其中,在地址栏按回车又分为两种情况.一是请求的URI在浏览器缓存中未过期,此时,使用Firefox的firebug插件在浏览器里显示的HTTP请求消息头如下: Host    192.168.3.17 ...

  10. 从 ReactiveCocoa 中能学到什么？不用此库也能学以致用

    从知道ReactiveCocoa开始就发现对这个库有不同的声音,上次参加<T>技术沙龙时唐巧对在项目中已全面使用FRP的代码家提出为什么这种编程模型出现了这么长时间怎么像ReactiveC ...