文档章节

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

NMTuan
 NMTuan
发布于 2014/06/24 10:53
字数 427
阅读 832
收藏 3
点赞 2
评论 4

牢骚

看了两天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 ,牛!
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878 ⋅ 05/19 ⋅ 0

Angular 6.0正式版发布,都有哪些新功能

点击关注异步图书,置顶公众号 每天与你分享IT好书 技术干货 职场知识 在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在...

异步社区 ⋅ 05/08 ⋅ 0

Angular 6正式版发布,都有哪些新功能

在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。除此之外,这次更新还包括框架包(@angu...

code_xzh ⋅ 05/05 ⋅ 0

[Angular Material完全攻略] Day 01 - 开始 & 简介

转载 从Angular第2版正式release后,根据全球最大工程师讨论区StackOverflow的统计,从2016开始的Angular讨论度就不断窜升,甚至超越了React,直到了2017年,甚至摆脱了前一代Angularjs的阴影...

readilen ⋅ 05/21 ⋅ 0

Angular 的 Material Design 风格框架 - Angular Material

Material Design for Angular 是 Angular 官方团队开发的基于最新版本 Angular 的 Material Design 风格的框架,可和 Nest.js 搭配使用做全栈开发。 针对 Angular 1 版本的实现 https://www....

匿名 ⋅ 05/15 ⋅ 0

Vue、React、Angular最佳UI框架

摘要: 今天我们不聊技术,只"以貌取人"。 前言 之前有很多刚入门的小伙伴问我(上面是我的自拍照),现在前端Vue、React、Angular这三个框架似乎都很好,反而不知道选择什么了,我当时开玩笑...

Fundebug ⋅ 05/03 ⋅ 0

[Angular Material完全攻略] Day 02 - 环境设定 & 安装 & Hello World

今天我们将开始正式迈入Angular Material的世界,要学习使用Angular Material打造高品质及高质感的网页,当然要从安装Angular Material套件开始,本篇文章就来介绍基本的Angular Material安装...

readilen ⋅ 05/21 ⋅ 0

AngularJS:跟随官方教程,一起构建一个简单的项目

AngularJS大白话简介: AngularJS是一个前端框架,和Bootstrap不同,他是一个为了构建 单页应用 而诞生的。Bootstrap是为了解决CSS样式和一些简单的互动(主要是提供了各种各样的样式,我们直...

那就远走 ⋅ 05/11 ⋅ 0

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊?

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊? angular2和现在官网的angular6 就是 angular js 只是版本不同...

Jordan裔 ⋅ 05/19 ⋅ 0

AngularJS 的 Material Design 风格框架 - AngularJS Material

AngularJS Material 是 AngularJS 框架的谷歌 Material Design 标准的实现。AngularJS Material 包含一组丰富的、可重用、经过充分测试并可访问的 UI 组件。 针对 Angular 2 或更高版本的实现...

匿名 ⋅ 05/15 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Java Web如何操作Cookie的添加修改和删除

创建Cookie对象 Cookie cookie = new Cookie("id", "1"); 修改Cookie值 cookie.setValue("2"); 设置Cookie有效期和删除Cookie cookie.setMaxAge(24*60*60); // Cookie有效时间 co......

二营长意大利炮 ⋅ 今天 ⋅ 0

【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu ⋅ 今天 ⋅ 0

Spring JDBC使用方法

普通实现: 1、创建数据表customer。 可以使用任何数据库实现,在项目中要引入相应数据库驱动包并配置相应数据库连接。 2、创建Customer pojo。 Customer类的属性对应数据库的属性,除了为每...

霍淇滨 ⋅ 今天 ⋅ 0

Contos 7 安装Jenkins

Jenkins是一款能提高效率的软件,它能帮你把软件开发过程形成工作流,典型的工作流包括以下几个步骤 开发 提交 编译 测试 发布 有了Jenkins的帮助,在这5步中,除了第1步,后续的4步都是自动...

欧虞山 ⋅ 今天 ⋅ 0

revel

revel install go get github.com/revel/revelgo get github.com/revel/cmd create new app revel new git.oschina.net/zdglf/myapp run app revel run git.oschina.net/zdglf/myapp ot......

zdglf ⋅ 今天 ⋅ 0

49. Group Anagrams - LeetCode

Question 49. Group Anagrams Solution 思路:维护一个map,key是输入数组中的字符串(根据字符排好序) Java实现: public List<List<String>> groupAnagrams(String[] strs) { Map<Strin......

yysue ⋅ 今天 ⋅ 0

spring Email

使用spring发Email其实就是使用spring自己封装携带的一个javamail.JavaMailSenderImpl类而已。这个类可以当一个普通的java对象来使用,也可以通过把它配置变成spring Bean的方式然后注入使用...

BobwithB ⋅ 今天 ⋅ 0

spark 整理的一些知识

Spark 知识点 请描述spark RDD原理与特征? RDD全称是resilient distributed dataset(具有弹性的分布式数据集)。一个RDD仅仅是一个分布式的元素集合。在Spark中,所有工作都表示为创建新的...

tuoleisi77 ⋅ 今天 ⋅ 0

思考

时间一天天过感觉自己有在成长吗?最怕的是时光匆匆而过,自己没有收获!下面总结下最近自己的思考。 认识自己 认识另一个自己,人们常说要虚心听取别人意见和建议。然而人往往是很难做到的,...

hello_hp ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部