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

代码语言：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){
//			$scope.industries = data;
//		});

		/*搜索过滤器+排序+查找*/
		//存放数据数组
		 var arr=[{"name":"猪","age":20},  {"name":"小猪","age":23},  {"name":"大猫","age":227},  
                {"name":"老虎","age":29},  {"name":"中虎","age":29},  {"name":"老虎","age":39},  
                {"name":"老猫","age":47},  {"name":"熊猫","age":29},  {"name":"树懒","age":27}, 
                {"name":"狮子","age":59}];  
             $scope.arr1=arr;  
             //实现查询功能  
            var isopen=true;  
            $scope.sort=function(str){  
                $scope.arr1=$filter("orderBy")($scope.arr1,str,isopen);  
                isopen=!isopen;  
                //console.log(isopen);  
            };  
            $scope.concentrate=function(){  
                console.log("已聚焦");  
            }  
            //实现查询功能  
            $scope.search=function(){  
                console.log(11);  
                $scope.arr1=$filter("filter")(arr,document.getElementById("wei").value);  
            }  
    })
    //angular  判断
    console.log(angular.equals('1', '1') ? '1' : '2')
    //angular 路由
    app.config(function($stateProvider,$urlRouterProvider){
                $urlRouterProvider
                        .otherwise('index1');
                $stateProvider
                        .state('index1',{
                            url:'/index1',
                            templateUrl:'../asset/test1.html'
                        })
                        .state('index2',{
                            url:'/index2',
                            templateUrl:'../asset/test2.html'
                        })
                        //子路由
                        .state("index1.Page1", {
				            url:"/Page1",
				            templateUrl: "../asset/test1.html"
				           
				        })
                        
            })
    //base64格式 上传图片+缩略图+提交 
  app.controller('controlName', ['$scope', '$http', function($scope, $http) {
		    $scope.reader = new FileReader();   //创建一个FileReader接口
		    $scope.form = {     //用于绑定提交内容，图片或其他数据
		        image:{},
		    };
		    $scope.thumb = {};      //用于存放图片的base64
		    $scope.thumb_default = {    //用于循环默认的‘加号’添加图片的框
		        1111:{}
		    };
		
		    $scope.img_upload = function(files) {       //单次提交图片的函数
		        $scope.guid = (new Date()).valueOf();   //通过时间戳创建一个随机数，作为键名使用
		        $scope.reader.readAsDataURL(files[0]);  //FileReader的方法，把图片转成base64
		        $scope.reader.onload = function(ev) {
		            $scope.$apply(function(){
		                $scope.thumb[$scope.guid] = {
		                    imgSrc : ev.target.result,  //接收base64
		                }
		            });
		        };
		        
		        var data = new FormData();      //以下为像后台提交图片数据
		        data.append('image', files[0]);
		      .........完整代码请登录后点击上方下载按钮下载查看