文档章节

看了两天AngularJs 试着写了个自动路由.请各路大神赐教...

NMTuan
 NMTuan
发布于 2014/06/24 10:53
字数 427
阅读 834
收藏 3

牢骚

看了两天angular.js 基于ng与ngRoute试着写了个自动路由.请各路大神赐教...特别是eval这货.是否会引起安全问题...野路子js出身...不是啥都懂.请赐教.

这里只列出主要文件吧... 详情代码可见http://git.oschina.net/nmtuan/angular.js-autoRoute

代码

index.html

<!doctype html>
<html ng-app="myApp">
<head>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<h1>angular autoRoute</h1>
<div ng-view></div>
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="js/myApp.js"></script>

</body>
</html>

myApp.js

//路由范围与检测
var routeRange = {
    action: [],
    dos: [],
    //检测数组this[key]中是否包含val元素
    check: function (key, val) {
        var status = false;
        for (var i in this[key]) {
            if (this[key][i].indexOf(val) > -1) {
                status = true;
            }
        }
        return status;
    },
    //向this[key]中推入新元素val
    set: function (action, dos) {
        if (!this.check(this.action, action)) {
            this.action.push(action);
        }
        if (!this.check(this.dos, dos)) {
            this.dos.push(dos);
        }
    }
};
//错误页
var page404 = function ($scope) {
    $scope.msg = '404 Not Found.!';
};

var myApp = angular.module('myApp', ['ngRoute']);
//ngRoute
myApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/:action/:dos', {
            controller: ['$scope', '$routeParams', function ($scope, $routeParams) {
                var action = $routeParams.action;
                var dos = $routeParams.dos;
                //检测action与dos是否已经在routeRange中定义
                if (routeRange.check('action', action) && routeRange.check('dos', dos)) {
                    var dos = dos.replace(/(^|\s+)\w/g, function (s) {
                        return s.toUpperCase();
                    });
                    eval(action + dos + 'Ctrl($scope, $routeParams)');
                } else {
                    page404($scope);
                }
            }],
            templateUrl: function ($routeParams) {
                var action = $routeParams.action;
                var dos = $routeParams.dos;
                if (routeRange.check('action', action) && routeRange.check('dos', dos)) {
                    return 'template/' + $routeParams.action + '/' + $routeParams.dos + '.html';
                } else {
                    return 'template/page/404.html';
                }
            }
        })
        .otherwise({
            redirectTo: '/index/index'
        });
}]);

//example
routeRange.set('index', 'index');
var indexIndexCtrl = function ($scope, $routeParams) {
    $scope.action = $routeParams.action;
    $scope.dos = $routeParams.dos;
    $scope.text = 'hello world.!';
};

俩模板文件

404.html

<div ng-controller="page404">
    <h2>{{msg}}</h2>
</div>

index.html

<div ng-controller="indexIndexCtrl">
    <h2>{{action + ' - ' + dos}}</h2>
    <p><input type="text" ng-model="text"/></p>
    <p>{{text}}</p>
</div>

© 著作权归作者所有

共有 人打赏支持
NMTuan
粉丝 1
博文 3
码字总数 1616
作品 0
潍坊
程序员
私信 提问
加载中

评论(4)

小龙linux
小龙linux

引用来自“红薯”的评论

用函数来实现 templateUrl ,牛!

http://www.oschina.net/question/1464768_159626
NMTuan
NMTuan

引用来自“红薯”的评论

用函数来实现 templateUrl ,牛!
Leoops
Leoops

引用来自“红薯”的评论

用函数来实现 templateUrl ,牛!
你咋什么都玩啊?
红薯
红薯
用函数来实现 templateUrl ,牛!
现阶段前后端完全分离有必要吗

最近一段时间有学习使用jfinal与beetl,感觉很便捷的~但在技术选择上,我们老大建议使用AngularJs等前端框架与后端分离,不再使用JAVA的模板语言,后端只提供数据,请教下目前做前后端分离是...

明汕
2016/07/10
2.1K
17
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.1K
26
windows上安装yeoman,使用yeoman生成angularJs项目框架,谁有经验?

windows上安装yeoman,使用yeoman生成angularJs项目框架,谁有经验? 环境目前有: 1.ruby 2.1.7p400 (2015-08-18 revision 51632) [x64-mingw32] 2.Python 2.7.10 3.Sass 3.4.18 (Selectiv......

Yohance
2015/09/21
750
0
急急急!如何用angularjs编写后台管理系统的rest接口啊?在线等啊!

之前一直是做界面的,最近看到一个后台管理系统里面需要用angularjs完成数据交互完成登录,权限管理等操作,所以抓紧看了angularjs的内容,angularjs倒是还好懂,但是用到这个后台管理系统中...

forevernyn
2016/02/28
1K
1
用seaJs来动态加载angularjs

github地址:https://github.com/chaosforfun/Angular-test-seaJs Angular-test-seaJs angular测试驱动开发实际案例+seaJs按路由加载文件 测试 先是为了学习angular提倡的测试驱动,试着把a...

赵小笨
2013/09/23
0
2

没有更多内容

加载失败,请刷新页面

加载更多

集群介绍 ..

12月19日任务 18.1 集群介绍 18.2 keepalived介绍 18.3/18.4/18.5 用keepalived配置高可用集群 一.集群介绍 根据功能划分为两大类:高可用和负载均衡 高可用集群通常为两台服务器,一台工作,...

hhpuppy
13分钟前
0
0
TensorFlow的基础概念02

TensorFlow的计算流图 import osos.environ['TF_CPP_MIN_LOG_LEVEL'] = '2'#TensorFlow的计算模型,数据流图'''TensorFlow = Tensor + FlowTensor 张量 数据结构:多维数组Flo...

怪咖先生forever
19分钟前
1
0
大数据技术的发展趋势

大数据领域已经涌现出了大量新的技术,它们成为大数据采集、存储、处理和呈现的有力武器。这些技术下一步将如何发展?它们之中哪些技术将广为流行?又会诞生哪些新的技术? 技术趋向多样化,...

董黎明
34分钟前
7
0
藏在正则表达式里的陷阱

前几天线上一个项目监控信息突然报告异常,上到机器上后查看相关资源的使用情况,发现 CPU 利用率将近 100%。通过 Java 自带的线程 Dump 工具,我们导出了出问题的堆栈信息。 我们可以看到所...

前端小攻略
36分钟前
3
0
关联更新,关联查询

关联更新 update A,B SET A.c1=B.c1,A.c2=B.c2 where A.id=B.id and ... update A inner join on A.id=B.id set A.c1=B.c1,A.c2=B.c2 where... 关联查询 交叉连接(cross join),内连接(inner ......

关元
40分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部