事件绑定：

<html>

    <head>

        <title>angularJS入门小demo-5 事件指令</title>

        <script src="angular.min.js"></script>

        <script>

            //建立模块

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

            //然后通过模块来创建控制器

            app.controller("myController",function($scope){

                $scope.add=function(){

                    //定义变量（以便在视图中显示）

                    $scope.z = parseInt($scope.x)+parseInt($scope.y);

                }

            });

        </script>

    </head>

    <!-- 现在要求在点击按钮的时候触发add方法 -->

    <body ng-app="myApp" ng-controller="myController">

        第一个数：<input ng-model="x"> 第二个数：<input ng-model="y">

        <!-- 定义一个按钮，绑定点击事件，调用控制器中的add方法 -->

        <!-- 用的就是单击事件指令 ng-click -->

        <button ng-click="add()">运算</button>

        <!-- 取出变量z的值显示 -->

        运算结果：{{z}}

    </body>

</html>

==========

下面是循环数组，就是说我们有一个数组，要把值循环显示在页面上：

<html>

    <head>

        <title>angularJS入门小demo-6 循环数组</title>

        <script src="angular.min.js"></script>

        <script>

            //建立模块

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

            //然后通过模块来创建控制器

            app.controller("myController",function($scope){

                //定义一个数组

                $scope.list = [102,203,394,555];

            });

        </script>

    </head>

    <!-- 现在要求在table中循环加载显示list中的值-->

    <body ng-app="myApp" ng-controller="myController">

        <table>

        <!-- 用 ng-repeat 指令循环 -->

        <!--其中list就是控制器中定义的list，x是在这自定义的变量代码元素 -->

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

                <td>{{x}}</td>

            </tr>

        </table>

    </body>

</html>

效果：

===

循环对象数组：

<html>

    <head>

        <title>angularJS入门小demo-7 循环对象数组</title>

        <script src="angular.min.js"></script>

        <script>

            //建立模块

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

            //然后通过模块来创建控制器

            app.controller("myController",function($scope){

                //定义一个数组，里面存放对象

                $scope.list = [

                    {name:'张三',shuxue:100,yuwen:100},

                    {name:'李四',shuxue:90,yuwen:92},

                    {name:'王五',shuxue:40,yuwen:50}

                ];

            });

        </script>

    </head>

    <!-- 现在要求在table中循环加载显示list中的值-->

    <body ng-app="myApp" ng-controller="myController">

        <table>

            <tr>

                <td>姓名</td>

                <td>数学</td>

                <td>语文</td>

            </tr>

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

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

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

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

            </tr>

        </table>

    </body>

</html>

结果：

====

内置服务：

angular允许你添加服务，但是它也有一些内置服务，

内置服务就是提供一些功能，下面说的就是一个从后台抓数据的功能，它发送一个http请求，

上面的例子 demo7 的数据是前台写死的，下面我们要从后台请求过来。。

因为要用后台数据，所以需要一个web项目，随便找一个web项目：

将下面三个文件放在webapp下

data.json代码：

[

    {"name":"张三","shuxue":100,"yuwen":100},

    {"name":"李四","shuxue":90,"yuwen":92},

    {"name":"王五","shuxue":40,"yuwen":50},

    {"name":"赵六","shuxue":0,"yuwen":0}

]
//需要注意的是：这种json文件的形式中的json数据要写成严格json格式， 
//就是key也必须用双引号引起来，而且值如果是字符串也必须用双引号引起来

demo-8.html代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>angularJS入门小demo-8 内置服务  $http</title>

<script src="angular.min.js"></script>

<script>

    //建立模块

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

    //然后通过模块来创建控制器

    //要用到$http服务，在创建控制器时就要在参数上注入（依赖注入）

    app.controller("myController",function($scope,$http){

        //数据的话我们为了不用建立数据库写sql，可以用一种后端代码的方式

        //建立 一个 data.json 以.json结尾的文本文件，可以把数据写到它里面，然后浏览器就能访问到了

        //它也是通过ajax方式获取的

        //需要注意的是：这种json文件的形式中的json数据要写成严格json格式，

        //就是key也必须用双引号引起来，而且值如果是字符串也必须用双引号引起来

        $scope.findList = function(){

            //$http.get("test/data.do"); 实际上这里应该是个请求url

            //它实际上把 $http.get("data.json") 封装成一个请求对象，如果请求成功了，调用success方法

            $http.get("data.json").success(

                function(response){

                    //response就是从后台请求来的数据

                    //定义变量

                    $scope.list=response;

                }

            );

        }

        //这里也可以用这句话来代替下面视图中的  ng-init="findList" 实现自动调用方法加载数据

        //$.scope.findList();

    });

</script>

</head>

<!-- 用ng-init指令初始化控制器中的findList()方法 -->

<body ng-app="myApp" ng-controller="myController" ng-init="findList()">

        <table>

            <tr>

                <td>姓名</td>

                <td>数学</td>

                <td>语文</td>

            </tr>

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

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

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

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

            </tr>

        </table>

    </body>

</html>

效果：

angularJS入门小Demo2 【包含不用数据库而用data.json格式响应前台的ajax请求方式测试】的更多相关文章

  1. angularJS入门小Demo【简单测试js代码的方法】

    1.首先建立一个文件夹 demo, 2.在其中建立一个文本文档,改名为 demo-1.html, 3.把html中要引入的 js 文件拷贝到 demo目录下, 4.然后用 Notepadd++ 编辑刚 ...

  2. AngularJS - 入门小Demo

    AngularJS四大特效 MVC模式.模块化设计.自动化双向数据绑定.依赖注入 如果了解了后端开发知识,想必对这些词汇不会陌生,AngularJS融合了后端开发的一些思想,虽然身为前端框架,但与jQ ...

  3. 数据库记录转换成json格式 (2011-03-13 19:48:37) （转）

    http://blog.sina.com.cn/s/blog_621768f30100r6v7.html 数据库记录转换成json格式 (2011-03-13 19:48:37) 转载▼ 标签: 杂谈 ...

  4. PHP将数据库的数据转换成json格式

    header('content-type:application/json;charset=utf8');  $results = array();     while ($row = mysql_f ...

  5. AngularJS入门Demo

    1 :表达式 <html> <head> <title>入门小Demo-1</title> <script src="angular.m ...

  6. Hibernate的介绍及入门小案例

    1.Hibernate的诞生 在以前使用传统的JDBC开发应用系统时,如果是小型应用系统,并不觉得有什么麻烦,但是对于大型应用系统的开发,使用JDBC就会显得力不从心,例如对几十,几百张包含几十个字段 ...

  7. AngularJS入门心得4——漫谈指令scope

    上篇<AngularJS入门心得3——HTML的左右手指令>初步介绍了指令的概念和作用.已经和指令打过一个照面,就不会那么陌生了,今天主要介绍的是一个困扰了我很久终于想通的问题,这个问题与 ...

  8. 简述Python入门小知识

    如今的Python开发工程师很受企业和朋友们的青睐,现在学习Python开发的小伙伴也很多,本篇文章就和大家探讨一下Python入门小知识都有哪些. 扣丁学堂简述Python入门小知识Python培训 ...

  9. AngularJS入门篇

    AngularJS是一个JavaScript框架,它通过指令扩展了HTML,且通过表达式绑定数据到 HTML.顺便一提,什么是框架?比如struts2.spring.hibernate.thinkph ...

随机推荐

  1. [wirtting] top01 independent

    Do you agree or disagree with the following statement? At universities and colleges, sports and soci ...

  2. sqlserver错误126解决方法

    是不是很尴尬! 华丽的分割线下便是解决方法: 1.打开sqlserver配置管理器. 2.选择sqlserver网络配置,并禁用VIA协议确定保存. 3.在服务里面启动[SQL Server (SQL ...

  3. Consul 简介

    Consul包含很多组件,总体来数,Consul是一种服务发现和配置工具. 服务发现:一个客户端提供自己的服务,例如api服务,或者mysql服务,另一个客户端就可以利用Consul通过DNS或者ht ...

  4. Python类对象

    python类对象 python类对象支持两种操作:属性引用和实例化. 属性引用 使用 Python 中所有属性引用所使用的标准语法: obj.name. 有效的属性名称是类对象被创建时存在于类命名空 ...

  5. lintcode 二叉树前序遍历

    二叉树的前序遍历    给出一棵二叉树,返回其节点值的前序遍历. 您在真实的面试中是否遇到过这个题? Yes 样例 给出一棵二叉树 {1,#,2,3}, 1 \ 2 / 3 返回 [1,2,3]. / ...

  6. 剑指offer-二叉树搜索树与双向链表25

    题目描述 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向. class Solution: def Convert(self, pRo ...

  7. 统计学习三：1.k近邻法

    全文引用自<统计学习方法>(李航) K近邻算法(k-nearest neighbor, KNN) 是一种非常简单直观的基本分类和回归方法,于1968年由Cover和Hart提出.在本文中, ...

  8. [转载]Java集合框架的常见面试题

    http://www.jfox.info/40-ge-java-ji-he-lei-mian-shi-ti-he-da-an 整理自上面链接: Java集合框架为Java编程语言的基础,也是Java面 ...

  9. java面试整理

    IO和NIO的区别 这是一个很常见的问题,如果单纯的只回答IO和NIO的区别,只能算及格.我个人觉得应该从以下几个方面回答: 1).IO简介, 2).TCP的三次握手,因为这也是两者的区别之一, 3) ...

  10. cookie，localstorge，sessionstorge三者总结

    相同点:都是客户端存储东西的: 不同: 1大小,cookie最小;locastorge最大 2 cookie设置好会在header头里面自动带的:但是ls和ss不会:ls同个浏览下不同网页(非跨域)都 ...