angular 路由是我在工作中体验非常便捷的一点，
这是详细的API ，查看API 可以了解很多东西，
https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-view
下面是我使用angular ui-route 做到 开发例子，代码都未压缩可以方便查看，
http://heboliufengjie.github.io/appRoute/#/index
https://github.com/heboliufengjie/appRoute
公司项目例子（运用的技术点比较有讲究，仔细参考）
http://kam.ichinascope.com/#/index
涉及到，
1、angular 路由配置，路由传参，controller中使用$stateParams获取参数，
2、使用angular 内置$http 发送ajax 请求及传参
3、angular 指令包装 第三方库的使用、
4、angular 简洁的启动方式之一（推荐使用，可以不再html 页面添加 ng-app）
5、click 巧妙的避开浏览器因为安全限制打开新页面
6、与 lodah.js 配合使用处理一些字符串，数组等常见数据操作
(function() {
'use strict';
var index = angular.module('index', ['ui.router']);
console.log('publicUrl', publicUrl)
index.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/index'); //找到相应路由调到制定的路由页面
$stateProvider.state('index', { //首页
url: '/index?day&keywords',
views: {
'': { //模板页面
templateUrl: publicUrl + '/views/index/home.html',
},
'head@index': { //head@index 表示渲染index.html 中相应的 ui-view="head"
templateUrl: publicUrl + '/views/common/head.html',
},
'footer@index': { //同上
templateUrl: publicUrl + '/views/common/footer.html',
},
'main@index': {
templateUrl: publicUrl + '/views/index/index.main.html',
controller: 'indexCtrl' //定义首页控制器
},
}
})
});
var shuffle = function(inputArr) {
var valArr = [],
k = '';
for (k in inputArr) { // Get key and value arrays
if (inputArr.hasOwnProperty(k)) {
valArr.push(inputArr[k]);
}
}
valArr.sort(function() {
return 0.5 - Math.random();
});
return valArr;
}
var isPc = function() {
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"
];
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}
index.controller('indexCtrl', function($scope, $stateParams, $http, $location, $state, $interval) {
//判断是手机还是电脑
$scope.isPc = isPc();
$scope.login_state = (login_state * 1); // 0 为未登陆
$scope.account_url = account_url;
$scope.userinfo = userinfo;
$scope.publicUrl = publicUrl;
//搜索
$scope.search = function() {
var keywords = _.trim($scope.keywords);
if (!keywords) {
return false;
} else {
if (!$scope.login_state) {
$scope.showDialog = true;
return
}
location.href = '/heatmap?keywords=' + keywords;
}
};
//热词推荐
var getHotword = function() {
$http.get('/api/news/hotword', { cache: true }).success(function(response) {
//debug
if (false) {
response = [
'养老概念板测试测试测试测试测试',
'军工概念板',
'次新股概念板',
'二胎概念板',
'稀土永磁概念板',
'商业百货概念板',
'智慧城市概念板'
];
}
$scope.recommends = response.slice(0, 6);
});
};
getHotword();
$scope.recommendedHotWords = function(recommend) {
if (!$scope.login_state) {
$scope.showDialog = true;
return
}
var w = window.open();
w.location = '/heatmap?keywords=' + recommend + '&needSearch=0';
}
// $scope.updateRecommend = function() {
// console.log('换一批请求')
// }
//近期热点事件
var getRecentHotSpots = function() {
$scope.currentDay = $stateParams.day || 1;
$http.get('/apihot/news/topic/new_spots2?day=' + $scope.currentDay, { cache: true })
.success(function(response) {
if (response.code === 200) {
$scope.selectDays = [1, 2, 3];
var resultRecentHotSpots = response.message;
resultRecentHotSpots[0].new = true;
resultRecentHotSpots[1].new = true;
resultRecentHotSpots = shuffle(resultRecentHotSpots);
//debug
if (false) {
$scope.selectDays = [1, 2, 3];
resultRecentHotSpots = [
'养老概念板测试测试测试测试测试',
'军工概念板',
'次新股概念板',
'二胎概念板',
'稀土永磁概念板',
'商业百货概念板',
'OLED概念板',
'智慧城市概念板',
'医药概念板',
'集成电路概念板',
'金融IC卡概念板',
'3D打印概念板',
'石墨烯概念板',
'彩票概念板',
'云计算概念板',
'食品安全检测概念板',
'体育概念板',
'车联网概念板',
'IP概念板',
'全息手机概念板',
'美丽中国概念板',
];
}
//热点事件闪烁图
var resultRecentHotSpotsLeft = [],
resultRecentHotSpotsRight = [];
_.each(resultRecentHotSpots, function(value, i) {
if (i % 2) {
resultRecentHotSpotsRight.push(value);
} else {
resultRecentHotSpotsLeft.push(value);
}
});
//
$scope.MobileResultRecentHotSpots = resultRecentHotSpots;
$scope.resultRecentHotSpots = {
resultRecentHotSpotsRights: resultRecentHotSpotsRight.slice(0, 7),
resultRecentHotSpotsLefts: resultRecentHotSpotsLeft.slice(0, 6),
}
}
});
};
getRecentHotSpots();
$scope.selectDate = function(arg) {
$scope.showList = false;
$state.go('index', {
day: arg
});
};
//$interval.cancel(stop);关闭定时刷新
$interval(getRecentHotSpots, 1000 * 5 * 60);
$scope.hotEvents = function(arg) {
if (!$scope.login_state) {
$scope.showDialog = true;
return
}
var w = window.open();
w.location = '/heatmap?keywords=' + arg + '&needSearch=0';
}
//热门SAM行业
var getIndustryData = function() {
$http.get('/api/news/itcc', { cache: true })
.then(function(response) {
//debug
if (false) {
response = {
"资本市场服务1111": [{
"t": "002673_SZ_EQ",
"c": "西部证券1",
"s": 1
}, {
"t": "601788_SH_EQ",
"c": "光大证券2",
"s": 2
}, {
"t": "600369_SH_EQ",
"c": "西南证券3",
"s": 3
}, {
"t": "600999_SH_EQ",
"c": "招商证券4",
"s": 4
}, {
"t": "601377_SH_EQ",
"c": "兴业证券6",
"s": 6
}, {
"t": "600109_SH_EQ",
"c": "国金证券5",
"s": 5
}, {
"t": "600109_SH_EQ",
"c": "国金证券5",
"s": 100
}],
"互联网软件与服务222": [{
"t": "300017_SZ_EQ",
"c": "网宿科技",
"s": 4
}, {
"t": "300051_SZ_EQ",
"c": "三五互联",
"s": 1
}, {
"t": "300383_SZ_EQ",
"c": "光环新网",
"s": 1
}, {
"t": "300494_SZ_EQ",
"c": "盛天网络",
"s": 3
}, {
"t": "002354_SZ_EQ",
"c": "天神娱乐",
"s": 2
}, {
"t": "300431_SZ_EQ",
"c": "暴风科技",
"s": 4
}],
"汽车3333": [{
"t": "600066_SH_EQ",
"c": "宇通客车",
"s": 3
}, {
"t": "603766_SH_EQ",
"c": "隆鑫通用",
"s": 3
}, {
"t": "601777_SH_EQ",
"c": "力帆股份",
"s": 2
}, {
"t": "000957_SZ_EQ",
"c": "中通客车",
"s": 3
}, {
"t": "000550_SZ_EQ",
"c": "江铃汽车",
"s": 2
}, {
"t": "600006_SH_EQ",
"c": "东风汽车",
"s": 1
}],
"东": [{
"t": "600066_SH_EQ",
"c": "宇通",
"s": 3
}, {
"t": "603766_SH_EQ",
"c": "通用",
"s": 3
}, {
"t": "601777_SH_EQ",
"c": "股份",
"s": 2
}, {
"t": "000957_SZ_EQ",
"c": "中车",
"s": 3
}]
}
}
var companys = [],
industryNames = [],
sortBys;
_.each(response.data, function(n, k) {
industryNames.push(k);
sortBys = _.sortByOrder(n.slice(0, 6), ['s'], ['desc']);
_.each(sortBys, function(v) {
v.t = (v.t).substring(0, (v.t).indexOf('_'));
})
companys.push(sortBys);
})
//
var IndustryDatas = [];
var newCompanys = companys.slice(0, 3);
var newIndustryNames = industryNames.slice(0, 3);
IndustryDatas[0] = {
industryName: newIndustryNames[0],
companys: newCompanys[0]
}
IndustryDatas[1] = {
industryName: newIndustryNames[1],
companys: newCompanys[1]
}
IndustryDatas[2] = {
industryName: newIndustryNames[2],
companys: newCompanys[2]
}
$scope.IndustryDatas = IndustryDatas;
//获取列表股票代码
var IndustryCompanys = _.flatten(_.pluck(IndustryDatas, 'companys'), true);
var IndustryCompanysCodes = _.pluck(IndustryCompanys, 't').join(',');
$http.get('/hqservice/stock/realtime/quotes?codes=' + IndustryCompanysCodes, { cache: true })
.then(function(response) {
if (response.data.code == 200) {
_.merge(IndustryCompanys, response.data.message);
}
}, function(response) {
console.log('error')
})
}, function(response) {
console.log('error')
});
};
getIndustryData();
// 热点概念板 stock
var getStockData = function() {
$http.get('/apihot/news/topic/hot_topic_company', { cache: true }) // /api/news/conp/com
.success(function(response) {
if (response.code === 200) {
$scope.StockDatas = response.message;
//获取列表股票代码
var StockCompanys = _.flatten(_.pluck(response.message, 'companys'), true);
var StockCompanyssCodes = _.pluck(StockCompanys, 't').join(',');
$http.get('/hqservice/stock/realtime/quotes?codes=' + StockCompanyssCodes, { cache: true })
.then(function(response) {
if (response.data.code == 200) {
_.merge(StockCompanys, response.data.message);
}
})
}
})
}
getStockData();
//今日版块排行打开新页面
$scope.companyKeywords = function(company) {
if (!$scope.login_state) {
$scope.showDialog = true;
return
}
var w = window.open();
w.location = '/heatmap?keywords=' + (company && company.c ? company.c : company) + '&needSearch=0';
}
});
index.directive('alert', function() {
return {
link: function(scope) {
if (document.addEventListener) {
scope.showAlert = false;
} else {
scope.showAlert = true;
}
}
};
});
index.directive('searchTip', function() {
return {
link: function(scope, element) {
var input = document.getElementById('search-tip');
new Awesomplete(input, {
minChars: 1,
list: [
"抗癌概念板",
"金融软件概念板",
"蓝宝石概念板",
"新能源概念板",
"家电行业概念板",
"消费金融概念板",
"福建自贸区概念板",
"智能家居概念板",
"5G概念板",
"安防概念板",
"网红概念板",
"乙肝疫苗概念板",
"中国电子集团概念板",
"pokemon go概念板",
"振兴东北概念板",
"玩具制造概念板",
"在线教育概念板"
]
});
window.addEventListener("awesomplete-selectcomplete", function() {
element.on("keyup", function() {
//scope.keywords = _.trim(this.value);
//scope.$apply();
location.href = '/heatmap?keywords=' + _.trim(this.value);
})
}, false);
}
};
});
//dialog
index.directive('dialog', function() {
return {
link: function(scope) {
//点击取消关掉弹窗
document.getElementById('operation-button').children[1].onclick = function() {
scope.showDialog = false;
scope.$apply()
}
}
};
});
angular.bootstrap(document, ['index']);
})()
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did222862