品优购 Angular学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angular demo-1 差值表达式</title>
<script src="../plugins/angularjs/angular.min.js"></script>
</head>
<body ng-app>
{{1+2}}
{{1 > 2}}
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angular demo2 双向绑定</title>
<script src="../plugins/angularjs/angular.min.js"></script>
</head>
<body ng-app>
<input ng-model="name"><br>
<input ng-model="name"><br>
{{name}}
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angular demo3 初始化指令</title>
<script src="../plugins/angularjs/angular.min.js"></script>
</head>
<body ng-app ng-init="name='黑马程序员'">
<input ng-model="name">{{name}}
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angular demo4 控制器和$scope 控制层通过$scope来控制数据</title>
<script src="../plugins/angularjs/angular.min.js"></script>
<script>
//定义模块
var demo = angular.module("demoModule", []);
//定义控制器
demo.controller("demoController", function ($scope) {
//定义操作
$scope.add = function () {
// return $scope.x + $scope.y;
return parseInt($scope.x) + parseInt($scope.y);
}
});
</script>
</head>
<body ng-app="demoModule" ng-controller="demoController">
x:<input ng-model="x"><br>
y:<input ng-model="y"><br>
结果：{{add()}}
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angular demo5 事件</title>
<script src="../plugins/angularjs/angular.min.js"></script>
<script>
//定义模块
var demo = angular.module("demoModule", []);
//定义控制器
demo.controller("demoController", function ($scope) {
$scope.add = function () {
// $scope.result = $scope.x + $scope.y;
$scope.result = parseInt($scope.x) + parseInt($scope.y);
}
});
</script>
</head>
<body ng-app="demoModule" ng-controller="demoController">
x:<input ng-model="x"><br>
y:<input ng-model="y"><br>
<button ng-click="add()">运算</button>
结果：{{result}}
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angular demo6 循环</title>
<script src="../plugins/angularjs/angular.min.js"></script>
<script>
//定义模块
var demo = angular.module("demoModule", []);
//定义控制器
demo.controller("demoController", function ($scope) {
$scope.names = ["刘备", "孙权", "曹操"];
});
</script>
</head>
<body ng-app="demoModule" ng-controller="demoController">
<table>
<tr ng-repeat="name in names">
<td>{{$index}}</td>
<td>{{name}}</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angular demo7 循环对象数组</title>
<script src="../plugins/angularjs/angular.min.js"></script>
<script>
//定义模块
var demo = angular.module("demoModule", []);
//定义控制器
demo.controller("demoController", function ($scope) {
$scope.userList = [
{"name": "刘备", "country": "蜀", age: 28},
{"name": "曹操", "country": "魏", age: 30},
{"name": "孙权", "country": "吴", age: 25}
];
});
</script>
</head>
<body ng-app="demoModule" ng-controller="demoController">
<table>
<tr ng-repeat="user in userList">
<td>{{$index + 1}}</td>
<td>{{user.name}}</td>
<td>{{user.country}}</td>
<td>{{user.age}}</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angular demo8 内置服务$http</title>
<script src="../plugins/angularjs/angular.min.js"></script>
<script>
//定义模块
var demo = angular.module("demoModule", []);
//定义控制器
demo.controller("demoController", function ($scope, $http) {
$scope.findAll = function () {
//获取用户列表
$http.get("data.json").success(function (data) {
$scope.userList = data;
});
}
});
</script>
</head>
<body ng-app="demoModule" ng-controller="demoController" ng-init="findAll()">
<table>
<tr ng-repeat="user in userList">
<td>{{$index + 1}}</td>
<td>{{user.name}}</td>
<td>{{user.country}}</td>
<td>{{user.age}}</td>
</tr>
</table>
</body>
</html>
[
{"name": "刘备", "country": "蜀", "age": 28},
{"name": "曹操", "country": "魏", "age": 30},
{"name": "孙权", "country": "吴", "age": 25}
]
品优购 Angular学习的更多相关文章
- 品优购(IDEA版)-第二天
品优购-第2天 学习目标 目标1:运用AngularJS前端框架的常用指令 目标2:完成品牌管理的列表功能 目标3:完成品牌管理的分页列表功能 目标4:完成品牌管理的增加功能 目标5:完成品牌管理的修 ...
- 品优购商城项目（六）CAS客户端与SpringSecurity集成
cas单点登录旨在解决传统登录模式session在分布式项目中共享登录信息的问题. 本文cas服务器使用 4.0版本,仅供学习参考.把 cas.war 直接部署在tomcat即可,这里有个固定的用户名 ...
- 项目二:品优购 第二天 AngularJS使用 brand商品页面的增删改查
品优购电商系统开发 第2章 品牌管理 传智播客.黑马程序员 1.前端框架AngularJS入门 1.1 AngularJS简介 AngularJS 诞生于2009年,由Misko Hevery 等人 ...
- 品优购(IDEA版)-第一天
# 品优购(IDEA版)-第一天 品优购IDEA版应该是2019年的新项目.目前只有视频.资料其他都还是旧的. ## 1.学习目标 1:了解电商行业特点以及理解电商的模式 2:了解整体品优购的架构特点 ...
- 品优购商城项目（二）AngularJS、自动代码生成器、select2下拉多选框
品优购商城想项目第二阶段 AngularJS.自动代码生成器.select2下拉多选框 完成了课程第三天.第四天的的任务. 1.学习了AngularJs前端的mvc分层思想,js部分分成control ...
- 品优购商城项目（二）mybatis分页插件
品优购商城项目第二天,使用mybatis分页插件实现分页.主要实现的是 SSM整合mybatis分页. 一.引用mybatis分页插件 SqlMapConfig.xml <?xml versio ...
- 品优购商城项目（三）安全框架SpringSecurity
品优购商城项目第三阶段 1.springSecurity的基本用法与shiro类似. 2.BCrypt加密算法比MD5更加智能和安全,能自动加盐再加密,生成的密码是60位比md5的32位更占空间(可以 ...
- 使用IDEA实现品优购项目搭建
转发自 https://www.jianshu.com/p/4710a87b65fa 使用idea实现品优购项目搭建 1.使用idea实现品优购项目搭建 本篇文章只针对品优购第一天使用 IDEA 搭建 ...
- 品优购商城项目（一）mybatis逆向工程
第一阶段 dubboX和mybatis逆向工程 用了四天时间才完成品优购项目前两天的任务. 1.其中主要遇到的坑就是zookeeper服务消费者无法调用的问题.造成这个问题的主要原因就是忽略了dubb ...
随机推荐
- maven-3.6.1
1.下载 cd /opt/ wget https://mirrors.tuna.tsinghua.edu.cn/apache/maven/maven-3/3.6.1/binaries/apache-m ...
- 显示屏display的API
display是代表25个led阵列显示屏的对象,包括以下的功能方法 # 获取(x,y)灯的亮度. 从 0 (不亮) to 9 (最亮). display.get_pixel(x, y) # 设置(x ...
- 科大讯飞语音芯片xfs5152CE，分享遇到的一些坑
首先 芯片手册的I2C地址是写地址,是8位的,真正的地址是7位地址,应该是0x40,最低位是读写位,读置1,为0x81,写置0,为0x80. 如果是模拟I2C倒无所谓,最坑的是我用的是寄存器,所以必须 ...
- CentOS7安装Node_exporter(二进制)
一.概述 Node_exporter是可以在* Nix和Linux系统上运行的计算机度量标准的导出器.Node_exporter 主要用于暴露 metrics 给 Prometheus,其中 metr ...
- vue日历/日程提醒/html5本地缓存
先上图 功能: 1.上拉日历折叠,展示周 2.左右滑动切换月 2.“今天”回到今天:“+”添加日程 3.localStorage存储日程 index,html <body> <div ...
- IDEA连接MySQL数据库报错08001
今天在使用IDEA时连接数据库发生错误,所以用其自带的尝试连接得到如下错误:Connection to test@127.0.0.1 failed.[08001] Could not create c ...
- .Net Core2.2 在IIS发布
.Net Core应用发布到IIS主要是如下的三个步骤: (1)在Windows Server上安装 .Net Core Hosting Bundle (2)在IIS管理器中创建IIS站点 (3)部署 ...
- Unity PhysicsScene测试
应该是unity 2018.3中加入的功能,对象可以放置于不同的物理场景中. 一个Scene对应一个物理场景(PhysicsScene),若想放入独立的物理场景测试创建一个Scene即可.见下图gif ...
- Java IO---字节流和字符流
一.IO流简介 流 流是一个抽象概念,Java程序和外部设备(可以是硬盘上的文件,也可以是网络设备)之间的输入输出操作是基于流的. 流就好比水管中的水流,具有流入和流出,类比数据的输入和输出. Jav ...
- Maven中 jar包冲突原理与解决办法
Maven中jar包冲突是开发过程中比较常见而又令人头疼的问题,我们需要知道 jar包冲突的原理,才能更好的去解决jar包冲突的问题.本文将从jar包冲突的原理和解决两个方面阐述Maven中jar包冲 ...