AngularJS入门-demo
双向绑定测试：
<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的更多相关文章
- AngularJS入门Demo
1 :表达式 <html> <head> <title>入门小Demo-1</title> <script src="angular.m ...
- angularJS入门小Demo【简单测试js代码的方法】
1.首先建立一个文件夹 demo, 2.在其中建立一个文本文档,改名为 demo-1.html, 3.把html中要引入的 js 文件拷贝到 demo目录下, 4.然后用 Notepadd++ 编辑刚 ...
- AngularJS - 入门小Demo
AngularJS四大特效 MVC模式.模块化设计.自动化双向数据绑定.依赖注入 如果了解了后端开发知识,想必对这些词汇不会陌生,AngularJS融合了后端开发的一些思想,虽然身为前端框架,但与jQ ...
- AngularJS入门心得4——漫谈指令scope
上篇<AngularJS入门心得3——HTML的左右手指令>初步介绍了指令的概念和作用.已经和指令打过一个照面,就不会那么陌生了,今天主要介绍的是一个困扰了我很久终于想通的问题,这个问题与 ...
- AngularJS入门心得3——HTML的左右手指令
在<AngularJS入门心得1——directive和controller如何通信>我们提到“AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文 ...
- AngularJS入门心得2——何为双向数据绑定
前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...
- AngularJS入门心得1——directive和controller如何通信
粗略地翻了一遍<JavaScript DOM编程艺术>,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too Simple!(刚打照面的时候 ...
- （一）Angularjs - 入门
AngularJS进行应用开发的一个重要的思维模式: 从构造声明式界面入手 ng-app: 这个指定定义并且关联了使用angularJS的HTML页面部分 ng-model: 这个指定定义并绑定Ang ...
- AngularJS入门教程：日期格式化
AngularJS入门教程:日期格式化[转载] 本地化日期格式化: ({{ today | date:'medium' }})Nov 24, 2015 2:19:24 PM ({{ today | d ...
随机推荐
- 学习Flask框架
# -*- encoding: utf-8 -*- #导包 from flask import Flask #建立flask对象 app = Flask(__name__) #使用flask路由器 ...
- jQuery validdate插件的使用
跟着书上的例子做的时候发现很奇怪,在script标签中用message重写提示消息,没有反应,不知道是不是引入的metadata.js文件有问题,于是用了菜鸟教程的cdn和教程,魔改了一下 <! ...
- SpringCloud系列九：SpringCloudConfig 基础配置（SpringCloudConfig 的基本概念、配置 SpringCloudConfig 服务端、抓取配置文件信息、客户端使用 SpringCloudConfig 进行配置、单仓库目录匹配、应用仓库自动选择、仓库匹配模式）
1.概念:SpringCloudConfig 基础配置 2.具体内容 通过名词就可以发现,SpringCloudConfig 核心作用一定就在于进行配置文件的管理上.也就是说为了更好的进行所有微服务的 ...
- Mysql时间差计算
Mysql如何计算两个时间字段的差值?可用函数 TIMESTAMPDIFF() ----------------------------- TIMESTAMPDIFF函数,有参数设置,可以精确到天(D ...
- gitlab api 使用
api文档:https://docs.gitlab.com/ee/api/projects.html#project-visibility-level 1.项目查询 http://127.0.0.1: ...
- Java自学如何找工作
今天聊一下可能大多数人都关注的问题“自学Java如何找工作”那么首先你就要明确现在招聘Java开发的基本要求是什么?下面我们来看一下招聘网站上面的要求,在这里我只随便找了一个比较全面的要求,自己可以去 ...
- 使用TensorFlow训练模型的基本流程【转】
原文地址(https://github.com/wmpscc/TensorflowBaseDemo ) 本篇文章将介绍使用tensorflow的训练模型的基本流程,包括制作读取TFRecord,训练和 ...
- Office免费激活方法！亲测有效！2019年4月3日测试
内容转载自:https://blog.csdn.net/qq_41785863/article/details/83619401 防止原博主删除,我先放上自己下载好了的工具分享链接. 链接:https ...
- python深拷贝，浅拷贝
1.浅拷贝, 首先要引用copy包 from copy import copy class A: def __init__(self): self.A=1 self.B=2 a = A() copy( ...
- 【C++】纯C++实现http打开网页下载内容的功能
#include "stdafx.h" #include <windows.h> #include <iostream> #include "Wi ...