双向绑定测试：

<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. Python第3天

    字符串的魔法: expandtabs 可用来制表 当前输入是否为数字:isdecimal 最低级 isdigit 支持特殊数字 isnumeric 支持中文 标识符 isidentifier 是否存在 ...

  2. javascript判断字符串相等

  3. 微信小程序海报生成功能

    如果是H5页面的话给大家推荐一款不错的插件html2canvas,这个插件可以将html元素转为canvas并一键生成png图片,但是本文的重点是在小程序上如何实现生成图片的功能.因为小程序没有DOM ...

  4. mysql join优化原理

    http://blog.itpub.net/22664653/viewspace-1692317/ http://itindex.net/detail/46772-%E4%BC%98%E5%8C%96 ...

  5. python并发编程基础之守护进程、队列、锁

    并发编程2 1.守护进程 什么是守护进程? 表示进程A守护进程B,当被守护进程B结束后,进程A也就结束. from multiprocessing import Process import time ...

  6. JavaFX(Maven 方式)

    运行界面第一种方式 运行界面第二种方式 参考文献 https://github.com/AlmasB/JavaFX11-example

  7. 1.Sed | Awk | Grep | Find

    1.Sed | Awk | Grep | Find 可以参考的文档链接 CentOS7 查看 当前机器 已经启动的端口的Shell命令: netstat -lntup | awk -F' ' {'pr ...

  8. AHA高级心血管生命支持ACLS课前自我评估测试

    AHA高级心血管生命支持ACLS课前自我评估测试 答题人:a   成绩单 您的得分:17.5 分 答对题数:7 题 您的名次:47 名 问卷满分:100 分 测试题数:40 题 参与人次:47 人   ...

  9. java swing button和键盘监听冲突问题

    原因: 点击button会让jframe失去焦点,然后键盘监听不起作用 解决: 让jframe重新获取焦点就行了 jf.setFocusable(true); // JFrame jf = new J ...

  10. js判断访问浏览器是安卓还是ios还是微信浏览器还是微博

    var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf('Android') > - ...