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> 上面这种方式虽然能够解决,前台渲染的问题,但是还是会报错: 第二 ...
随机推荐
- 原生Js贪吃蛇游戏实战开发笔记
前言 本课程是通过JavaScript结合WebAPI DOM实现的一版网页游戏---贪吃蛇的开发全过程,采用面向以象的思想设计开发.通过这个小游戏的开发, 不仅可以掌握JS的语法的应用,还可以学会D ...
- vue中使用echarts 制作某市各个街道镇的地图
我要制作的是青州的各街道镇的地图,于是我上网搜,很感谢这篇文章的作者给的提点和帮助https://www.jianshu.com/p/7337c2f56876 现在我把自己的制作过程做个整理,以山东省 ...
- BUAA_OO 第一单元总结
1.简单多项式求导 第一次作业的难点,我认为是对输入的预处理,尤其是正则表达式的使用.这次作业的思路是:首先将表达式进行预处理,(由于题目中要求不会有空格产生的WF,所以可以放心大胆的消除空格). 消 ...
- PHP中级篇 Apache配置httpd-vhosts虚拟主机总结及注意事项
经常使用Apache虚拟主机进行开发和测试,但每次需要配置虚拟主机时都习惯性的ctrl+c和ctrl+v,这次由于重装系统,需要配置一个新的PHP开发环境虚拟主机,于是总结一下Apaceh配置http ...
- openssl查看证书细节 [转载]
openssl x509部分命令 打印出证书的内容: openssl x509 -in cert.pem -noout -text 打印出证书的系列号 openssl x509 -in cert.pe ...
- UVALive 7509 Dome and Steles
三分 #include<bits/stdc++.h> using namespace std; #define rep(i,a,b) for(int i=a;i<=b;++i) #d ...
- 广深小龙-基于unittest、pytest自动化测试框架之demo来学习啦！！！
基于unittest.pytest自动化测试框架之demo,赶紧用起来,一起学习吧! demo分为两个框架:①pytest ②unittest demo 中 包含 web.api 自动化测试框架 ...
- Firefox 66 发布，阻止网站自动播放声音
Firefox 66 发布了,此版本在桌面版中带来的新特性包括: Firefox 现在阻止网站自动播放声音,如果需要可以单独调整 改进的搜索体验: 当打开许多选项卡时,可以更快地查找特定网页:现在可以 ...
- vue中递归组件的使用
2019独角兽企业重金招聘Python工程师标准>>> 递归 简单来讲就是程序自己调用自身. vue中的递归组件就是,组件自身调用自身. 父组件 <template> & ...
- Netty（五）：ServerBootstrap启动流程
这篇文章主要是对ServerBootstrap启动流程做一个梳理,方便我们串联起各个类,同时也对主要的一些类有个大概的印象,方便之后逐个类的深入学习. 本篇文章不在具体贴出代码,而是对整个启动流程画了 ...