集腋成裘-06-angularJS -angular_02
2024/5/7 14:45:36
1.0 选项卡
其中涉及到了三目运算符号;
<!DOCTYPE html> <html ng-app="test"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="../Scripts/angular.min.js?version=<%=VersionNo%>" "></script><script src="../Scripts/angular-route.min.js"></script><style>#div input {background: #ccc;}#div input.active {background: #ffd800;}#div div {width:300px;height:300px;background:#ccc;border:1px solid black;}</style><script>var app = angular.module('test', []);app.controller('cont1', function ($scope) {$scope.now = 0;$scope.arr = [{ name: '电视', content: "电视内容" }, { name: '电影', content: "电影内容" }, { name: '音乐', content: "音乐内容" }];$scope.fn = function (n) {$scope.now = n;}});</script> </head> <body ng-controller="cont1"><div id="div"><input ng-repeat="v in arr" type="button" value="{{v.name}}" class="{{now==$index?'active':''}}" ng-click="fn($index)"><div ng-repeat="v in arr" ng-show="now==$index">{{v.content}}</div></div> </body> </html>
<!DOCTYPE html> <html lang="en" ng-app="test"> <head><meta charset="UTF-8"><title>Tab 标签</title><style>body {margin: 0;padding: 0;background-color: #F7F7F7;}.tabs {width: 400px;margin: 30px auto;background-color: #FFF;border: 1px solid #C0DCC0;box-sizing: border-box;}.tabs nav {height: 40px;text-align: center;line-height: 40px;overflow: hidden;background-color: #C0DCC0;display: flex;}nav a {display: block;width: 100px;border-right: 1px solid #FFF;color: #000;text-decoration: none;}nav a:last-child {border-right: 0 none;}nav a.active {background-color: #9BAF9B;}.cont {overflow: hidden;/*display: none;*/}.cont ol {line-height: 30px;}</style><script src="../Scripts/angular.min.js"></script><script src="../Scripts/angular-route.min.js"></script><script>var app = angular.module('test', []);app.controller('cont1', function ($scope) {$scope.titles = [{ id: 'local', name: '国内新闻' }, { id: 'global', name: '国际新闻' }, { id: 'sports', name: '体育新闻' }, { id: 'funny', name: '娱乐新闻' }];$scope.changeTab = changeTab;$scope.type = "local";function changeTab(type) {$scope.type = type;};});</script> </head> <body><div class="tabs" ng-controller="cont1"><nav><a href="javascript:;" ng-repeat="title in titles" ng-cloak ng-click="changeTab(title.id)" ng-class="{active: type==title.id}">{{title.name}}</a></nav><div ng-switch on="type"><section class="cont" ng-switch-when="local"><ol><li>我是国内新闻</li><li>河南再次发生矿难，死伤人数超砖石</li><li>南方大旱，农作物减产绝收面积上亩</li></ol></section><section class="cont" ng-switch-when="global"><ol><li>我是国际新闻</li><li>河南再次发生矿难，死伤人数超砖石</li><li>南方大旱，农作物减产绝收面积上亩</li></ol></section><section class="cont" ng-switch-when="sports"><ol><li>我是体育新闻</li><li>河南再次发生矿难，死伤人数超砖石</li><li>南方大旱，农作物减产绝收面积上亩</li></ol></section><section class="cont" ng-switch-when="funny"><ol><li>我是娱乐新闻</li><li>河南再次发生矿难，死伤人数超砖石</li><li>南方大旱，农作物减产绝收面积上亩</li></ol></section></div></div><script></script> </body> </html>
1.1 监视器
<!DOCTYPE html> <html ng-app="test"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="../Scripts/angular.min.js?version=<%=VersionNo%>" "></script><script src="../Scripts/angular-route.min.js"></script><script>var app = angular.module('test', []);app.controller('cont1', function ($scope) {$scope.arr = [12,13];$scope.addEnum = function (n) {$scope.arr.push(15);}$scope.$watch('arr', function () {alert('深度监视,第三个参数需要赋值为True')},true)});</script> </head> <body ng-controller="cont1"><div id="div"><input type="button" value="添加" ng-click="addEnum()"><div>{{arr}}</div></div> </body> </html>
1.2 定时器
<!DOCTYPE html> <html ng-app="test"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="../Scripts/angular.min.js?version=<%=VersionNo%>" "></script><script src="../Scripts/angular-route.min.js"></script><script>var app = angular.module('test', []);app.controller('cont1', function ($scope, $interval) {$scope.a = 0;var timer = $interval((function () {$scope.a++;if ($scope.a == 100) {$interval.cancel(timer);//关闭定时器 }}),50)});</script> </head> <body ng-controller="cont1"><div id="div"><div>{{a}}</div></div> </body> </html>
1.3 跨域请求
获取到百度的搜索框数据
<!DOCTYPE html> <html ng-app="test"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="../Scripts/angular.min.js?version=<%=VersionNo%>" "></script><script src="../Scripts/angular-route.min.js"></script><script>var app = angular.module('test', []);app.controller('cont1', function ($scope, $http) {$scope.arr = [];$scope.str = "";$scope.$watch('str', function () {$http.jsonp('http://suggestion.baidu.com', { params: { wd: $scope.str, cb: 'JSON_CALLBACK' } }).success(function (json) {$scope.arr = json.s;}).error(function () {alert("失败了");});},true)});</script> </head> <body ng-controller="cont1"><div id="div"><input type="text" ng-model="str"><ul><li ng-repeat="s in arr">{{s}}</li></ul></div> </body> </html>
1.4 过滤器(自定义过滤器)
上一篇中有说过系统中自带的一些过滤器,但是多数情况下自带的过滤器不能满足实际业务需求,这时候我们就需要自定义一些过滤器.
<!DOCTYPE html> <html ng-app="test"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="../Scripts/angular.min.js?version=<%=VersionNo%>" "></script><script src="../Scripts/angular-route.min.js"></script><script>var app = angular.module('test', []);app.controller('cont1', function ($scope) {$scope.arr = [{ name: '键盘', count: 20, price: 50 }, { name: '鼠标', count: 10, price: 30 }, { name: '苹果', count: 30, price: -5 }];});//格式化 app.filter('名字',function(){}//)//注意filter放置的位置app.filter('my_filter', function () {var a = "￥"; //初始化return function (input) {if (input < 0) {return a+'(' + (-input) + ')';} else {return a+input;}}});</script> </head> <body ng-controller="cont1"><ul><li ng-repeat="item in arr"> 商品:{{item.name}} 价格:{{item.price|my_filter}}</li></ul> </body> </html>
过滤器可以传参数 return function (input,arg) {}
<!DOCTYPE html> <html ng-app="test"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="../Scripts/angular.min.js?version=<%=VersionNo%>" "></script><script src="../Scripts/angular-route.min.js"></script><script>var app = angular.module('test', []);app.controller('cont1', function ($scope) {$scope.arr = [{ name: '键盘', count: 20, price: 50 }, { name: '鼠标', count: 10, price: 30 }, { name: '苹果', count: 30, price: -5 }];});//格式化 app.filter('名字',function(){}//)//注意filter放置的位置app.filter('my_filter', function () {return function (input,arg) {if (input < 0) {return arg + '(' + (-input) + ')';} else {return arg + input;}}});</script> </head> <body ng-controller="cont1"><ul><li ng-repeat="item in arr"> 商品:{{item.name}} 价格:{{item.price|my_filter:"￥"}}</li></ul> </body> </html>
1.5 指令
<!DOCTYPE html> <html ng-app="test"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="../Scripts/angular.min.js?version=<%=VersionNo%>" "></script><script src="../Scripts/angular-route.min.js"></script><script>var app = angular.module('test', []);//指令app.directive('elementnoreplace', function () {var json = {restrict: 'E',template: '<span>我是element,replace为false</span>'}return json;});app.directive('elementreplace', function () {var json = {restrict: 'E',template: '<span>我是element,replace为True</span>',replace:true}return json;});</script> </head> <body><div><elementnoreplace></elementnoreplace></div> <div><elementreplace></elementreplace></div> </body> </html>
<!DOCTYPE html> <html ng-app="test"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="../Scripts/angular.min.js?version=<%=VersionNo%>" "></script><script src="../Scripts/angular-route.min.js"></script><script>var app = angular.module('test', []);//指令- Elementapp.directive('elementnoreplace', function () {var json = {restrict: 'E',template: '<span>我是element,replace为false</span>'}return json;});app.directive('elementreplace', function () {var json = {restrict: 'E',template: '<span>我是element,replace为True</span>',replace:true}return json;});//指令- Attributeapp.directive('attributenoreplace', function () {var json = {restrict: 'A',template: '<span>我是attribute,replace为false</span>'}return json;});app.directive('attributereplace', function () {var json = {restrict: 'A',template: '<span>我是attribute,replace为True</span>',replace: true}return json;});</script> </head> <body><div><elementnoreplace></elementnoreplace></div> <div><elementreplace></elementreplace></div><div attributenoreplace=""></div><div attributereplace=""></div> </body> </html>
<!DOCTYPE html> <html ng-app="test"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="../Scripts/angular.min.js?version=<%=VersionNo%>" "></script><script src="../Scripts/angular-route.min.js"></script><script>var app = angular.module('test', []);//指令- Elementapp.directive('elementnoreplace', function () {var json = {restrict: 'E',template: '<span>我是element,replace为false</span>'}return json;});app.directive('elementreplace', function () {var json = {restrict: 'E',template: '<span>我是element,replace为True</span>',replace:true}return json;});//指令- Attributeapp.directive('attributenoreplace', function () {var json = {restrict: 'A',template: '<span>我是attribute,replace为false</span>'}return json;});app.directive('attributereplace', function () {var json = {restrict: 'A',template: '<span>我是attribute,replace为True</span>',replace: true}return json;});//指令- classapp.directive('classnoreplace', function () {var json = {restrict: 'C',template: '<span>我是class,replace为false</span>'}return json;});app.directive('classreplace', function () {var json = {restrict: 'C',template: '<span>我是class,replace为True</span>',replace: true}return json;});</script> </head> <body><div><elementnoreplace></elementnoreplace></div> <div><elementreplace></elementreplace></div><div attributenoreplace=""></div><div attributereplace=""></div><div class="classnoreplace"></div><div class="classreplace"></div> </body> </html>
<!DOCTYPE html> <html ng-app="test"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="../Scripts/angular.min.js?version=<%=VersionNo%>" "></script><script src="../Scripts/angular-route.min.js"></script><script>var app = angular.module('test', []);//指令- Elementapp.directive('elementnoreplace', function () {var json = {restrict: 'E',template: '<span>我是element,replace为false</span>'}return json;});app.directive('elementreplace', function () {var json = {restrict: 'E',template: '<span>我是element,replace为True</span>',replace:true}return json;});//指令- Attributeapp.directive('attributenoreplace', function () {var json = {restrict: 'A',template: '<span>我是attribute,replace为false</span>'}return json;});app.directive('attributereplace', function () {var json = {restrict: 'A',template: '<span>我是attribute,replace为True</span>',replace: true}return json;});//指令- classapp.directive('classnoreplace', function () {var json = {restrict: 'C',template: '<span>我是class,replace为false</span>'}return json;});app.directive('classreplace', function () {var json = {restrict: 'C',template: '<span>我是class,replace为True</span>',replace: true}return json;});//指令- commentapp.directive('commentreplace', function () {var json = {restrict: 'M',template: '<span>我是comment,replace为false</span>',replace: true}return json;});</script> </head> <body><div><elementnoreplace></elementnoreplace></div> <div><elementreplace></elementreplace></div><div attributenoreplace=""></div><div attributereplace=""></div><div class="classnoreplace"></div><div class="classreplace"></div><br /><!-- directive:commentreplace --> </body> </html>
<!DOCTYPE html> <html ng-app="test"> <head><meta charset="UTF-8"><title>添加X号</title><script src="../js/angular.js"></script><script type="text/javascript">var app = angular.module("test",[]);app.directive('myclose',function(){var json ={restrict:'A',template:'<span ng-transclude></span><a href="javascript:;">{{5*12}}X</a>',transclude:true};return json;})</script> </head> <body><ul><li myclose>测试1</li><li myclose="">测试1</li></ul> </body> </html>
<!DOCTYPE html> <html ng-app="test"> <head><meta charset="UTF-8"><title>显示更多</title><style>.more{width:300px;height:60px;line-height: 20px;overflow: hidden;border:1px solid black;}.more2{width:300px;line-height: 20px;overflow: hidden;border:1px solid black;}</style><script src="../js/angular.js"></script><script type="text/javascript">var app = angular.module("test",[]);app.controller('main',function(){$scope.show=false;});app.directive('angshowmore',function(){var json ={restrict:'E',template:' <div class="{{show?\'more2\':\'more\'}}" ><a href="javascript:;" ng-click="show=!show">显示更多</a><span ng-transclude></span></div>',transclude:true};return json;})</script> </head> <body><angshowmore> 永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹；又有清流激湍，映带左右，引以为流觞曲水，列坐其次。虽无丝竹管弦之盛，一觞一咏，亦足以畅叙幽情。是日也，天朗气清，惠风和畅，仰观宇宙之大，俯察品类之盛，所以游目骋怀，足以极视听之娱，信可乐也。 夫人之相与，俯仰一世，或取诸怀抱，悟言一室之内；或因寄所托，放浪形骸之外。虽趣舍万殊，静躁不同，当其欣于所遇，暂得于己，快然自足，不知老之将至。及其所之既倦，情随事迁，感慨系之矣。向之所欣，俯仰之间，已为陈迹，犹不能不以之兴怀。况修短随化，终期于尽。古人云：“死生亦大矣。”岂不痛哉！(不知老之将至 一作：曾不知老之将至) 每览昔人兴感之由，若合一契，未尝不临文嗟悼，不能喻之于怀。固知一死生为虚诞，齐彭殇为妄作。后之视今，亦犹今之视昔。悲夫！故列叙时人，录其所述，虽世殊事异，所以兴怀，其致一也。后之览者，亦将有感于斯文。 收起</angshowmore></body> </html>
<!DOCTYPE html> <html ng-app="test"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="../Scripts/angular.min.js?version=<%=VersionNo%>" "></script><script src="../Scripts/angular-route.min.js"></script><script>var app = angular.module('test', []);app.controller('cont1', function ($scope) {$scope.arr = ['app', 'apple', 'now', 'new', 'snow'];$scope.str = "";});app.directive('dropdownlist', function () {return {restrict: 'E',template: ' <input type="text" ng-model="str" />\<ul>\<li ng-repeat="item in arr" ng-show="item.indexOf(str)!=-1">{{item}}</li>\</ul>',transclude:true}});</script> </head> <body ng-controller="cont1"><dropdownlist></dropdownlist> </body> </html>
2 模块化
2.0 模块之间相互依赖
<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="../Scripts/angular.min.js"></script><script src="../Scripts/angular-route.min.js"></script><script>//链式编程angular.module('mod1', []).controller('con1', function ($scope) { $scope.a = 5; }).filter('fil', function () { return function (input) { return input + 20 } });var app2 = angular.module('mod2', []);app2.controller('con2', function ($scope) {$scope.b = 50;});app2.filter('fil', function () {return function (input) {return input + "abc";}});angular.module('mod3', ['mod2', 'mod1']);</script> </head> <body ng-app="mod3"><p>链式编程+过滤器同名</p><div ng-controller="con1"> {{a|fil}} </div><div ng-controller="con2"> {{b|fil}} </div></body> </html>
3 依赖注入
3.1 factory
格式: app.factory('名字',function(){return 内容;})
<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="../Scripts/angular.min.js"></script><script src="../Scripts/angular-route.min.js"></script><script>var app = angular.module('test', []);app.factory('fac', function () {return {fn: function (num1, num2) {return num1 + num2;}}});app.controller('cont', function ($scope, fac) {alert(fac.fn(12,55));})</script> </head> <body ng-app="test"><div ng-controller="cont"></div> </body> </html>
3.2 provider
格式:app.provider("name",function(){this.$get=function(){ return 内容};})
<!DOCTYPE html> <html ng-app="test"> <head><meta charset="UTF-8"><title>Provider</title><script src="../js/angular.js"></script><script type="text/javascript">var app = angular.module("test",[]);app.provider("testPro",function(){this.$get=function(){return {fn:function(num1,num2){return num1+num2;}};};});app.controller('cont1',function($scope,testPro){//alert(JSON.stringify(testPro));alert(testPro.fn(12,23));});</script> </head> <body ng-controller="cont1"></body> </html>
3.3 service
格式:app.service("name",function(){this...;})
<!DOCTYPE html> <html ng-app="test"> <head><meta charset="UTF-8"><title>Service</title><script src="../js/angular.js"></script><script type="text/javascript">var app = angular.module("test",[]);app.service("testSer",function(){ this.fn=function(num1,num2){return num1+num2;}; });app.controller('cont1',function($scope,testSer){alert(testSer.fn(12,23));});</script> </head> <body ng-controller="cont1"></body> </html>
<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>service</title><script src="../Scripts/angular.min.js"></script><script src="../Scripts/angular-route.min.js"></script><script>var app = angular.module("test", []);app.service("testSer", ['$filter', function ($filter) {var now = new Date;//过滤器也可以这样使用var date = $filter('date');//向对象上添加具体方法this.now = function () {return date(now, 'yyyy-MM-dd hh:mm:ss');}//添加具体方法this.sayHello = function () {alert("hello world");}}]);app.controller('cont1', function ($scope, testSer) {$scope.now = testSer.now();testSer.sayHello();});</script> </head> <body ng-app="test"><div ng-controller="cont1"> {{now}} </div> </body> </html>
3.4 constant
<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>常量</title><script src="../Scripts/angular.min.js"></script><script src="../Scripts/angular-route.min.js"></script><script>var app = angular.module('test', []);app.constant('const1', '张三');app.controller('cont', function ($scope, const1) {alert(const1);})</script> </head> <body ng-app="test"><div ng-controller="cont"> </div> </body> </html>
3.5 value
<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>变量</title><script src="../Scripts/angular.min.js"></script><script src="../Scripts/angular-route.min.js"></script><script>var app = angular.module('test', []);app.value('val1', '张三');app.controller('cont', function ($scope, val1) {alert(val1);})</script> </head> <body ng-app="test"><div ng-controller="cont"> </div> </body> </html>
4:decorator 装饰(只执行一次)
4.1 factory-decorator
<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>装饰-factory</title><script src="../Scripts/angular.min.js"></script><script src="../Scripts/angular-route.min.js"></script><script>var app = angular.module('test', []);app.factory('fac', function () {return {a: 12,b:5};});app.decorator('fac', function ($delegate) {$delegate.c = 99;return $delegate;});app.controller('cont', function ($scope, fac) {alert(fac.c);//alert('test'.a); })</script> </head> <body ng-app="test"><div ng-controller="cont"> </div> </body> </html>
4.2 provider-decorator
<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>装饰-factory</title><script src="../Scripts/angular.min.js"></script><script src="../Scripts/angular-route.min.js"></script><script>var app = angular.module("test", []);app.provider("testPro", function () {this.$get = function () {return {a: 12,b: 35};};});app.decorator("testPro", function ($delegate) {$delegate.c = 55;return $delegate;});app.controller('cont1', function ($scope, testPro) {alert(testPro.c);});</script> </head> <body ng-app="test"><div ng-controller="cont1"> </div> </body> </html>
4.3 service-decorator
<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>装饰-factory</title><script src="../Scripts/angular.min.js"></script><script src="../Scripts/angular-route.min.js"></script><script>var app = angular.module("test", []);app.service("testSer", function(){ return {a: 12,b:13}});app.decorator("testSer", function ($delegate) {$delegate.c = 55;return $delegate;});app.controller('cont1', function ($scope, testSer) {alert(testSer.c);});</script> </head> <body ng-app="test"><div ng-controller="cont1"> </div> </body> </html>
4.4 constant-decorator 不可修饰,会报错的
<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>常量-不可装饰</title><script src="../Scripts/angular.min.js"></script><script src="../Scripts/angular-route.min.js"></script><script>var app = angular.module('test', []);app.constant('const1', '张三');app.decorator('const1', function ($delegate) {return $delegate + '常量不可装饰';});app.controller('cont', function ($scope, const1) {alert(const1);})</script> </head> <body ng-app="test"><div ng-controller="cont"> </div> </body> </html>
4.5 value-decorator
<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>变量</title><script src="../Scripts/angular.min.js"></script><script src="../Scripts/angular-route.min.js"></script><script>var app = angular.module('test', []);app.value('val1', '30');app.decorator('val1', function ($delegate) {return $delegate+'修改后';});app.controller('cont', function ($scope, val1) {alert(val1);});</script> </head> <body ng-app="test"><div ng-controller="cont"> </div> </body> </html>
5 数据共享
5.1 父子级数据共享
<!DOCTYPE html> <html ng-app="test"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="../Scripts/angular.min.js?version=<%=VersionNo%>" "></script><script src="../Scripts/angular-route.min.js"></script><script>var app = angular.module('test', []);app.controller('cont1', function ($scope,$timeout) {$scope.a = 12;$timeout(function () {alert("父级" + $scope.a);},100);});app.controller('cont2', function ($scope) {$scope.a++;alert('子级' + $scope.a);});</script> </head> <body><div ng-controller="cont1"><div ng-controller="cont2">这个会先后弹出"子级13"+"父级12";说明:$scope这种继承,不能叫同步,只能叫复制</div></div> </body> </html>
5.2 消息机制(事件)
$scope.$emit("名字",数据)触发(自己+父级); $scope.$broadcase("名字",数据)广播(自己+子级)
$scope.$on("名字",function(event,data)) 接收
<!DOCTYPE html> <html ng-app="test"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>消息机制</title><script src="../Scripts/angular.min.js?version=<%=VersionNo%>" "></script><script src="../Scripts/angular-route.min.js"></script><script>var app = angular.module('test', []);app.controller('cont1', function ($scope) {$scope.fn = function () {$scope.$broadcast('testevent', { a: 12, b: 5 });//发射 };});app.controller('cont2', function ($scope) {$scope.$on('testevent', function (event, data) {alert('data值:'+data.a);//接收 });});</script> </head> <body><div ng-controller="cont1"><a href="javascript:;" ng-click="fn()">触发事件</a><div ng-controller="cont2"></div></div> </body> </html>
5.3 无关的controller
即:通过factory.provider.service等实现
<!DOCTYPE html> <html ng-app="test"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无关controller</title><script src="../Scripts/angular.min.js?version=<%=VersionNo%>" "></script><script src="../Scripts/angular-route.min.js"></script><script>var app = angular.module('test', []);app.factory("fac", function () {return {a:0}})app.controller('cont1', function ($scope,fac) {fac.a = 12;});app.controller('cont2', function ($scope,fac) {alert(fac.a);});</script> </head> <body><div ng-controller="cont1"><div ng-controller="cont2"></div></div> </body> </html>
5.4 Route
5.4.1 Route的version 1.0
<!DOCTYPE html> <html ng-app="test"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Router</title><script src="../Scripts/angular.min.js?version=<%=VersionNo%>" "></script><script src="../Scripts/angular-route.min.js"></script><script>var app = angular.module('test', ["ngRoute"]);app.controller('cont1', function ($scope) {});app.config(function ($routeProvider) {$routeProvider.when('/user', { template: '<h2>用户中心</h2>' }).when('/article', { template: '<p>aaa</p>' }).when('/setting', { template: '直接写汉字' });});</script> </head> <body ng-controller="cont1"><div style="display:none"><span>1:引用js angular+angular-route</span><span>2:在module中添加引用</span><span>3:添加一个config配置 </span></div><a href="#/user">用户中心</a><a href="#/article">文章信息</a><a href="#/setting">配置信息</a><ng-view></ng-view> </body> </html>
5.4.2 通过templateUrl引用其他模板
<!DOCTYPE html> <html ng-app="test"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Router</title><script src="../Scripts/angular.min.js?version=<%=VersionNo%>" "></script><script src="../Scripts/angular-route.min.js"></script><script src="../Scripts/controller/user.js"></script><script>var app = angular.module('test', ["ngRoute","userModule"]);app.controller('cont1', function ($scope) {});app.config(function ($routeProvider) {$routeProvider.when('/user', {templateUrl: './views/user.html',controller: 'userController'}).when('/article', { template: '<p>aaa</p>' }).when('/setting', { template: '直接写汉字' });});</script> </head> <body ng-controller="cont1"><div style="display:none"><span>1:引用js angular+angular-route</span><span>2:在module中添加引用</span><span>3:添加一个config配置 </span><span>通过使用templateUrl</span><span>4:创建一个views文件夹,用于存放视图</span><span>5:同时user.html中也需要controller,所以为了保证主页面代码的简洁,在引入一个自定义的js--</span></div><a href="#/user">用户中心</a><a href="#/article">文章信息</a><a href="#/setting">配置信息</a><ng-view></ng-view> </body> </html>
<div><h2>用户中心</h2><ul><li>用户名：{{name}}</li><li>注册时间：{{regtime|date:"yyyy-MM-dd HH:mm:ss"}}</li></li>
</div> var app = angular.module('userModule', []);app.controller('userController', function ($scope) {$scope.name = '张三';$scope.regtime = 1529940007108; });
5.4.3 通过$routeParams共用一个文章模板
<!DOCTYPE html> <html ng-app="test"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Router</title><script src="../Scripts/angular.min.js?version=<%=VersionNo%>" "></script><script src="../Scripts/angular-route.min.js"></script><script src="../Scripts/controller/user.js"></script><script src="../Scripts/controller/article.js"></script><script>var app = angular.module('test', ["ngRoute", "userModule", "articleModule"]);app.controller('cont1', function ($scope) {});app.config(function ($routeProvider) {$routeProvider.when('/user', {templateUrl: './views/user.html',controller: 'userController'}).when('/article', {templateUrl: './views/article.html',controller: 'articleController'}).when('/setting', { templateUrl: 'setting.html' });});</script> </head> <body ng-controller="cont1"><div style="display:none"><span>1:引用js angular+angular-route</span><span>2:在module中添加引用</span><span>3:添加一个config配置 </span><span>通过使用templateUrl</span><span>4:创建一个views文件夹,用于存放视图</span><span>5:同时user.html中也需要controller,所以为了保证主页面代码的简洁,在引入一个自定义的js--</span><span>文章信息下面有多个模块内容;</span><span>6:可以在controller控制器中区分各个模块的内容</span></div><a href="#/user">用户中心</a><a href="#/article?type=sport">体育赛事</a><a href="#/article?type=game">游戏新闻</a><a href="#/article?type=news">热门新闻</a><a href="#/setting">配置信息</a><ng-view></ng-view><script type="text/ng-template" id="setting.html"><ul><li>aaaaa</li></ul></script> </body> </html>
<div><ul><li ng-repeat="data in arr">{{data}}</li></ul> </div>
var app = angular.module('articleModule', []);app.controller('articleController', function ($scope,$routeParams) {switch ($routeParams.type) {case 'sport':$scope.arr = ['运动新闻', '足球', '篮球'];break;case 'game':$scope.arr = ['游戏新闻', '足球', '篮球'];break;case 'news':$scope.arr = ['新闻', '足球', '篮球'];break;} });
5.4.4 延时加载
<!DOCTYPE html> <html ng-app="test"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Router</title><script src="../Scripts/angular.min.js?version=<%=VersionNo%>" "></script><script src="../Scripts/angular-route.min.js"></script><script src="../Scripts/controller/user.js"></script><script src="../Scripts/controller/article.js"></script><script>var app = angular.module('test', ["ngRoute", "userModule", "articleModule"]);app.controller('main', function ($scope) {$scope.loading = false;$scope.$on('$routeChangeStart', function () {$scope.loading = true;//alert('换页开始'); });$scope.$on('$routeChangeSuccess', function () {$scope.loading = false;//alert('换页结束'); });$scope.$on('$routeChangeError', function () {$scope.loading = false;//alert('换页失败'); });});app.config(function ($routeProvider) {$routeProvider.when('/user', {templateUrl: './views/user.html',controller: 'userController'}).when('/article', {templateUrl: './views/article.html',controller: 'articleController',resolve:{delay:function($q){var delay = $q.defer();setTimeout(function(){delay.resolve();},3000);return delay.promise;}}}).when('/setting', { templateUrl: 'setting.html' });});</script> </head> <body ng-controller="main"><div style="display:none"><span>1:引用js angular+angular-route</span><span>2:在module中添加引用</span><span>3:添加一个config配置 </span><span>通过使用templateUrl</span><span>4:创建一个views文件夹,用于存放视图</span><span>5:同时user.html中也需要controller,所以为了保证主页面代码的简洁,在引入一个自定义的js--</span><span>文章信息下面有多个模块内容;</span><span>6:可以在controller控制器中区分各个模块的内容</span><span>通过delay实现延时加载</span></div><a href="#/user">用户中心</a><a href="#/article?type=sport">体育赛事</a><a href="#/article?type=game">游戏新闻</a><a href="#/article?type=news">热门新闻</a><a href="#/setting">配置信息</a><ng-view></ng-view><script type="text/ng-template" id="setting.html"><ul><li>aaaaa</li></ul></script> </body> </html>
6.1 识别标签(尽量不要使用)
<!DOCTYPE html> <html ng-app="test"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>浏览器识别标签</title><script src="../Scripts/angular.min.js?version=<%=VersionNo%>" "></script><script src="../Scripts/angular-route.min.js"></script><script>var app = angular.module('test', []);app.controller('cont1', function ($scope,$sce) {$scope.a = $sce.trustAsHtml('<h1>我是h1标题</h1>');});</script> </head> <body ng-controller="cont1"><div ng-bind-html="a"></div></body> </html>
<!DOCTYPE html> <html ng-app="test"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>浏览器识别标签</title><script src="../Scripts/angular.min.js?version=<%=VersionNo%>" "></script><script src="../Scripts/angular-route.min.js"></script><script>var app = angular.module('test', []);app.controller('cont1', function ($scope,$sce) {$scope.a = $sce.trustAsHtml('<h1>我是h1标题</h1>');$scope.b="<h1>我是另一种方法显示</h1>"});//方法二 通过过滤器显示app.filter('showAsHtml', function ($sce) {return function (input) {return $sce.trustAsHtml(input);};});</script> </head> <body ng-controller="cont1"><div ng-bind-html="a"></div><div ng-bind-html="b|showAsHtml"></div> </body> </html>
6.2 ng-switch
<!DOCTYPE html> <html ng-app="test"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="../Scripts/angular.min.js?version=<%=VersionNo%>" "></script><script src="../Scripts/angular-route.min.js"></script><script>var app = angular.module('test', []);app.controller('cont1', function ($scope,$timeout) {$scope.items= [12,15,13,1,6,55,23,8];});</script> </head> <body><div ng-controller="cont1"><ul><li ng-repeat="item in items" ng-switch on="item"><span ng-switch-when="12">{{item}}</span></li></ul></div> </body> </html>
6.3 todoList
html, body {margin: 0;padding: 0; }button {margin: 0;padding: 0;border: 0;background: none;font-size: 100%;vertical-align: baseline;font-family: inherit;font-weight: inherit;color: inherit;-webkit-appearance: none;appearance: none;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }body {font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;line-height: 1.4em;background: #f5f5f5;color: #4d4d4d;min-width: 230px;max-width: 550px;margin: 0 auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-weight: 300; }:focus {outline: 0; }.hidden {display: none; }.todoapp {background: #fff;margin: 130px 0 40px 0;position: relative;box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),0 25px 50px 0 rgba(0, 0, 0, 0.1); }.todoapp input::-webkit-input-placeholder {font-style: italic;font-weight: 300;color: #e6e6e6; }.todoapp input::-moz-placeholder {font-style: italic;font-weight: 300;color: #e6e6e6; }.todoapp input::input-placeholder {font-style: italic;font-weight: 300;color: #e6e6e6; }.todoapp h1 {position: absolute;top: -155px;width: 100%;font-size: 100px;font-weight: 100;text-align: center;color: rgba(175, 47, 47, 0.15);-webkit-text-rendering: optimizeLegibility;-moz-text-rendering: optimizeLegibility;text-rendering: optimizeLegibility; }.new-todo, .edit {position: relative;margin: 0;width: 100%;font-size: 24px;font-family: inherit;font-weight: inherit;line-height: 1.4em;border: 0;color: inherit;padding: 6px;border: 1px solid #999;box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);box-sizing: border-box;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }.new-todo {padding: 16px 16px 16px 60px;border: none;background: rgba(0, 0, 0, 0.003);box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03); }.main {position: relative;z-index: 2;border-top: 1px solid #e6e6e6; }label[for='toggle-all'] {display: none; }.toggle-all {position: absolute;top: -55px;left: -12px;width: 60px;height: 34px;text-align: center;border: none; /* Mobile Safari */ }.toggle-all:before {content: '❯';font-size: 22px;color: #e6e6e6;padding: 10px 27px 10px 27px; }.toggle-all:checked:before {color: #737373; }.todo-list {margin: 0;padding: 0;list-style: none; }.todo-list li {position: relative;font-size: 24px;border-bottom: 1px solid #ededed; }.todo-list li:last-child {border-bottom: none; }.todo-list li.editing {border-bottom: none;padding: 0; }.todo-list li.editing .edit {display: block;width: 506px;padding: 12px 16px;margin: 0 0 0 43px; }.todo-list li.editing .view {display: none; }.todo-list li .toggle {text-align: center;width: 40px;/* auto, since non-WebKit browsers doesn't support input styling */height: auto;position: absolute;top: 0;bottom: 0;margin: auto 0;border: none; /* Mobile Safari */-webkit-appearance: none;appearance: none; }.todo-list li .toggle:after {content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>'); }.todo-list li .toggle:checked:after {content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>'); }.todo-list li label {word-break: break-all;padding: 15px 60px 15px 15px;margin-left: 45px;display: block;line-height: 1.2;transition: color 0.4s; }.todo-list li.completed label {color: #d9d9d9;text-decoration: line-through; }.todo-list li .destroy {display: none;position: absolute;top: 0;right: 10px;bottom: 0;width: 40px;height: 40px;margin: auto 0;font-size: 30px;color: #cc9a9a;margin-bottom: 11px;transition: color 0.2s ease-out; }.todo-list li .destroy:hover {color: #af5b5e; }.todo-list li .destroy:after {content: '×'; }.todo-list li:hover .destroy {display: block; }.todo-list li .edit {display: none; }.todo-list li.editing:last-child {margin-bottom: -1px; }.footer {color: #777;padding: 10px 15px;height: 20px;text-align: center;border-top: 1px solid #e6e6e6; }.footer:before {content: '';position: absolute;right: 0;bottom: 0;left: 0;height: 50px;overflow: hidden;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),0 8px 0 -3px #f6f6f6,0 9px 1px -3px rgba(0, 0, 0, 0.2),0 16px 0 -6px #f6f6f6,0 17px 2px -6px rgba(0, 0, 0, 0.2); }.todo-count {float: left;text-align: left; }.todo-count strong {font-weight: 300; }.filters {margin: 0;padding: 0;list-style: none;position: absolute;right: 0;left: 0; }.filters li {display: inline; }.filters li a {color: inherit;margin: 3px;padding: 3px 7px;text-decoration: none;border: 1px solid transparent;border-radius: 3px; }.filters li a:hover {border-color: rgba(175, 47, 47, 0.1); }.filters li a.selected {border-color: rgba(175, 47, 47, 0.2); }.clear-completed, html .clear-completed:active {float: right;position: relative;line-height: 20px;text-decoration: none;cursor: pointer; }.clear-completed:hover {text-decoration: underline; }.info {margin: 65px auto 0;color: #bfbfbf;font-size: 10px;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);text-align: center; }.info p {line-height: 1; }.info a {color: inherit;text-decoration: none;font-weight: 400; }.info a:hover {text-decoration: underline; }/*Hack to remove background from Mobile Safari.Can't use it globally since it destroys checkboxes in Firefox */ @media screen and (-webkit-min-device-pixel-ratio:0) {.toggle-all,.todo-list li .toggle {background: none;}.todo-list li .toggle {height: 40px;}.toggle-all {-webkit-transform: rotate(90deg);transform: rotate(90deg);-webkit-appearance: none;appearance: none;} }@media (max-width: 430px) {.footer {height: 50px;}.filters {bottom: 10px;} }
hr {margin: 20px 0;border: 0;border-top: 1px dashed #c5c5c5;border-bottom: 1px dashed #f7f7f7; }.learn a {font-weight: normal;text-decoration: none;color: #b83f45; }.learn a:hover {text-decoration: underline;color: #787e7e; }.learn h3, .learn h4, .learn h5 {margin: 10px 0;font-weight: 500;line-height: 1.2;color: #000; }.learn h3 {font-size: 24px; }.learn h4 {font-size: 18px; }.learn h5 {margin-bottom: 0;font-size: 14px; }.learn ul {padding: 0;margin: 0 0 30px 25px; }.learn li {line-height: 20px; }.learn p {font-size: 15px;font-weight: 300;line-height: 1.3;margin-top: 0;margin-bottom: 0; }#issue-count {display: none; }.quote {border: none;margin: 20px 0 60px 0; }.quote p {font-style: italic; }.quote p:before {content: '“';font-size: 50px;opacity: .15;position: absolute;top: -20px;left: 3px; }.quote p:after {content: '”';font-size: 50px;opacity: .15;position: absolute;bottom: -42px;right: 3px; }.quote footer {position: absolute;bottom: -40px;right: 0; }.quote footer img {border-radius: 3px; }.quote footer a {margin-left: 5px;vertical-align: middle; }.speech-bubble {position: relative;padding: 10px;background: rgba(0, 0, 0, .04);border-radius: 5px; }.speech-bubble:after {content: '';position: absolute;top: 100%;right: 30px;border: 13px solid transparent;border-top-color: rgba(0, 0, 0, .04); }.learn-bar > .learn {position: absolute;width: 272px;top: 8px;left: -300px;padding: 10px;border-radius: 5px;background-color: rgba(255, 255, 255, .6);transition-property: left;transition-duration: 500ms; }@media (min-width: 899px) {.learn-bar {width: auto;padding-left: 300px;}.learn-bar > .learn {left: 8px;} }
<!doctype html> <html lang="en" ng-app="test"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Template • TodoMVC</title><link href="style/base.css" rel="stylesheet" /><link href="style/index.css" rel="stylesheet" /><script src="../Scripts/angular.min.js?version=<%=VersionNo%>"></script><script src="../Scripts/angular-route.min.js"></script><script>var app = angular.module('test', []);app.controller('cont1', function ($scope) {//定义一个"待办事项"的数组;每当填写一行后,点击"回车"向数组中添加一条数据.$scope.todoArr = [];//已完成事项$scope.completedArr = [];//向待办事项中添加数据.$scope.addTodoList = function () {//当通过"回车键"提交数据时,向数组中添加数据,同时清空文本框内容$scope.todoArr.push({ title: $scope.todoText, flag: false });$scope.todoText = "";}//当"待办事项"中事项选中时$scope.done = function done(key) {//从待办事项中获取当前选中数据var todo = $scope.todoArr.splice(key, 1)[0];//改变选中状态//todo.flag = true;//添加到已完成 $scope.completedArr.push(todo);}//当点击删除按钮时候触发事件$scope.del = function (from, key) {//这种写法反倒是很有意思哦from.splice(key, 1);}//当"完成事项"中事项选中时$scope.unDone = function unDone(key) {//从待办事项中获取当前选中数据var todo = $scope.completedArr.splice(key, 1)[0];//改变选中状态//todo.flag = true;//添加到已完成 $scope.todoArr.push(todo);}});</script></head> <body ng-controller="cont1"><section class="todoapp"><header class="header"><h1>todos</h1><form ng-submit="addTodoList()"><input class="new-todo" placeholder="What needs to be done?" autofocus ng-model="todoText"></form></header><section class="main"><input class="toggle-all" type="checkbox"><label for="toggle-all">Mark all as complete</label><ul class="todo-list"><li ng-repeat="(key,todo) in todoArr" ng-cloak><div class="view"><input class="toggle" type="checkbox" ng-click="done(key)" ng-checked="todo.flag"><label>{{todo.title}}</label><button class="destroy" ng-click="del(todoArr,key)"></button></div><input class="edit" value="Rule the web"></li><li><h5>已完成</h5></li><li class="completed" ng-repeat="(key,comp) in completedArr" ng-cloak><div class="view"><input class="toggle" type="checkbox" ng-click="unDone(key)" ng-checked="comp.flag"><label>{{comp.title}}</label><button class="destroy" ng-click="del(completedArr,key)"></button></div><input class="edit" value="Create a TodoMVC template"></li></ul></section><footer class="footer"><span class="todo-count"><strong>{{todoArr.length}}</strong> item left</span><button class="clear-completed" ng-click="completedArr=[]">Clear completed</button></footer></section><footer class="info"><p>Double-click to edit a todo</p><p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p><p>Created by <a href="http://todomvc.com">you</a></p><p>Part of <a href="http://todomvc.com">TodoMVC</a></p></footer></body> </html>
7 配置和运行
7.1 配置块app.config
<!DOCTYPE html> <html ng-app="test"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title> </head> <body><!--雅虎14条之把js文件放置到最后--><script src="../Scripts/angular.min.js"></script><script src="../Scripts/angular-route.min.js"></script><script>var app = angular.module('test', []);app.config(['$logProvider', '$filterProvider', function ($logProvider, $filterProvider) {//通过配置--禁用掉debug功能$logProvider.debugEnabled(false);//通过配置--新增一个过滤器$filterProvider.register('capitalize', function () {//新增一个首字母大写的过滤器return function (input) {return input[0].toUpperCase() + input.slice(1);}});}]);app.controller('cont1', function ($scope, $log) {//测试配置后的结果$log.debug('debug');$scope.str = 'hello angular';});</script><div ng-controller="cont1"><h1 ng-bloak>{{str|capitalize}}</h1></div> </body> </html>
7.2 运行块
<!DOCTYPE html> <html ng-app="test"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title> </head> <body><!--雅虎14条之把js文件放置到最后--><script src="../Scripts/angular.min.js"></script><script src="../Scripts/angular-route.min.js"></script><script>var app = angular.module('test', []);app.run(['$http', '$rootScope', function ($http, $rootScope) {//可以直接调用http$http({ url: 'test.ashx', method: 'get' });//根作用域$rootScope.name = '张三';}])app.controller('cont1', function ($scope) {});</script><div ng-controller="cont1"><h1 ng-bloak>{{name}}</h1></div> </body> </html>
转载于:https://www.cnblogs.com/YK2012/p/9163592.html
查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
相关文章
- angular——事件监听 $watch
<!-------------------- 输入框按钮组 -----------------------><section class"common_input_button_style top_10"><label class"item item-input"><i class"icon ion-android-phone-portrait placeholder-icon"><…...
2024/4/26 6:43:24 - angular学习笔记(十九)-自定义指令修改dom
使用angular指令可以自己扩展html语法,还可以做很多自定义的事情.在后面会专门讲解这一块的知识,这一篇只是起到了解入门的作用. 与控制器,过滤器,服务,一样,可以通过模块实例的directive的方法来创建指令: var someModule angular.module(SomeModule,[]); someModule.directi…...
2024/5/1 16:07:19 - 刚做完双眼皮疼怎么办
...
2024/4/21 7:58:37 - Angular 2 从0到1 （三）
作者：王芃 wpcfangmail.com 第一节：Angular 2.0 从0到1 （一）第二节：Angular 2.0 从0到1 （二）第三节：Angular 2.0 从0到1 （三）第四节：Angular 2.0 …...
2024/4/21 7:58:35 - [转]Angular 4|5 Material Dialog with Example
本文转自：https://www.techiediaries.com/angular-material-dialogs/ In this tutorial, were going to learn how to use the Angular Material Dialog component to build a custom dialog example. Well also see common cases to work with the Angular Materia…...
2024/5/4 8:34:12 - angular学习笔记(十九)-指令修改dom
本篇主要介绍angular使用指令修改DOM: 使用angular指令可以自己扩展html语法,还可以做很多自定义的事情.在后面会专门讲解这一块的知识,这一篇只是起到了解入门的作用. 与控制器,过滤器,服务,一样,可以通过模块实例的directive的方法来创建指令: var someModule angular.modul…...
2024/4/22 13:40:25 - 利用angular 在playscala中实现ajax
在play中实现ajax官方给出jquery实现，我捉摸了一上午终于找到一种利用angular实现的方法。angular是一个js的框架 1、创建一个scala的play工程，修改index.scala.html如下 (message: String)<!DOCTYPE html><html><head><title>…...
2024/5/2 7:17:30 - Angular2入门教程-2 实现TodoList App
http://codin.im/2016/09/15/angular2-tutorial-2-todolist-app/ 发表于 2016-09-15 | 分类于 教程 | 暂无评论 这是Angular2入门教程的第二部分，第一部分介绍了Angular2的特性和概念，以及一个Angular2项目的结构的代码。这一部分，我们就…...
2024/4/20 18:40:07 - Angular 学习笔记 4
这篇介绍 ui-bootstrap 中 modal 的参考例子。 http://angular-ui.github.io/bootstrap/ form.html <div class"modal-header"><h3 class"modal-title">{{title}}</h3> </div> <div class"modal-body"><div …...
2024/5/2 14:55:03 - Angular2 实例（一）：TODO MVC
2019独角兽企业重金招聘Python工程师标准>>> 本文使用 Angular 2 搭建一个 TODO MVC 的例子。如果你不知道什么是 TODO MVC 的话，引用官方的一句话是：“ToDoMVC Helping you select an MV* framework”。如果你没听说过什么是 TODO MVC&#…...
2024/5/2 18:43:14 - 刚割完双眼皮能干嘛
...
2024/4/20 18:40:04 - 芳艺芳艺双眼皮多少钱
...
2024/4/20 18:40:04 - 二甲医院能做双眼皮吗
...
2024/4/22 18:45:38 - Grafana 的插件开发
<1>推荐一个网址：http://blog.leanote.com/post/nixon/%E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91 Grafana Panel Plugin 开发 Grafana 插件开发 上一次分享提到过Grafana的插件氛围三种类型(Panel, Datasource, App),这一次主要记录Panel类型的插件开发. 0. …...
2024/4/20 18:40:01 - 一个基于highcharts的angular小插件
2019独角兽企业重金招聘Python工程师标准>>> 最近要频繁使用表格,然后就想到了在angular项目上自己做一个插件,不至于我每次都要自己写好多重复的highcharts定义,那么接下来就直接上代码, 首先当然是html的结构: <!DOCTYPE html> <html lang"en"…...
2024/5/1 15:09:36 - 东莞双眼皮华美心细
...
2024/5/3 22:12:58 - 华为vrp下的接口类型
华为的环回中，serial接口默认是ppp，以太网接口对应borad. ospf netwrok-type 修改网络类型 display ospf int //查看接口。 华为的认证 链路级： 接口下 ospf authentication-mode null/md5/simple/hmac-md5 //基于散列信息码 ospf authentication-mode md5 1 cipher cisco /…...
2024/4/20 18:39:58 - 东莞双眼皮华美满意
...
2024/5/2 10:31:40 - 东莞双眼皮华美独家
...
2024/5/2 10:46:26 - 东莞双眼皮多少钱2017
...
2024/5/2 12:56:58
最新文章
- LSS(Lift, Splat, Shoot)算法解析
1.简介 LSS(Lift, Splat, Shoot) 是一个比较经典的自下而上的构建BEV特征的3D目标检测算法，通过将图像特征反投影到3D空间生成伪视锥点云，通过Efficientnet算法提取云点的深度特征和图像特征并对深度信息进行估计，最终将点云特征转换到BEV空…...
2024/5/7 14:45:27 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言，在此感激不尽。 权重和梯度的更新公式如下： w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/5/7 10:36:02 - 03-JAVA设计模式-组合模式
组合模式 什么是组合模式 组合模式（Composite Pattern）允许你将对象组合成树形结构以表示“部分-整体”的层次结构，使得客户端以统一的方式处理单个对象和对象的组合。组合模式让你可以将对象组合成树形结构，并且能像单独对象一…...
2024/5/4 6:22:48 - FreeRTOS学习 -- 再识
工作中一直使用FreeRTOS进行着开发，但是没有进行过系统的总结过。现在将快速使用几天时间将FreeRTOS相关知识点加以总结。 官网： https://www.freertos.org/zh-cn-cmn-s/ 参看资料： 正点原子 STM32F1 FreeRTOS开发手册_V1.2.pdf The FreeRTOS…...
2024/5/7 4:32:40 - Python语法总结：not（常出现错误）
0、not是什么 在python中not是逻辑判断词，用于布尔型True和False之前 a not Ture # a False b not False # b True1、not的用法 （1）判断语句 if not a:# 如果a是False，执行的语句（2）判断元素是否在…...
2024/5/2 5:16:56 - 【外汇早评】美通胀数据走低，美元调整
原标题：【外汇早评】美通胀数据走低，美元调整昨日美国方面公布了新一期的核心PCE物价指数数据，同比增长1.6%，低于前值和预期值的1.7%，距离美联储的通胀目标2%继续走低，通胀压力较低，且此前美国一季度GDP初值中的消费部分下滑明显，因此市场对美联储后续更可能降息的政策…...
2024/5/7 5:50:09 - 【原油贵金属周评】原油多头拥挤，价格调整
原标题：【原油贵金属周评】原油多头拥挤，价格调整本周国际劳动节，我们喜迎四天假期，但是整个金融市场确实流动性充沛，大事频发，各个商品波动剧烈。美国方面，在本周四凌晨公布5月份的利率决议和新闻发布会，维持联邦基金利率在2.25%-2.50%不变，符合市场预期。同时美联储…...
2024/5/7 9:45:25 - 【外汇周评】靓丽非农不及疲软通胀影响
原标题：【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五，美国方面公布了新一期的非农就业数据，大幅好于前值和预期，新增就业重新回到20万以上。具体数据： 美国4月非农就业人口变动 26.3万人，预期 19万人，前值 19.6万人。 美国4月失业率 3.6%，预期 3.8%，前值 3…...
2024/5/4 23:54:56 - 【原油贵金属早评】库存继续增加，油价收跌
原标题：【原油贵金属早评】库存继续增加，油价收跌周三清晨公布美国当周API原油库存数据，上周原油库存增加281万桶至4.692亿桶，增幅超过预期的74.4万桶。且有消息人士称，沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油，印度炼油商预计将每日获得至多20万桶的额外原油供…...
2024/5/7 14:25:14 - 【外汇早评】日本央行会议纪要不改日元强势
原标题：【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升，避险资金回流日元有关，也与前一段时间的美日贸易谈判给日本缓冲期，日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策，但这符…...
2024/5/4 23:54:56 - 【原油贵金属早评】欧佩克稳定市场，填补伊朗问题的影响
原标题：【原油贵金属早评】欧佩克稳定市场，填补伊朗问题的影响近日伊朗局势升温，导致市场担忧影响原油供给，油价试图反弹。此时OPEC表态稳定市场。据消息人士透露，沙特6月石油出口料将低于700万桶/日，沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”，沙特将满…...
2024/5/4 23:55:05 - 【外汇早评】美欲与伊朗重谈协议
原标题：【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议，昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告，伊朗外长昨日回应称，欧洲国家履行它们的义务，伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...
2024/5/4 23:54:56 - 【原油贵金属早评】波动率飙升，市场情绪动荡
原标题：【原油贵金属早评】波动率飙升，市场情绪动荡因中美贸易谈判不安情绪影响，金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际，美国按照既定计划向中国2000亿商品征收25%的关税，市场情绪有所平复，已经开始接受这一事实。虽然波动率-恐慌指数VI…...
2024/5/7 11:36:39 - 【原油贵金属周评】伊朗局势升温，黄金多头跃跃欲试
原标题：【原油贵金属周评】伊朗局势升温，黄金多头跃跃欲试美国和伊朗的局势继续升温，市场风险情绪上升，避险黄金有向上突破阻力的迹象。原油方面稍显平稳，近期美国和OPEC加大供给及市场需求回落的影响，伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级，美国对中…...
2024/5/4 23:54:56 - 【原油贵金属早评】市场情绪继续恶化，黄金上破
原标题：【原油贵金属早评】市场情绪继续恶化，黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动，人民币汇率出现大幅的贬值动能，金融市场受到非常明显的冲击。尤其是波动率起来之后，对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势，这…...
2024/5/6 1:40:42 - 【外汇早评】美伊僵持，风险情绪继续升温
原标题：【外汇早评】美伊僵持，风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件，导致波斯湾局势进一步恶化，市场担忧美伊可能会出现摩擦生火，避险品种获得支撑，黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日，四艘商船在阿联酋领海附近的阿曼湾、…...
2024/5/4 23:54:56 - 【原油贵金属早评】贸易冲突导致需求低迷，油价弱势
原标题：【原油贵金属早评】贸易冲突导致需求低迷，油价弱势近日虽然伊朗局势升温，中东地区几起油船被袭击事件影响，但油价并未走高，而是出于调整结构中。由于市场预期局势失控的可能性较低，而中美贸易问题导致的全球经济衰退风险更大，需求会持续低迷，因此油价调整压力较…...
2024/5/4 23:55:17 - 氧生福地 玩美北湖（上）——为时光守候两千年
原标题：氧生福地 玩美北湖（上）——为时光守候两千年一次说走就走的旅行，只有一张高铁票的距离～ 所以，湖南郴州，我来了～ 从广州南站出发，一个半小时就到达郴州西站了。在动车上，同时改票的南风兄和我居然被分到了一个车厢，所以一路非常愉快地聊了过来。 挺好，最起…...
2024/5/7 9:26:26 - 氧生福地 玩美北湖（中）——永春梯田里的美与鲜
原标题：氧生福地 玩美北湖（中）——永春梯田里的美与鲜一觉醒来，因为大家太爱“美”照，在柳毅山庄去寻找龙女而错过了早餐时间。近十点，向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”，到郴州必吃的美食之一。 哇塞！那个味美香甜…...
2024/5/4 23:54:56 - 氧生福地 玩美北湖（下）——奔跑吧骚年！
原标题：氧生福地 玩美北湖（下）——奔跑吧骚年！让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...
2024/5/4 23:55:06 - 扒开伪装医用面膜，翻六倍价格宰客，小姐姐注意了！
原标题：扒开伪装医用面膜，翻六倍价格宰客，小姐姐注意了！扒开伪装医用面膜，翻六倍价格宰客！当行业里的某一品项火爆了，就会有很多商家蹭热度，装逼忽悠，最近火爆朋友圈的医用面膜，被沾上了污点，到底怎么回事呢？ “比普通面膜安全、效果好！痘痘、痘印、敏感肌都能用…...
2024/5/5 8:13:33 - 「发现」铁皮石斛仙草之神奇功效用于医用面膜
原标题：「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势： 1、铁皮石斛：自唐宋以来，一直被列为皇室贡品，铁皮石斛生于海拔1600米的悬崖峭壁之上，繁殖力差，产量极低，所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...
2024/5/4 23:55:16 - 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者
原标题：丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司，专注美业21年，其旗下品牌： 「圣茵美」私密荷尔蒙抗衰，产后修复 「圣仪轩」私密荷尔蒙抗衰，产后修复 「花茵莳」私密荷尔蒙抗衰，产后修复 「丽彦妆」专注医学护…...
2024/5/4 23:54:58 - 广州械字号面膜生产厂家OEM/ODM4项须知！
原标题：广州械字号面膜生产厂家OEM/ODM4项须知！广州械字号面膜生产厂家OEM/ODM流程及注意事项解读： 械字号医用面膜，其实在我国并没有严格的定义，通常我们说的医美面膜指的应该是一种「医用敷料」，也就是说，医用面膜其实算作「医疗器械」的一种，又称「医用冷敷贴」。 …...
2024/5/6 21:42:42 - 械字号医用眼膜缓解用眼过度到底有无作用？
原标题：械字号医用眼膜缓解用眼过度到底有无作用？医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料，含70%以上的水分。体表皮肤温度传导到本产品的凝胶层，热量被凝胶内水分子吸收，通过水分的蒸发带走大量的热量，可迅速地降低体表皮肤局部温度，减轻局部皮肤的灼…...
2024/5/4 23:54:56 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示，配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下：1、长按电脑电源键直至关机，然后再按一次电源健重启电脑，按F8健进入安全模式2、安全模式下进入Windows系统桌面后，按住“winR”打开运行窗口，输入“services.msc”打开服务设置3、在服务界面，选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE，请勿更改元素数目。
%读入6幅图像（每一幅图像的大小是564*564） f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...
2022/11/19 21:17:16 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面，在等待界面中我们需要等待操作结束才能关机，虽然这比较麻烦，但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows，请勿关闭计算机”的提示，要过很久才能进入系统，有的用户甚至几个小时也无法进入，下面就教大家这个问题的解决方法。第一种方法：我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题，电脑时发现开机屏幕显现“正在配置Windows Update，请勿关机”(如下图所示)，而且还需求等大约5分钟才干进入系统。这是怎样回事呢？一切都是正常操作的，为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示，没过几秒后电脑自动重启，每次开机都这样无法进入系统，此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一：开机按下F8，在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况，就是电脑提示正在准备windows请勿关闭计算机，碰到这样的问题该怎么解决呢，现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法：1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后，每次关机的时候桌面上都会显示一个“配置Windows Update的界面，提示请勿关闭计算机”，每次停留好几分钟才能正常关机，导致什么情况引起的呢？出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着，别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚，只能是考虑备份数据后重装系统了。解决来方案一：管理员运行cmd：net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办？
原标题：电脑提示“配置Windows Update请勿关闭计算机”怎么办？win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢？一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ，然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ，然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间：2020-04-20 22:24:19 浏览次数：729次 区域： 南阳 > 卧龙 列举网提醒您：为保障您的权益，请不要提前支付任何费用！ 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于：钉钉，外勤365，红圈通，企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”，长时间没反应，无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了，具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面，长时间没反应，无法进入系统。这个问题原来帮其他同学也解决过，网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办？...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法，并在最后教给你1种保护系统安全的好方法，一起来看看！电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中，添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败，正在还原更改，请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候，开启电脑发现电脑显示：配置windows更新失败，正在还原更改，请勿关闭计算机。。.这要怎么办呢？下面小编就带着大家一起看看吧！如果能够正常进入系统，建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机，电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机，电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题，就是我们的win7系统在关机的时候，总是喜欢显示“准备配置windows，请勿关机”这样的一个页面，没有什么大碍，但是如果一直等着的话就要两个小时甚至更久都关不了机，非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时，一般是您正对windows进行升级，但是这个要是长时间没有反应，我们不能再傻等下去了。可能是电脑出了别的问题了，来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败，还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况，当我们打开电脑之后，发现一直停留在一个界面：“配置Windows Update失败，还原更改请勿关闭计算机”，等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在iPhone上关闭“请勿打扰”
Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...
2022/11/19 21:16:57