angular2选项卡路由依赖注入文本转换表单验证搜索过滤排序上传示例代码

代码语言:html

所属分类:其他

代码描述:angular2选项卡路由依赖注入文本转换表单验证搜索过滤排序上传示例代码

代码标签: 路由 依赖 注入 文本 转换 表单 验证 搜索 过滤 排序 上传 示例

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html ng-app="Mywind" ng-controller="Myautumn">

<head>
    <meta charset="utf-8" />

</head>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/angular.2.4.6.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/angular-ui-router.min.js"></script>
<script type="text/javascript">
    //M
var app = angular.module('Mywind',['ui.router'])
    //angular 白名单全局通用
		app.config([
	        '$compileProvider',
	        function ($compileProvider) {
	            $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|itms-services|ftp|javascript|mailto|tel|file|sms):/);
	            // Angular v1.2 之前使用 $compileProvider.urlSanitizationWhitelist(...)
	        }
	    ]);
    //angular拦截器 声明
	app.config([ '$httpProvider', function($httpProvider) { 
	    $httpProvider.interceptors.push('httpInterceptor'); 
	  }]); 
	  //使用拦截器
	app.factory('httpInterceptor', [ '$q', '$injector',function($q, $injector) { 
	    var httpInterceptor = { 
	      'responseError' : function(response) { 
	      	//401情况下
	        if (response.status == 401){
	          var rootScope = $injector.get('$rootScope'); 
	          var state = $injector.get('$rootScope').$state.current.name; 
	          rootScope.stateBeforLogin = state; 
	          rootScope.$state.go("login"); 
	          return $q.reject(response); 
	          //不等于200情况下
	        } else if (response.status != 200){ 
	          showMsg(message,'center');
	          removeLoading("test");
	          return $q.reject(response); 
	        } 
	      }, 
	      'response' : function(response) { 
	        return response; 
	      } 
	    } 
	    return httpInterceptor; 
	  }  
	]);
	//Angular 监听路由变化
		function run($ionicPlatform, $location, Service, $rootScope, $stateParams) {  
	       //路由监听事件  
	       $rootScope.$on('$stateChangeStart',  
	               function(event, toState, toParams, fromState, fromParams) {  
	                   console.log(event);  
	                   console.log(toState);  
	                   console.log(toParams);  
	                   console.log(fromState);  
	                   console.log(fromParams);  
	                   //判断当前路由
	                   if (toState.name == "index1") {  
	                       //获取参数之后可以调请求判断需要渲染什么页面,渲染不同的页面通过 $location 实现  
	                       if (toParams.id == 10) {  
	                           $location.path();//获取路由地址  
	                            $location.path('/validation').replace();  
	                            event.preventDefault()//可以阻止模板解析  
	                       }  
	                   }  
	               })  
	           // stateChangeSuccess  当模板解析完成后触发  
	       $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {  
	       
	       })
	       // $stateChangeError  当模板解析过程中发生错误时触发  
	       $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) {  
	  
	       })  
	   }  
	//V
    app.controller('Myautumn',function($scope,$http,$filter){
    	//执行路由事件
    	// $viewContentLoading- 当视图开始加载,DOM渲染完成之前触发,该事件将在$scope链上广播此事件。
		$scope.$watch('$viewContentLoading',function(event, viewConfig){  
//		   alert('模板加载完成前');  
		});  
		//$viewContentLoaded- 当视图加载完成,DOM渲染完成之后触发,视图所在的$scope发出该事件。  
		$scope.$watch('$viewContentLoaded',function(event){   
//		     alert('模板加载完成后');  
		});  
    	
    	 //angular Cookie写   
	    //用法 :$scioe.addCookie("姓名",值,时间,"/")
	    $scope.addCookie = function(name, value, days, path) {
			var name = decodeURI(name);
			var value = decodeURI(value);
			var expires = new Date();
			expires.setTime(expires.getTime() + days * 3600000 * 24);
			path = path == "" ? "" : ";path=" + path;
			var _expires = (typeof days) == "string" ? "" : ";expires=" + expires.toUTCString();
			document.cookie = name + "=" + value + _expires + path;
		}
	    //angular Cookie读
	    //用法:$scope.getCookieValue("姓名")
	    $scope.getCookieValue = function(name) {
			var name = decodeURI(name);
			var allcookies = document.cookie;
			name += "=";
			var pos = allcookies.indexOf(name);
			if(pos != -1) {
				var start = pos + name.length;
				var end = allcookies.indexOf(";", start);
				if(end == -1) end = allcookies.length;
				var value = allcookies.substring(start, end);
				return(value);
			} else {
				return "";
			}
		};
		//angular forEach 循环遍历数组
	    var objs =[{a:1},{a:2}];
		angular.forEach(objs, function(data,index,array){
			//data等价于array[index]
			console.log(data.a+'='+array[index].a);
//			console.log(data.a);
			//转化为小写
			console.log(angular.lowercase("A"))
			//转化为大写
			console.log(angular.uppercase("b"))
			
		});
		//$http
		$scope.SWLogin = function() {
			$http({
				method: 'POST',
				url: url + '',
				params: {}
			}).then(function successCallback(response) {
				$scope.val = response.data
				//map 循环遍历
				var role = {
						"1":'文字a',
						"6":'文字b',
						"9":'文字c',
						"7":'文字d',
						"3":'文字e',
						"5":'文字f'
					}
					//循环遍历改变值
					$scope.val = $scope.val.map(item => {
						var obj = {};
						//取值x.realShow
						obj.realShow = role[item.prizeid] ? role[item.prizeid] : '';
						return Object.assign({}, item, obj);
					})
					}, function errorCallback(response) {
						$scope.message = message;
						console.log("error:" + response + "");
					});
		}
		
		//$http跨域
		//服务端设置
		//	访问权限	response.setHeader("Access-Control-Allow-Origin", "*");  
		//	访问类型	response.setHeader("Access-Control-Allow-Methods","POST");
		//	响应头	response.setHeader("Access-Control-Allow-Headers","x-requested-with,content-type");
//		$http.post(
//			'url',
//			{languageColumn:'name_eu'},
//			{'Content-Type':'application/x-www-form-urlencoded'}).success(function(data){
//.........完整代码请登录后点击上方下载按钮下载查看

网友评论0