angular 路由项目例子
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 路由项目例子相关推荐
- angular大型项目实践总结的几个要点
angular大型项目实践总结的要点 整理电脑文档,顺便搬用到博客,文字是2018年写的 国际化要提前做,贯穿整个开发过程 图标,图片,规范化,使用统一的方式使用,无论是雪碧图还是字体化(有很多把图片 ...
- angular 路由快照和 aggrid 结合后,导致aggrid 表头消失的问题
一,路由快照简述 1. angular的路由快照,简单的说,就是记录路由访问状态.比如当访问过A路由加载过A组件之后,再次访问A路由,A组件不会重新加载 (即不会重新渲染页面,不会重新请求接口). ...
- angular路由详解
angular路由 路由 (route) ,几乎所有的 MVC(VM) 框架都应该具有的特性,因为它是前端构建单页面应用 (SPA) 必不可少的组成部分. 那么,对于 angular 而言,它自然也有 ...
- Angular 路由
Angular 路由 简单路由配置 每个带路由的 Angular 应用都有一个Router(路由器)服务的单例对象. 当浏览器的 URL 变化时,路由器会查找对应的 Route(路由),并据此决定该显 ...
- angular搭建项目步骤_建立健康的Angular项目应采取的步骤
angular搭建项目步骤 by Ashish Gaikwad 通过Ashish Gaikwad 建立健康的Angular项目应采取的步骤 (Steps you should take to buil ...
- vue-route+webpack部署单页路由项目,访问刷新出现404问题
问题描述: 前端同事使用Vue.js框架,利用vue-route结合webpack编写了一个单页路由项目,运维协助在服务器端配置nginx.部署完成后,访问首页没问题,从首页里打开二级页面没问题,但是 ...
- 4 angular 重构 项目_c# – 将Angular 4添加到ASP.NETCore项目中
我想在Visual Studio 2017中的ASP.NetCore 1.1项目中使用Angular 4(读作:* .csproj文件) 以前使用ASP.NET Core 1.0和Visual Stu ...
- Angular 路由守卫
1. 路由 Angular路由: 可以控制页面跳转:可以在多视图间切换: 2. 路由守卫 Angular路由守卫: 在进入或离开某路由时,用于判断是否可以离开.进入某路由::: return true ...
- 在使用angular打包项目的时候 打包老是出错 内存溢出的解决办法
关于前端项目打包报错的问题 在使用angular打包项目的时候 打包老是出错 注意看这里 在使用angular打包项目的时候 打包老是出错 <--- JS stacktrace --->= ...
最新文章
- python websocket异步高并发_Python3.5异步和多个websocket服务器
- 网站地图能给网站的优化带来什么好处
- VS2010属性表的建立与灵活运用
- ML之LassoRRidgeR:基于datasets糖尿病数据集利用LassoR和RidgeR算法(alpha调参)进行(9→1)回归预测
- iOS上相见恨晚的6个APP
- 对于多表查询和转账的事务提交
- 我的联想笔记本电脑为啥字母键变成数字键怎么切换过来
- python设计要求_Python高级应用程序设计任务要求
- 用tinyxml创建xml文件
- Effective C# 学习笔记(五) 最好重载你所创建类的ToString()方法
- 开源操作系统 FreeDOS 二十五年演进史:因微软抛弃 MS-DOS 而来!
- SimpleDateFormat的使用问题
- 了解不同种类的windows存储驱动
- tomcat乱码问题解决
- app图标圆角角度_iOS和安卓APP启动图标的尺寸和圆角大小详解
- 一行代码能实现什么丧心病狂的功能?
- 用c++设计 公司职工的信息管理程序 求大神!!
- osx snow leopard下用homebrew 安装php5.3 + php-fpm
- 为什么工厂要实现自动化、智能化?
- 关键点检测——68点图例