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> 上面这种方式虽然能够解决,前台渲染的问题,但是还是会报错: 第二 ...
随机推荐
- Springboot整合https原来这么简单
1 简介 HTTP是不安全的,我们需要给它套上SSL,让它变成HTTPS.本文章将用实例介绍Springboot整合HTTPS. 2 密码学基础 要谈https就要谈Security,自然就要谈安全: ...
- 2019-2020-1 20199303《Linux内核原理与分析》第九周作业
进程的切换和一般执行过程 知识总结 操作系统原理中介绍了大量进程调度算法,这些算法从实现的角度看仅仅是从运行队列中选择一个新进程,选择的过程中运用了不同的策略而已. 对于理解操作系统的工作机制,反而是 ...
- Inno Setup 添加版权信息
[Setup]AppCopyright=Copyright (C) - My Company, Inc. 有以上一句,即可在右键 --> Property --> Details 里看见版 ...
- 设置 cipher suite
https://man.openbsd.org/SSL_CTX_set_cipher_list.3#ECDHE SSL_CTX_set_cipher_list() sets the list of a ...
- 日志分析工具ELK(一)
一.ELK介绍 1.1 elasticsearch 1.1.1 elasticsearch介绍 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎 ...
- MySQL 入门（1）：查询和更新的内部实现
摘要 在MySQL中,简单的CURD是很容易上手的. 但是,理解CURD的背后发生了什么,却是一件特别困难的事情. 在这一篇的内容中,我将简单介绍一下MySQL的架构是什么样的,分别有什么样的功能.然 ...
- QT bug ig9icd64.dll
QT bug ig9icd64.dll bugintel ig9icd64.dll 处有未经处理的异常 遇到了一个 奇奇怪怪的bug, 一般的QT程序中 在main.cpp 中初始化一个窗口进行显示后 ...
- 计算机网络 之 Cisco packet tracer 的安装及汉化
可以去官网下载最新版本的Cisco packet tracer 免费 汉化包及7.1版本百度云链接:链接: https://pan.baidu.com/s/1XudelgnMu6XysCZ36csl7 ...
- App《最美诗词》开发 -- Java后端（整合框架）
本人一直是致力于Android开发,由于我们三位Android开发者 @老蔡 @不肯过江东 打算一起开发Android App<最美诗词>,需要服务器端的接口支持,所以便兼职做起了后端的代 ...
- JVM调优：GC 参数
2019独角兽企业重金招聘Python工程师标准>>> JVM调优:GC 参数 博客分类: java jvm 参考: <Memory Management in the Jav ...