双向绑定测试：

<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. 关于 /bin/bash: warning: setlocale: LC_ALL: cannot change locale (en.US_UTF-8) 问题

    亲测可行 中文 # vim /etc/profile.d/locale.sh export LC_CTYPE=zh_CN.UTF-8 export LC_ALL=zh_CN.UTF-8 # vim / ...

  2. 记数据库数据文件损坏恢复ORA-00376+ORA-01110

    现象:业务平台无法登陆,日志报错为ORACLE的错误. 查看oracle日志的报错, ORA-00376: file 5 cannot be read at this time ORA-01110: ...

  3. flask sqlchemy 多对多的自引用关系定义

    多对多的定义可以使用关联表,或者重新定义一个模型,通过模型定义多对多的自引用在flask web开发书里有讲到,这里主要演示用关联表定义的方法. from flask_sqlalchemy impor ...

  4. java面试题复习（四）

    31.内部类可以引用它的外部类的私有成员吗? 可以,内部类对象可以访问创建它的外部类对象的成员 32.final关键字有哪些用法? 修饰类时该类不能被继承,修饰方法时,该方法不能被重写,修饰变量时表示 ...

  5. Mysql时间差计算

    Mysql如何计算两个时间字段的差值?可用函数 TIMESTAMPDIFF() ----------------------------- TIMESTAMPDIFF函数,有参数设置,可以精确到天(D ...

  6. Caused by: java.lang.IllegalArgumentException: argument type mismatch

    下面是我的报错信息 at org.apache.ibatis.session.defaults.DefaultSqlSession.selectList(DefaultSqlSession.java: ...

  7. docker 独立搭建linux + php 随笔

    参考了 https://www.jianshu.com/p/fcd0e542a6b2  dodos大佬的一些经验 1.首先,由于nginx跟php的特性,使得二者可以单独作为独立容器存在,所以为了使h ...

  8. MongoDB主从复制和副本集

    MongoDB有主从复制和副本集两种主从复制模式,主从复制最大的问题就是无法自动故障转移,MongoDB副本集解决了主从模式无法自动故障转义的特点,因此是复制的首选.对于简单的主从复制无法自动故障转移 ...

  9. celery （二） task

    Task task 具有如下特点: task 可以在任何可调用的地方创建.它有双重角色: 定义了当task被调用时,会发送一个消息. 定义了当worker收到消息时会运行消息对应的函数 每个task都 ...

  10. HTTP请求方式

    HTTP协议中请求的8中方法 OPTIONS获取服务器支持的HTTP请求方法: HEAD跟get很像,但是不返回响应体信息,用于检查对象是否存在,并获取包含在响应消息头中的信息. GET向特定的资源发 ...