angular 路由去除#号

1.  路由启动          $locationProvider.html5Mode(true);

app.js

define([
    ‘angular‘,
    "App/Ctrl/controllers",
    "App/Directive/directive",

    "angularRoute"
], function (angular,controllers,directives,appDirec) {
    var app=angular.module(‘myApp‘, ["ngRoute",controllers.name,directives.name])
    templete="/front/propertyEntrust/view/templete"
   /* /limitSell/add?propertyId=33 */

    app.config([‘$routeProvider‘,"$locationProvider", function ($routeProvider,$locationProvider) {

        $locationProvider.html5Mode(true);

        $routeProvider.when(‘/detail/:Id‘, { //详情页面
            templateUrl: templete+‘/detail.html‘
        });

        $routeProvider.when(‘/rent/add/:propertyId‘, {  //一般出租
            templateUrl: templete+‘/rent.html‘
        });

        $routeProvider.when(‘/rent/edit/:Id‘, {  //一般出租
            templateUrl: templete+‘/rent.html‘
        });

        $routeProvider.when(‘/sale/add/:propertyId‘, {
            templateUrl: templete+‘/sale.html‘
        });
        $routeProvider.when(‘/sale/edit/:propertyId‘, {
            templateUrl: templete+‘/sale.html‘
        });

        $routeProvider.when(‘/exclusiveRent/add/:propertyId‘, { //独家出租
            templateUrl: templete+‘/exclusiveRent.html‘
        });
        $routeProvider.when(‘/exclusiveRent/edit/:Id‘, { //独家出租
            templateUrl: templete+‘/exclusiveRent.html‘
        });

        $routeProvider.when(‘/exclusiveSale/add/:propertyId‘, {
            templateUrl: templete+‘/exclusiveSale.html‘
        });
        $routeProvider.when(‘/exclusiveSale/edit/:Id‘, {
            templateUrl: templete+‘/exclusiveSale.html‘
        });

        $routeProvider.when(‘/limitSell/add/:propertyId‘, { //签赔
            templateUrl: templete+‘/limitSell.html‘
        });
        $routeProvider.when(‘/limitSell/edit/:Id‘, { //签赔
            templateUrl: templete+‘/limitSell.html‘
        });

        $routeProvider.when(‘/err/:propertyId‘, {
            templateUrl: templete+‘/err.html‘
        });
        $routeProvider.otherwise({redirectTo: ‘/rent‘});
    }]);

    return app
});

2. 设置前端路由开始的字段 即服务器路由的最后的字段

<base href="/index/">

3, 服务器配置  nodejs为例

app.get(‘/fy/propertyEntrustApply/index/*‘, function (req, res) {
    res.render("a", {});
});

/*app.get(‘/property/:id(\\d+)‘, function (req, res) {

 res.render("b",{});
 });*/
app.get(‘/property/:id‘, function (req, res) {

    res.render("b", {});
});

app.get(‘/qmTable‘, function (req, res) {

    res.render("c", {});
});

如上所示     http://localhost:3000/fy/propertyEntrustApply/index/rent/add/21

/fy/propertyEntrustApply/index/  为服务器路由  指向a.ejs

之后/rent/add/21  就是前端路由了

angular 路由去除#号

时间: 2024-10-27 14:48:19

angular 路由去除#号的相关文章

Angular路由的定义和使用

一.什么是routing(路由) Almost all non-trivial, non-demo Single Page App (SPA) require multiple pages. A settings page is different from a dashboard view. The login page is different from an accounts page(设置页面不同于控制页面,登录页面不同于账号信息页面....就是说一个应用很多功能不同的页面) 我们可以使

angular路由详解:

1.$routeProvider ngRoute模块中的服务 2.otherwise:设置用于路由改变时,与任何其他定义的路由无法匹配的时候执行的代码 3.when:为$route服务定义新的路由 例 var app=angular.module('myApp',['ngRoute']); //配置angular路由//$routeProvider是ngRoute模块中的服务 app.config(function($routeProvider){ //when:第一个值是配置路由的名称,第二个

angular路由(自带路由篇)

一.angular路由是什么? 为了实现SPA多视图的切换的效果,其原理可简述为每个 URL 都有对应的视图和控制器.所以当我们给url后面拼上不同的参数就能通过路由实现不同视图的切换. 二.文件总览 1.新建文件 一级目录新建ngRoute.html(为主页面,里面进行路由配置) 一级目录新建view文件夹,里面再新建三个子页面aboutus.html,home.html,order.html 一级目录存放angular.js和angular-route.js文件,文件存放位置依自己喜好即可

【angular.js】UI-Router之angular路由学习

AngularJs中的路由,应用比较广泛,主要是允许我们通过不同的url访问不同的内容,可实现多视图的单页web应用.下面看看具体怎么使用. 关于路由 通常我们的URL形式为http://jtjds.cn/first/page,但在单页web应用中angularjs通过#+标记实现,比如下面的页面,将是下文中的路由列子. http://192.168.1.109:8000/angular-program/src/main.html#/pagetable/page1 http://192.168.

angular路由介绍

AngularJS路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样.后台路由,通过不同的URL会路由到不同的控制器上(controller),再渲染(render)到页面(HTML).AngularJS的前端路由,需求提前对指定的(ng-app),定义路由规则(routeProvider),然后通过不同的URL,告诉(ng-app)加载哪个页面(HTML),再渲染到(ng-app)视图(ng-view)中. AngularJS的前端路由,虽然URL输入不一样,页面展示不一样,其实完成

angular路由切换后的一些问题。

我们在使用angular的时候,路由总是最让人头疼的地方. 在这里给大家解决一些来回切换遗留下的小问题 比如我们在使用ng-route时主页面含有轮播图,当你切换到其他页面再切回主页面时会发现主页面的轮播图不会动. 对于这个问题我们要用到angular的一个指令 初始化 ng-init, html <div ng-init='init()'>路由过来的页面</div> //包含轮播图 这里说明一下,我的控制器写在body中,名为ctrl js var app = angular.m

Angular路由(三)

AngularJs ng-route路由详解 其实主要是$routeProvider搭配ng-view实现. ng-view的实现原理,基本就是根据路由的切换,动态编译html模板. 前提 首先必须在页面引入angular.js和angular-route,注意在angular-route之前引入angular <script type="text/javascript" src="js/angular.min.js" ></script>

bootstrap 有些控件需要调用锚点,会与angular 路由 冲突

最简单的方法 就是 在 #号前加/, 但有人说 在服务器上回失效,也不知道是什么原理.慎用 最靠谱的方法 就 是 使用bootstrap中的js控制控件, 比如轮播图的上一页 下一页,就可以在 angular的控制器中添加这两个方法. bootstrap的轮播图部分代码 <!-- Controls --> <a class="left carousel-control" href="" ng-click="prev()" rol

angular 路由的简单使用

html结构: <body ng-app='rootApp'> <ul> <li><a href='#/'>主页</a></li> <li><a href='#/floor1'>一楼</a></li> <li><a href='#/floor2'>二楼</a></li> </ul> <!-- ng-view 渲染站位 --