品优购 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 ...
随机推荐
- Python【每日一问】18
问: [基础题]:请解释新式类跟经典类,并说明它们的区别[提高题]:请解释Python垃圾回收机制 答: [基础题]:请解释新式类跟经典类,并说明它们的区别 1.新式类都是继承内置 object 对象 ...
- 利用分析洞察力来改进Sitecore内容编辑过程
本文旨在增强内容作者的体验; 利用富有洞察力的数据为编辑过程增添真正的价值. 内容作者的日常生活是忙碌的.从一页跳到另一页,进行修改或创建全新的领域.任务的优先顺序由谁来确定?通常首先那些呼喊最响的人 ...
- Java的多路分支代码，感觉有点意思
/** * @Author hty * @Date 2019-12-16 16:39 * @Version 1.0 */ import java.util.Random; // 比赛结果 enum O ...
- 简明 Java 错误处理机制
用个最简单的例子来展示为什么需要错误处理,以及怎么用. import java.io.FileInputStream; import java.io.FileNotFoundException; pu ...
- python turtle画花
turtle是一个功能强调大的绘图的库,可以用来绘制各种所需要的图案,但是在使用时需要计算好角度等一系列的问题. 代码(源自<Python语言程序设计>)如下: 运行结果:
- spring Aop切面中的@Before @Around等执行顺序与请求参数统一解码
1.背景 在实际开发中,我可能会对请求接口做统一日志输出,或者统一参数解析,验签,统一响应加密等,通常会用到aop,实际案例如下 2.代码 package com.qianxingniwo.log; ...
- C# Winform控件字体大小自适应
using System.Collections.Generic; using System.Drawing; using System.Windows.Forms; namespace WGClie ...
- swiper4基础
这段时间在公司实习做前端,感觉前端没学习到很多前端框架,接口那些都是写好的,只需要调用就好,感觉没什么好记的,唯一觉得有必要记的就是swiper轮播了,在前端做网站的时候经常用到swiper做公告,图 ...
- Spring Security 解析(五) —— Spring Security Oauth2 开发
Spring Security 解析(五) -- Spring Security Oauth2 开发 在学习Spring Cloud 时,遇到了授权服务oauth 相关内容时,总是一知半解,因此决 ...
- python基础04--list,cou,dict
1.1 列表list 1.列表可以完成大多数集合类的数据结构实现.列表中元素的类型可以不相同,它支持数字,字符串,列表,元组,集合,字典 2.列表是有序的, 可以索引,切片 3.List中的元素是可以 ...