双向绑定测试：

<body ng-app>

    请输入姓名：<input ng-model="myname">

    <br>

    {{myname}},你好

</body>

这时候AngularJS会自动绑定对象myname，并且在下放的{{myname}}中显示出来

初始化指令：

　　通过ng-init来初始化对象，使对象有默认的数值：

<body ng-app   ng-init="myname='陈大海'">

　　请输入你的姓名：<input ng-model="myname">

　　<br>

　　{{myname}},你好

</body>

此时默认显示出来的内容：

陈大海，你好

控制器：

<script >
　　　　　　//定义一个对象函数

        var app =angular.module('myApp',[]);
　　　　　　//定义对象的controller，叫做myController，后方就是controller的内容

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

            $scope.add=function(){

                return parseInt($scope.x)+parseInt($scope.y)

            }

        });

    </script>

调用

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

    x:<input ng-model="x" >

    y:<input ng-model="y" >

        运算结果：{{add()}}

</body>

也可以用$scope.x=10，设定x默认值为10

事件指令：

<head>

    <title>

        demo

    </title>

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

    <script >

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

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

            $scope.x=10;

            $scope.add=function(){

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

            }

        });

    </script>

</head>

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

    x:<input ng-model="x" >

    y:<input ng-model="y" >

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

        运算结果：{{z}}

</body>

创建$scope.z对象和函数，但是并不主动调用函数，当按下ng-click的时候，进行add()的调用，然后主动回显结果

循环：

　　

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

<script>

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

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

  $scope.list = [10,20,30,40]

    });

</script>

</head>

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

    <table>

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

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

        </tr>

    </table>

</body

先用$scope创建一个list

在用ng-repeat命令调用该list

循环数组：

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

    $scope.list= [

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

        {name:'李四',shuxue:88,yuwen:87},

        {name:'王五',shuxue:77,yuwen:56}

    ];

    });

</script>

</head>

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

    <table>

        <tr>

            <td>姓名</td>

            <td>数学</td>

            <td>语文</td>

        </tr>

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

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

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

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

        </tr>

    </table>

类似类的调用。

内置服务：$http

<script>

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

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

        $scope.findAll=function(){

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

                function(response){

                    $scope.list=response;

                }

            );

        }

    });

</script>

</head>

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

    <table>

        <tr>

            <td>姓名</td>

            <td>数学</td>

            <td>语文</td>

        </tr>

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

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

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

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

        </tr>

    </table>

data.json

[

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

    {"name":"李四","shuxue":88,"yuwen":87},

    {"name":"王五","shuxue":77,"yuwen":56},

    {"name":"赵六","shuxue":67,"yuwen":86}

]

要注意<body ng-init="findAll()"> 要初始化angularJS的函数，即$scope.findAll(),不然http会注入失败。

AngularJS入门-demo的更多相关文章

  1. AngularJS入门Demo

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

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

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

  3. AngularJS - 入门小Demo

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

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

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

  5. AngularJS入门心得3——HTML的左右手指令

    在<AngularJS入门心得1——directive和controller如何通信>我们提到“AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文 ...

  6. AngularJS入门心得2——何为双向数据绑定

    前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...

  7. AngularJS入门心得1——directive和controller如何通信

    粗略地翻了一遍<JavaScript DOM编程艺术>,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too Simple!(刚打照面的时候 ...

  8. （一）Angularjs - 入门

    AngularJS进行应用开发的一个重要的思维模式: 从构造声明式界面入手 ng-app: 这个指定定义并且关联了使用angularJS的HTML页面部分 ng-model: 这个指定定义并绑定Ang ...

  9. AngularJS入门教程：日期格式化

    AngularJS入门教程:日期格式化[转载] 本地化日期格式化: ({{ today | date:'medium' }})Nov 24, 2015 2:19:24 PM ({{ today | d ...

随机推荐

  1. (11)ssh免密登录配置

    ***在Linux命令行中登录到另一台虚拟机(需要用到ssh协议) Linux中默认有ssh的服务器端和客户端,客户端的名字就叫ssh 前提是当前使用的用户名在待连接的虚拟机中存在 格式:  ssh ...

  2. cenos 修改静态ip

    修改为静态ip 1)在终端命令窗口中输入 [root@hadoop101 /]#vim /etc/udev/rules.d/70-persistent-net.rules 进入如下页面,删除eth0该 ...

  3. 每日一练之排序算法(P1097 统计数字)

    某次科研调查时得到了n个自然数,每个数均不超过1500000000(1.5×10^9).已知不相同的数不超过10000个,现在需要统计这些自然数各自出现的次数,并按照自然数从小到大的顺序输出统计结果. ...

  4. HTML - form (转)

    自:http://www.runoob.com <form> 标签 标签定义及使用说明 <form> 标签用于创建供用户输入的 HTML 表单. <form> 元素 ...

  5. ajax、json、jsonp

    这章分享下ajax.json.jsonp的学习记录,不得不说这真是些令人激动的技术. 推荐文章: https://segmentfault.com/a/1190000012469713 http:// ...

  6. Codeforces Round #442 (Div. 2) E Danil and a Part-time Job (dfs序加上一个线段树区间修改查询)

    题意: 给出一个具有N个点的树,现在给出两种操作: 1.get x,表示询问以x作为根的子树中,1的个数. 2.pow x,表示将以x作为根的子树全部翻转(0变1,1变0). 思路:dfs序加上一个线 ...

  7. [转]一千行 MySQL 学习笔记

    原文地址:https://www.cnblogs.com/shockerli/p/1000-plus-line-mysql-notes.html /* 启动MySQL */ net start mys ...

  8. Java框架spring 学习笔记（十）：bean管理（注解和配置文件混合使用）

    配置文件和注解混合使用 创建对象操作使用配置文件方式实现 注入属性的操作使用注解方式实现 编写BookDao.java和OrderDao.java文件 BookDao.java package com ...

  9. C语言作业04-数组

    1.本章学习总结 1.1思维导图 1.2本章学习体会及代码量学习体会 1.2.1学习体会 通过本章的学习,学会了几种用于循环的语句,能够利用循环解决复杂的问题,但对于几种循环的使用并不熟练,其中对于c ...

  10. Git命令解释

    pwd命令: Print Working Directory 显示工作目录的路径名称.