品优购 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 ...
随机推荐
- [转帖]统一操作系统 UOS 龙芯版上线
统一操作系统 UOS 龙芯版上线 看评论很有必要 搞一波 深度的操作系统了https://www.oschina.net/news/112065/chinauos-with-loongson?p=4 ...
- idea 本地调试，修改代码，代码自动生效
修改1: 修改2: ctrl+shift+a 弹出页面中搜索“registry” 修改3:修改configerations
- 『Tree nesting 树形状压dp 最小表示法』
Tree nesting (CF762F) Description 有两个树 S.T,问 S 中有多少个互不相同的连通子图与 T 同构.由于答案 可能会很大,请输出答案模 1000000007 后的值 ...
- Azkaban 3.x 编译及部署
一.Azkaban 源码编译 1.1 下载并解压 Azkaban 在 3.0 版本之后就不提供对应的安装包,需要自己下载源码进行编译. 下载所需版本的源码,Azkaban 的源码托管在 GitHub ...
- Linux(二)各种实用命令
继续Linux命令学习,没有什么捷径,每个命令都去敲几遍就熟悉了,第二篇学习的是一些比较实用类的命令,主要是从开发的角度进行学习,并不深入,话不多说,开始! 一.系统管理类 1.1 stat --st ...
- 在linux上安装elasticsearch简称ES 简单介绍安装步骤
1.简介 Elasticsearch 是一个分布式可扩展的实时搜索和分析引擎,一个建立在全文搜索引擎 Apache Lucene(TM) 基础上的搜索引擎.当然 Elasticsearch 并不仅仅是 ...
- kafka集群安全化之启用kerberos与acl
一.背景 在我们部署完kafka之后,虽然我们已经可以“肆意”的用kafka了,但是在一个大公司的实际生产环境中,kafka集群往往十分庞大,每个使用者都应该只关心自己所负责的Topic,并且对其他人 ...
- fail fast和fail safe策略
优先考虑出现异常的场景,当程序出现异常的时候,直接抛出异常,随后程序终止 import java.util.ArrayList; import java.util.Collections; impor ...
- 常用 Git 命令汇总
Git 命令汇总 1 Git 的一些通用术语 1.1 Git 的几个区 1.2 如何标识 Git 的某次提交 2 Git 配置 2.1 配置 2.2 读取配置 2.3 与 Beyond Compare ...
- 颜色rgba和16进制
今天阅读代码的时候看到了一个实现颜色渐变的效果,不同于以往使用函数实现的颜色渐变,这个是规律的递增rgba里面的几个参数完成的,看起来就像是等差数列一样.没想到还能这样来,简单的了解了一下 rgba的 ...