双向绑定测试：

<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. C# ADO.NET中设置Like模糊查询的参数

    ADO.NET进行参数化时会自动将参数值包含在单引号中,除了特殊需求,最好不要自己手动添加单引号.ADO.NET中识别参数标识是使用符号@,如果在SQL语句中将参数标识放在单引号中,单引号中的参数标识 ...

  2. C#调用C++的dll EntryPointNotFoundException

    问题描述:不带参数的函数可以通过C#调用,含有参数的函数报错: EntryPointNotFoundException:此外,采用depends可以查看到所有导出函数. 此问题解决方案:步骤1:在C+ ...

  3. FireDac 同时连接SQLserver2000时出现 Connection is busy with results for another command

    First chance exception at $763FC632. Exception class EMSSQLNativeException with message '[FireDAC][P ...

  4. 三个猜数字游戏代码（Python）

    def binary_search(list,item): low = 0 high = len(list)-1 while low <= high: mid = (low + high)//2 ...

  5. Maven打包后的文件存在中文乱码

    发现打包的js文件虽然是UTF-8格式的编码,但是有中文有乱码 可设置jvm的编码,两种方法: 在系统的环境变量中添加一个变量,名为: JAVA_TOOL_OPTIONS, 值为:-Dfile.enc ...

  6. 关于第一个launcher开发笔记

    本笔记主要记录阅读关于launcher代码是的相关知识点. viewpager的简单使用(适配器模式):https://www.cnblogs.com/fuly550871915/p/4922953. ...

  7. MVC过滤器使用方法

    先介绍下什么是过滤器:ASP.NET MVC中的灭一个请求,都会分配给相应的控制器和对应的行为方法去处理,而在这些处理的前前后后如果想再加一些额外的逻辑处理,这时就用到了过滤器. MVC支持的过滤器有 ...

  8. Go语言编程读书笔记：Go channel(2)

    单向channel 概念 单向channel是只能用于发送或者接收数据,channel本身必然是同时支持读写,否则根本没法用.假如一个channel只能读,那么肯定只会是空的,因为你没有机会向里面写数 ...

  9. event 事件2

    4.事件类型 “DOM3级事件”规定了一下几类事件: 1)UI事件(用户界面事件),当用户与页面元素交互时触发 2)焦点事件,当元素获得或失去焦点时触发 3)鼠标事件,当用户通过鼠标在页面上执行操作时 ...

  10. dubbo 面试

    1.使用dubbo+zookeeper ,如果注册中心挂掉,是否可以继续通信?(zk集群可以达到高可用,但是如果全部挂掉呢?) 我答了不可以吧(项目没用过,自学没又这深度) 正确答案: dubbo使用 ...