文档章节

看了两天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 ,牛!
用seaJs来动态加载angularjs

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

赵小笨
2013/09/23
0
2
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
0
2
ngular2 VS Angular4 深度对比:特性、性能

在Web应用开发领域,Angular被认为是最好的开源JavaScript框架之一。 Google的Angular团队已于3月23日发布了Angular4,而期待已久的Angular2版本则是之前版本的完全重构。 对于成熟的开发人员...

机器的心脏
06/02
0
0
用karma测试angularjs应用

说来惭愧,研究angularjs也有一段时间了,却一直抛弃了angularjs最大的好处之一——测试。这个周末下决心研究下怎么用给angularjs应用做测试。 安装karma 其实,这么久以来一直没用到angular...

赵小笨
2013/09/15
0
4
Angular项目构建指南 - 不再为angular构建而犹豫不决

前言 接触Angular也有小半个月了,虽然没有使劲折腾,不过正所谓"no zuo no die".学一门新东西,不好好折腾一下总觉得对不起祖国,最不起人民...好像扯远了,想写前言来着.为什么要写这篇构建指南...

顽Shi
2014/06/16
0
16

没有更多内容

加载失败,请刷新页面

加载更多

原型模式

1、原型模式-定义 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象 克隆(浅度克隆->拷贝值类型或者引用,深度克隆->创建新的对象,开辟新的内存) 例如客户端知道抽象Pro...

阿元
今天
39
0
awk命令扩展使用操作

awk 中使用外部shell变量 示例1 [root@centos01 t1022]# A=888[root@centos01 t1022]# echo "" | awk -v GET_A=$A '{print GET_A}'888[root@centos01 t1022]# echo "aaaaaaaaaaaaa" | aw......

野雪球
今天
33
0
深入解析MySQL视图VIEW

Q:什么是视图?视图是干什么用的? A:视图(view)是一种虚拟存在的表,是一个逻辑表,本身并不包含数据。作为一个select语句保存在数据字典中的。   通过视图,可以展现基表的部分数据;...

IT--小哥
今天
43
0
虚拟机学习之二:垃圾收集器和内存分配策略

1.对象是否可回收 1.1引用计数算法 引用计数算法:给对象中添加一个引用计数器,每当有一个地方引用它时,计数器值就加1;当引用失效时,计数器值就减1;任何时候计数器值为0的对象就是不可能...

贾峰uk
今天
33
0
smart-doc功能使用介绍

smart-doc从8月份底开始开源发布到目前为止已经迭代了几个版本。在这里非常感谢那些敢于用smart-doc去做尝试并积极提出建议的社区用户。因此决定在本博客中重要说明下smart-doc的功能,包括使...

上官胡闹
昨天
43
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部