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> 上面这种方式虽然能够解决,前台渲染的问题,但是还是会报错: 第二 ...
随机推荐
- 你知道什么是 GitHub Action 么？
本文是 GitHub Action 的入门教程,如您已有相关使用经验可以直接关掉. GitHub Action 是 GitHub 于 2018 年 10 月推出的一个 CI\CD 服务. 之前一直都是 ...
- Java 多线程 -- lambda 表达式推导
jdk 8 开始 java 引入了lambda 表达式. lambda适用场景: 1.接口或父类 2.接口或父类只有一个方法 我们从多线程写法来推导一下: 1.外部类写法: package com.x ...
- Taro 2.2 全面插件化，支持拓展和定制个性化功能
自 2.2 开始,Taro 引入了插件化机制,允许开发者通过编写插件的方式来为 Taro 拓展更多功能或者为自身业务定制个性化功能,欢迎大家进行尝试,共同讨论~ 当前版本 2.2.1 官方插件 Tar ...
- Kubernetes 命令行工具之kubctl
目录 1.何为kubectl 2.Kubectl基本使用 2.1.命令补全 2.2.快速查找资源 2.3.使用自定义输出格式 3.陈述式管理资源 3.1.管理namespace资源 3.2.管理Dep ...
- zookeeper笔记(一)
title: zookeeper笔记(一) zookeeper 安装简记 解压文件 $ tar -zxvf zookeeper-3.4.10.tar.gz -C 安装目录 创建软连接(进入安装目录) ...
- 双链表【参照redis链表结构】
参照了Redis里面的双链表结构,可以说是完全复制粘贴,redis的双链表还是写的很通俗易懂的,没有什么花里胡哨的东西,但是redis还有个iter迭代器的结构来遍历链表.我这里就没有实现了,只是实现 ...
- Django新手十个开发指导
下面是关于Django新手开发中的一些建议,大家可以参考一下~~ 1,不要将项目名称包含在引用代码里 比如你创建了一个名为"project"的项目,包含一个名为"app& ...
- 批量将制定文件夹下的全部Excel文件导入微软SQL数据库
以下代码将c:\cs\文件夹下的全部Excle中数据导入到SQL数据库 declare @query vARCHAR(1000) declare @max1 int declare @count1 i ...
- 负载均衡服务之HAProxy https配置、四层负载均衡以及访问控制
前文我们聊了下haproxy的访问控制ACL的配置,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/12817773.html:今天我们来聊一聊haproxy的h ...
- JAVA_WEB--jsp概述
JSP全名为Java Server Pages,中文名叫java服务器页面,其根本是一个简化的Servlet设计,它是由Sun Microsystems公司倡导.许多公司参与一起建立的一种动态网页技术 ...