品优购 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 ...
随机推荐
- Python3注解+可变参数实现
一.说明 1.1 关于注解 关于注解这个东西,最早是在大学学java的时候经常会看到某些方法上边@override之类的东西,一方面不知道其作用但另一方面似乎去掉也没什么影响,所以一直都不怎么在意. ...
- python 计算列表内容出现次数
"""python 计算列表内容出现次数""" #方法一: l = ['a','a','b','c','d','b','b','b'] te ...
- Reliable Multicast Programming（PGM）协议
Reliable Multicast Programming (PGM)实际通用可靠多播协议,在某种程度上保证多播的可靠性.是IP上层协议,和TCP还有UDP同级,工作在传输层. 在组播传输视频项目中 ...
- C语言输入带空格的字符串
参考:https://blog.csdn.net/vincemar/article/details/78750435 因为: scanf("%s",str); 遇到空格就停止接收后 ...
- Python 文件编码问题解决
最近使用python操作文件,经常遇到编码错误的问题,例如: UnicodeDecodeError: 'utf-8' codec can't decode byte 0xbe in position ...
- - Permission 运行时权限 总结 翻译 MD
目录 目录 对运行时权限的一些理解 运行时权限使用案例 开源库:PermissionsDispatcher 注解 使用案例 使用步骤 测试代码 自动生成的类 官方文档:请求权限 Add permiss ...
- 示例：WPF仿制OSK做的系统键盘和数字键盘
原文:示例:WPF仿制OSK做的系统键盘和数字键盘 一.目的:在应用osk.exe系统键盘时遇到很多不方便,比如有些系统调用不出来等问题,由此开发了一个系统键盘仿制osk 二.实现功能 1.目前实现大 ...
- C# 多维数组 交错数组的区别，即 [ , ] 与 [ ][ ]的区别 （转载）
多维数组的声明 在声明时,必须指定数组的长度,格式为 type [lenght ,lenght ,lengh, ... ] , ]; 或声明时即赋值,由系统推断长度 int [,] test1 = { ...
- C#读写修改设置调整UVC摄像头画面-全景
有时,我们需要在C#代码中对摄像头的全景进行读和写,并立即生效.如何实现呢? 建立基于SharpCamera的项目 首先,请根据之前的一篇博文 点击这里 中的说明,建立基于SharpCamera的摄像 ...
- docker学习之路-nginx镜像(翻译)
本篇来自https://hub.docker.com/_/nginx/?tab=description 它是docker hub上nginx的官方网站,上面有关于nginx的使用描述等.从这里你可以找 ...