angular前端框架简单小案例
一、angular表达式
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
<!--
如果要使用angular 1、必须先引入相关的框架
2、必须在页面body上写一个属性ng-app表示使用angular js应用
3、表达式页面如果需要展示数据，需要写上两个大括号，例：{{表达式或者变量}}
-->
</head>
<body ng-app>
{{100*100}}
</body>
二、双向绑定
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
</head>
<body ng-app>
<!--
ng-model 指令是指给input起名；后台如果接收表单数据，可以根据ng-model中的属性名获取值
页面也可以通过这个属性获取值，本质数据放到当前页面的$
scope中保存
-->
请输入你的姓名：<input ng-model="myName"><br>
{{myName}},你好！！！
</body>
三、初始化指令
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
</head>
<body ng-app ng-init="myName='张三'">
<!--
ng-init是初始化指令，只要页面已加载就执行ng-init
$scope是angular js内置对象，有请求的数据和相应的数据，还有方法
-->
请输入你的姓名：<input ng-model="myName"><br>
{{myName}},你好
</body>
四、
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
<script>
/*
* 1、var app=angular.module('myApp',[]);
* 定义一个myApp的模块后在body标签上声明使用模块的名称
*2、app.controller('myController',function ($scope) {}
* 在模块中声明控制器后在body标签上声明使用控制器
*/
var app=angular.module('myApp',[]);//定义了一个myApp的模块
//定义控制器$scope响应请求的数据和方法
app.controller('myController',function ($scope) {
$scope.add=function () {
return parseInt($scope.X)+parseInt($scope.Y);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
X:<input ng-model="X"><br>
Y:<input ng-model="Y"><br>
运算结果：{{add()}}
</body>
五、事件指令
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
<script>
//定义app模块
var app=angular.module('myApp',[]);
//定义myController控制器
app.controller('myController',function ($scope) {
$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"><br>
Y:<input ng-model="Y"><br>
<button ng-click="add()">运算</button><br>
结果：{{Z}}
</body>
六、循环数组
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
<script>
var app=angular.module('myApp',[]);
//定义控制器
app.controller('myController',function ($scope) {
//声明数组list
$scope.list=[123,12,22,1323];
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr ng-repeat="list in list">
<td>{{list}}</td>
</tr>
</table>
</body>
七、循环对象遍历数组
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
<script>
var app=angular.module('myApp',[]);
//定义控制器
app.controller('myController',function ($scope) {
//定义数组
$scope.list=[
{name:'lisi',saylary:12120,sui:120},
{name:'zhangsan',saylary:2200,sui:20},
{name:'张三',saylary:391073,sui:390}
]
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr>
<td>姓名</td>
<td>工资</td>
<td>税收</td>
</tr>
<tr ng-repeat="list in list">
<td>{{list.name}}</td>
<td>{{list.saylary}}</td>
<td>{{list.sui}}</td>
</tr>
</table>
八、内置服务
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
<script>
var app=angular.module('myApp',[]);
//定义控制器，$http主要欧诺个来发送http请求，ajax请求，$http.get用来发送get请求
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="list in list">
<td>{{list.name}}</td>
<td>{{list.salary}}</td>
<td>{{list.sui}}</td>
</tr>
</table>
</body>
angular前端框架简单小案例的更多相关文章
- Angular.js路由 简单小案例
代码案例: <html> <head> <meta charset="utf-8"> <title>AngularJS 路由实例&l ...
- JavaWeb_(Struts2框架)Ognl小案例查询帖子
此系列博文基于同一个项目已上传至github 传送门 JavaWeb_(Struts2框架)Struts创建Action的三种方式 传送门 JavaWeb_(Struts2框架)struts.xml核 ...
- angular前端框架
总所周知,在前端开发中,大家用的比较多的框架就是angular,vue,react等,今天就为大家讲一下angular大家框架的原理及运用 1.本次所举的例子是以依赖require.js的, < ...
- 基于Pytorch的简单小案例
神经网络的理论知识不是本文讨论的重点,假设读者们都是已经了解RNN的基本概念,并希望能用一些框架做一些简单的实现.这里推荐神经网络必读书目:邱锡鹏<神经网络与深度学习>.本文基于Pytor ...
- SSM框架CRUD小案例
1.数据库准备 部门tbl_dept 员工tbl_emp 建立员工和部门的外键 2.在IDEA创建SSM项目环境 2.1配置Web模块 最上面的图是错误示范,注意!!! 在Tomcat配置了项目路径, ...
- 搭建angular前端框架 命令
首先必备的工具都下下好. 然后现在开始输入命令行创建angular 项目 1.node cd .. 2.yo bower grunt 3.npm install -g generator-angula ...
- angular中ng-bind指令小案例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- touch滑动事件---简单小案例
html: <!--导航栏头部--><div class="type_nav"> <ul class="clearfix " v- ...
- Twig---和vue或angular前端框架并存
<h1> {% verbatim %} {{message}} {% endverbatim %} </h1> 上面这种方式虽然能够解决,前台渲染的问题,但是还是会报错: 第二 ...
随机推荐
- 基于layui,Jquery 表格动态编辑 设置 编辑值为 int 或者 double 类型及默认值
首先先推荐大家在看这篇笔记时,阅读过我写的这篇 Layui表格编辑[不依赖Layui的动态table加载] 阅读过上面那篇笔记之后呢,才能更好的理解我现在所要说的这个东西 接下来废话不多说,上代码. ...
- Centos 7服务器搭建MySQL(mariadb)服务
1.下载并安装MySQL yum install mariadb mariadb-server -y 2.启动MySQL systemctl start mariadb 3.对mariadb进行初始化 ...
- elementaryos5安装chrome，修复依赖
1.首先去下载个chrome:https://www.google.cn/chrome/ 2.尝试安装chrome:sudo dpkg -i google-chrome-stable_current_ ...
- libcurl库返回状态码解释与速查
libcurl库返回状态码解释与速查 CURLE_OK(0) 支持返回 CURLE_UNSUPPORTED_PROTOCOL(1) 你的URL传递给libcurl的使用协议,这libcurl的 ...
- String、String[]、ArrayList<String>之间的转换
1. ArrayList<String> 转换为 String[]: ArrayList<String> list = new ArrayList<>(); li ...
- css之单位
css之单位 角度<angle> 用于<gradient>s和某些transform功能中 deg表示以度为单位的角度.一整圈就是360deg. 例如:0deg,90deg,1 ...
- 即将进行论文答辩的我发现MyEclipse 2016 激活过期害得我又一次把 MyEclipse 2016 给重新激活注册，详细的图文解说激活过程
背景: 在家美滋滋的上着网课享受着因为疫情带来的平静,没想到随着微信.钉钉铃声响起打破了我半年以来的平静的生活:通知我们过完劳动节要进行答辩,由于我的答辩项目是由 MyEclipse 这个工具编写的我 ...
- Bootstrap表格组件 Bootstrap Table
Bootstrap Table是Bootstrap的一个组件 Bootstrap Table Demo:http://issues.wenzhixin.net.cn/bootstrap-table/i ...
- lua 发送http请求
lua发送http请求,luajit默认没有http.lua库,需要下载并存放到luajit对应目录. 一.下载http.lua和http_headers.lua库 参考:https://www.zi ...
- POJ 1176 Party Lamps&& USACO 2.2 派对灯（搜索）
题目地址 http://poj.org/problem?id=1176 题目描述 在IOI98的节日宴会上,我们有N(10<=N<=100)盏彩色灯,他们分别从1到N被标上号码. 这些灯都 ...