双向绑定测试：

<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. SpringCloud系列八：Zuul 路由访问（Zuul 的基本使用、Zuul 路由功能、zuul 过滤访问、Zuul 服务降级）

    1.概念:Zuul 路由访问 2.具体内容 在现在为止所有的微服务都是通过 Eureka 找到的,但是在很多的开发之中为了规范微服务的使用,提供有一个路由的处理控制组件:Zuul,也就是说 Zuul ...

  2. Url的拦截问题

    如果 在中没有, 就会去找欢迎页,先找/index,jsp,在webapp里并没有,就继续往下找/index.html, 是图中的拦截形式,就会被servlet拦截,对应于controller中的请求 ...

  3. pytorch 生成随机数

    在使用PyTorch做实验时经常会用到生成随机数Tensor的方法,比如: torch.rand() torch.randn() torch.normal() torch.linespace() 在很 ...

  4. mybatis-plus报org.apache.ibatis.binding.BindingException分析【转载】

    这个问题整整纠结了我四个多小时,心好累啊...不废话... 背景:Spring整合Mybatis 报错:org.apache.ibatis.binding.BindingException: Inva ...

  5. docker swarm集群搭建以及使用滚动更新

    基础环境,三台虚拟机 172.17.3.70 172.17.3.71 172.17.3.72 系统配置:centos 7,关闭selinux 需要优化的基础配置: [root@sw1 ~]# vim ...

  6. Maven 打包项目 部署到服务器 重启服务 插件

    1.maven插件wagon-maven-plugin自动部署远程Linux服务器  (http://xxgblog.com/2015/10/23/wagon-maven-plugin/) <p ...

  7. 《DOM Scripting》学习笔记-——第九章 CSS-DOM

    本章内容: 一.style属性 二.如何检索样式信息 三.如何改变样式 属性: 包含位置信息:parentNode , nextSibling , previousSibling , childNod ...

  8. 怎样用Python的Scikit-Learn库实现线性回归？

    来源商业新知号网,原标题:用Python的Scikit-Learn库实现线性回归 回归和分类是两种 监督 机器 学习算法, 前者预测连续值输出,而后者预测离散输出. 例如,用美元预测房屋的价格是回归问 ...

  9. 爬虫 2 XPath 和 pyquery

    XPath 1.常用规则    表达式 描述 nodename 选取此节点的所有子节点 / 从当前节点选取直接子节点 // 从当前节点选取子孙节点 . 选取当前节点 .. 选取当前节点的父节点 @ 选 ...

  10. 安装oracle [INS-32025] 所选安装与指定 Oracle 主目录中已安装的软件冲突” 的问题

    删除C:\Program Files (x86)\Oracle\Inventory\下的Oracle文件夹即可解决问题