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 arraysif (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) {//debugif (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);//debugif (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) {//debugif (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();// 热点概念板 stockvar 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);}};});//dialogindex.directive('dialog', function() {return {link: function(scope) {//点击取消关掉弹窗document.getElementById('operation-button').children[1].onclick = function() {scope.showDialog = false;scope.$apply()}}};});angular.bootstrap(document, ['index']);
})()

  

转载于:https://www.cnblogs.com/heboliufengjie/p/5753004.html

angular 路由项目例子相关推荐

  1. angular大型项目实践总结的几个要点

    angular大型项目实践总结的要点 整理电脑文档,顺便搬用到博客,文字是2018年写的 国际化要提前做,贯穿整个开发过程 图标,图片,规范化,使用统一的方式使用,无论是雪碧图还是字体化(有很多把图片 ...

  2. angular 路由快照和 aggrid 结合后,导致aggrid 表头消失的问题

    一,路由快照简述 1. angular的路由快照,简单的说,就是记录路由访问状态.比如当访问过A路由加载过A组件之后,再次访问A路由,A组件不会重新加载 (即不会重新渲染页面,不会重新请求接口).   ...

  3. angular路由详解

    angular路由 路由 (route) ,几乎所有的 MVC(VM) 框架都应该具有的特性,因为它是前端构建单页面应用 (SPA) 必不可少的组成部分. 那么,对于 angular 而言,它自然也有 ...

  4. Angular 路由

    Angular 路由 简单路由配置 每个带路由的 Angular 应用都有一个Router(路由器)服务的单例对象. 当浏览器的 URL 变化时,路由器会查找对应的 Route(路由),并据此决定该显 ...

  5. angular搭建项目步骤_建立健康的Angular项目应采取的步骤

    angular搭建项目步骤 by Ashish Gaikwad 通过Ashish Gaikwad 建立健康的Angular项目应采取的步骤 (Steps you should take to buil ...

  6. vue-route+webpack部署单页路由项目,访问刷新出现404问题

    问题描述: 前端同事使用Vue.js框架,利用vue-route结合webpack编写了一个单页路由项目,运维协助在服务器端配置nginx.部署完成后,访问首页没问题,从首页里打开二级页面没问题,但是 ...

  7. 4 angular 重构 项目_c# – 将Angular 4添加到ASP.NETCore项目中

    我想在Visual Studio 2017中的ASP.NetCore 1.1项目中使用Angular 4(读作:* .csproj文件) 以前使用ASP.NET Core 1.0和Visual Stu ...

  8. Angular 路由守卫

    1. 路由 Angular路由: 可以控制页面跳转:可以在多视图间切换: 2. 路由守卫 Angular路由守卫: 在进入或离开某路由时,用于判断是否可以离开.进入某路由::: return true ...

  9. 在使用angular打包项目的时候 打包老是出错 内存溢出的解决办法

    关于前端项目打包报错的问题 在使用angular打包项目的时候 打包老是出错 注意看这里 在使用angular打包项目的时候 打包老是出错 <--- JS stacktrace --->= ...

最新文章

  1. python websocket异步高并发_Python3.5异步和多个websocket服务器
  2. 网站地图能给网站的优化带来什么好处
  3. VS2010属性表的建立与灵活运用
  4. ML之LassoRRidgeR:基于datasets糖尿病数据集利用LassoR和RidgeR算法(alpha调参)进行(9→1)回归预测
  5. iOS上相见恨晚的6个APP
  6. 对于多表查询和转账的事务提交
  7. 我的联想笔记本电脑为啥字母键变成数字键怎么切换过来
  8. python设计要求_Python高级应用程序设计任务要求
  9. 用tinyxml创建xml文件
  10. Effective C# 学习笔记(五) 最好重载你所创建类的ToString()方法
  11. 开源操作系统 FreeDOS 二十五年演进史:因微软抛弃 MS-DOS 而来!
  12. SimpleDateFormat的使用问题
  13. 了解不同种类的windows存储驱动
  14. tomcat乱码问题解决
  15. app图标圆角角度_iOS和安卓APP启动图标的尺寸和圆角大小详解
  16. 一行代码能实现什么丧心病狂的功能?
  17. 用c++设计 公司职工的信息管理程序 求大神!!
  18. osx snow leopard下用homebrew 安装php5.3 + php-fpm
  19. 为什么工厂要实现自动化、智能化?
  20. 关键点检测——68点图例

热门文章

  1. jpg转换成PDF 如何将多张图片合成一个PDF文件
  2. 最新抢火车票软件测评
  3. 各种加密解密函数(URL加密解密、sha1加密解密、des加密解密)
  4. python爬虫新闻热点_利用Python网络爬虫技术追踪时事热点
  5. 将静态文本框的背景设置为透明
  6. BGP——6种邻居状态讲解
  7. python字典中的键是什么意思_python字典中的键是什么
  8. 网站视频详情页-网站-实践-scrapy框架
  9. Filecoin能否超越BTC和ETH
  10. 离散序列的相似性度量