文档章节

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

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

码上生花,ECharts 作品展示赛正式启动!>>>

牢骚

看了两天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 条评论,请先登录后再查看。
现阶段前后端完全分离有必要吗

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

明汕
2016/07/10
2.8K
17
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
764
0
急急急!如何用angularjs编写后台管理系统的rest接口啊?在线等啊!

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

forevernyn
2016/02/28
1.1K
1
[Angular 6] 初学angular,环境全部最新,[ ng serve ] 不能启动,卡在 95% 不动 => 解决方案

2018.9.7 问题描述: 通过ng serve命令启动angular应用时,卡在95%, ctrl+c 停掉后看到错误内容为找不到ng_modules下的angular模块下的package.json文件。 --- 之前在网上下过小demo,依赖包...

osc_n5vrwm1c
2018/09/07
3
0
如何优雅的使用 Angular 表单验证

随便说说,这一节可以跳过 去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模块中使用最新的 An...

why520crazy
2019/01/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Springboot Actuator

Springboot Actuator 1. 启用springboot actuator <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-actuator</artifactId></dependency>dep......

AngerWind
58分钟前
18
0
OSChina 周日乱弹 —— 一个幼小的猕猴桃等待食物转身

1@ 辽元 起床以后, 突然发现时间已经10点啦! 不会晚了吧? 忽然想起来今天是周末, 13 “梦见自己变成猫后,一下子惊醒了,不对是笑醒了。” @冰峰雪座 觉得昨晚的睡眠质量实在不是很好, ...

小小编辑
今天
33
0
【第一行代码--Android】Kotlin入门教程精简版

Google在2017年的I/O大会上宣布Kotlin正式成为Android的以及开发语言,Android Studio也对Kotlin提供了全面支持。 怎样运行kotlin的代码?通过https://try.kotlinlang.org 或者 IDEA 以及 其...

Drop_Table_User
今天
11
0
解决Cannot download "https://github.com/sass/node-sass/releases/download/binding.nod的问题

输入命令解决即可 npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

千年典韦
今天
10
0
测试jar 是否完整有错

cd WEB-INF/lib/for j in *.jar; do echo $j; jar tvf $j > /dev/null ; echo $j done; done

xiaodong16
今天
32
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部