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 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']);
})()