品优购 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 ...
随机推荐
- docker 学习操作记录 5
记录5 * Overheard at KubeCon: "microk8s.status just blew my mind". https://microk8s.io/docs/ ...
- C#读写设置修改调整UVC摄像头画面-焦点
有时,我们需要在C#代码中对摄像头的焦点进行读和写,并立即生效.如何实现呢? 建立基于SharpCamera的项目 首先,请根据之前的一篇博文 点击这里 中的说明,建立基于SharpCamera的摄像 ...
- C# vb .NET读取识别条形码线性条码code128
code128是比较常见的条形码编码规则类型的一种.如何在C#,vb等.NET平台语言里实现快速准确读取该类型条形码呢?答案是使用SharpBarcode! SharpBarcode是C#快速高效.准 ...
- 使用MHA实现MySQL主从复制高可用
一.MHA简介 MHA(Master High Availability)目前在MySQL高可用方面是一个相对成熟的解决方案,它由日本DeNA公司的youshimaton(现就职于Fac ...
- 物联网学习笔记三：物联网网关协议比较：MQTT 和 Modbus
物联网学习笔记三:物联网网关协议比较:MQTT 和 Modbus 物联网 (IoT) 不只是新技术,还是与旧技术的集成,其关键在于通信.可用的通信方法各不相同,但是,各种不同的协议在将海量“事物”连接 ...
- 阿里和Google的JAVA开发规约
<阿里 JAVA开发规约> 阿里巴巴Java开发手册终极版v1.3.0.pdf 出处:github地址:https://github.com/alibaba/p3c <Google ...
- CSS揭秘-半透明边框与多重边框
场景一: 实现半透明边框: 由于CSS样式的默认行为,背景色的渲染范围是 content+padding+border. 半透明边框被主调色影响, 实现的效果为 解决方案: 使用backgroun ...
- XSS挑战之旅---游戏通关攻略
最近发现一个有趣的XSS闯关小游戏,游戏的作者是先知社区的大佬Mramydnei,喜欢XSS的大家可以一起来学习交流. 现在我把自己在前面的十八关里面的闯关过程记录一下,大神绕行,我是菜鸟,大家可以一 ...
- 常用模块 - hashlib模块
一.简介 Python的hashlib提供了常见的摘要算法,如MD5.SHA1.SHA224.SHA256.SHA384.SHA512等算法. 什么是摘要算法呢?摘要算法又称哈希算法.散列算法.它通过 ...
- 11、多行文本最后一行显示省略号并截取文本字数（vue）
1.首先通过css实现多行文本显示省略号: { height: 45px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-li ...