15-Angular的路由

现在非常流行单页面应用，传统都是通过ajax请求数据，前端拿到数据渲染到页面，这种无刷新的视图切换非常棒！但是致命的缺点就是刷新後无法保持原来的视图，解决此问题的一个方法是使用 hash，监听hashchange事件来进行视图切换，另一个方法是用HTML5的history API，通过pushState()记录操作历史，监听popstate事件来进行视图切换，也有人把这叫pjax技术。

现在开始介绍angular的$route！

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>$route</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script>
</head>
<body>

<div ng-controller="Aaa">
    <a href="#aaa">首页</a>
    <a href="#bbb">内容</a>
    <a href="#ccc">标题</a>
    <div ng-view></div>
</div>

<script type="text/javascript">

var m1 = angular.module(‘myApp‘,[‘ngRoute‘]);

m1.config([‘$routeProvider‘,function($routeProvider){
    $routeProvider.when(‘/aaa‘,{
        template : ‘<h1>AAA</h1>‘
    }).when(‘/bbb‘,{
        template : ‘<h1>BBB</h1>‘
    }).when(‘/ccc‘,{
        template : ‘<h1>CCC</h1>‘
    }).otherwise({   //默认哈希值，哈希值出现错误也可以执行
        redirectTo : ‘/aaa‘
    });
}]);
m1.controller(‘Aaa‘,[‘$scope‘,function($scope){

}]);
</script>
</body>
</html>

上面的例子很简单，除了用template之外还可以用templateUrl引入html的模板文件。

在when传入控制器的指向，实现不同的页面显示不同的数据。

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>$route</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script>
</head>
<body>

<div ng-controller="Aaa">
    <a href="#aaa">首页</a>
    <a href="#bbb">内容</a>
    <a href="#ccc">标题</a>
    <div ng-view></div>
</div>

<script type="text/javascript">

var m1 = angular.module(‘myApp‘,[‘ngRoute‘]);

m1.config([‘$routeProvider‘,function($routeProvider){
    $routeProvider.when(‘/aaa‘,{
        template : ‘<h1>AAA</h1>{{name}}‘,
        controller : ‘Aaa‘    //控制器指向
    }).when(‘/bbb‘,{
        template : ‘<h1>BBB</h1>{{name}}‘,
        controller : ‘Bbb‘
    }).when(‘/ccc‘,{
        template : ‘<h1>CCC</h1>{{name}}‘,
        controller : ‘Ccc‘
    }).otherwise({
        redirectTo : ‘/aaa‘
    });
}]);
m1.controller(‘Aaa‘,[‘$scope‘,function($scope){
    $scope.name = ‘xiecg-Aaa‘;
}]);
m1.controller(‘Bbb‘,[‘$scope‘,function($scope){
    $scope.name = ‘xiecg-Bbb‘;
}]);
m1.controller(‘Ccc‘,[‘$scope‘,function($scope){
    $scope.name = ‘xiecg-Ccc‘;
}]);

</script>
</body>
</html>

以事件的方式映射路由页面。

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>$route</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script>
</head>
<body>

<div ng-controller="Aaa">
    <a href="javascript:void(0);" ng-click="$location.path(‘aaa‘)">首页</a>
    <a href="javascript:void(0);" ng-click="$location.path(‘bbb‘)">内容</a>
    <a href="javascript:void(0);" ng-click="$location.path(‘ccc‘)">标题</a>
    <div ng-view></div>
</div>

<script type="text/javascript">

var m1 = angular.module(‘myApp‘,[‘ngRoute‘]);

m1.config([‘$routeProvider‘,function($routeProvider){
    $routeProvider.when(‘/aaa‘,{
        template : ‘<h1>AAA</h1>{{name}}‘,
        controller : ‘Aaa‘    //控制器指向
    }).when(‘/bbb‘,{
        template : ‘<h1>BBB</h1>{{name}}‘,
        controller : ‘Bbb‘
    }).when(‘/ccc‘,{
        template : ‘<h1>CCC</h1>{{name}}‘,
        controller : ‘Ccc‘
    }).otherwise({
        redirectTo : ‘/aaa‘
    });
}]);
m1.controller(‘Aaa‘,[‘$scope‘,‘$location‘,function($scope,$location){
    $scope.name = ‘xiecg-Aaa‘;
    $scope.$location = $location;
}]);
m1.controller(‘Bbb‘,[‘$scope‘,function($scope){
    $scope.name = ‘xiecg-Bbb‘;
}]);
m1.controller(‘Ccc‘,[‘$scope‘,function($scope){
    $scope.name = ‘xiecg-Ccc‘;
}]);

</script>
</body>
</html>

项目更复杂，页面相同(首页&index)，数据不同，需要对url进行传参。

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>$route</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script>
</head>
<body>

<div ng-controller="Aaa">
    <a href="javascript:void(0);" ng-click="$location.path(‘aaa/123‘)">首页</a>
    <a href="javascript:void(0);" ng-click="$location.path(‘bbb‘)">内容</a>
    <a href="javascript:void(0);" ng-click="$location.path(‘ccc‘)">标题</a>
    <a href="javascript:void(0);" ng-click="$location.path(‘aaa/456‘)">index</a>
    <div ng-view></div>
</div>

<script type="text/javascript">

var m1 = angular.module(‘myApp‘,[‘ngRoute‘]);
m1.config([‘$routeProvider‘,function($routeProvider){
    $routeProvider.when(‘/aaa/:num‘,{
        template : ‘<h1>AAA</h1>{{name}}‘,
        controller : ‘Aaa‘
    }).when(‘/bbb‘,{
        template : ‘<h1>BBB</h1>{{name}}‘,
        controller : ‘Bbb‘
    }).when(‘/ccc‘,{
        template : ‘<h1>CCC</h1>{{name}}‘,
        controller : ‘Ccc‘
    }).otherwise({
        redirectTo : ‘/aaa/:num‘
    });
}]);

m1.controller(‘Aaa‘,[‘$scope‘,‘$location‘,‘$routeParams‘,function($scope,$location,$routeParams){
    $scope.name = ‘xiecg-Aaa‘;
    $scope.$location = $location;
    console.log($routeParams);    //不同的数据
}]);
m1.controller(‘Bbb‘,[‘$scope‘,function($scope){
    $scope.name = ‘xiecg-Bbb‘;
}]);
m1.controller(‘Ccc‘,[‘$scope‘,function($scope){
    $scope.name = ‘xiecg-Ccc‘;
}]);
</script>
</body>
</html>

路由的事件监听。

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>$route</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script>
</head>
<body>

<div ng-controller="Aaa">
    <a href="#aaa">首页</a>
    <a href="#bbb">内容</a>
    <a href="#ccc">标题</a>
    <div ng-view></div>
</div>

<script type="text/javascript">

var m1 = angular.module(‘myApp‘,[‘ngRoute‘]);

m1.run([‘$rootScope‘,function($rootScope){
    //路由切换之前触发的事件
    $rootScope.$on(‘$routeChangeStart‘,function(event,current,pre){
        console.log(event);      //事件对象
        console.log(current);    //路径对应的数据值
        console.log(pre);        //上一个路径
    });
}]);

m1.config([‘$routeProvider‘,function($routeProvider){
    $routeProvider.when(‘/aaa‘,{
        template : ‘<h1>AAA</h1>‘
        //templateUrl : ‘temp.html‘
    }).when(‘/bbb‘,{
        template : ‘<h1>BBB</h1>‘
    }).when(‘/ccc‘,{
        template : ‘<h1>CCC</h1>‘
    }).otherwise({    //默认哈希值，哈希值出现错误也可以执行
        redirectTo : ‘/aaa‘
    });
}]);
m1.controller(‘Aaa‘,[‘$scope‘,function($scope){

}]);

</script>
</body>
</html>

补充：angular事件的传播机制。

<div ng-controller="Aaa">
    {{count}}
    <div ng-controller="Aaa" ng-click="$emit(‘myEvent‘)">
        {{count}}
        <div ng-controller="Aaa">
            {{count}}
        </div>
    </div>
</div>
<script type="text/javascript">
var m1 = angular.module(‘myApp‘,[]);

m1.controller(‘Aaa‘,[‘$scope‘,function($scope){
    $scope.count = 0;
    $scope.$on(‘myEvent‘,function(e){
        //console.log(e.targetScope);     //当前的
        //console.log(e.currentScope);    //目标的
        //console.log(e.name);            //事件名
        //e.stopPropagation();            //阻止冒泡
        $scope.count++;
    });
}]);
</script>

前面嵌套了三个controller，我们在中间的controller上绑定了click事件，使用$emit点击的时候，上面的controller也会触发事件。

如果是$broadcast点击就是往下传播。

学习笔记，如有不足，请指正！转载请保留原文链接，谢谢。

最後，微博求粉，谢谢。

时间： 2024-10-13 17:02:31

15-Angular的路由的相关文章

angular 4 路由风格 #锚点风格

当angular 编译完成后.部署到服务器,点击标签跳转路由.此时刷新页面.页面跳转403,我改回了锚点路径可以跳转页面后,刷新浏览器依旧显示正确页面.应该有其他方式让浏览器刷新后依旧正常工作的h5路由器. 改成锚点路径的代码如下 import {LocationStrategy, HashLocationStrategy} from '@angular/common'; { provide: LocationStrategy, useClass: HashLocationStrategy },

Angular 添加路由

var app=angular.module('kaifanla',['ng','ngRoute']);app.config(function($routeProvider){ //添加路由 $routeProvider .when('/文件名',{ templateUrl:'tpl/start.html', controller:'startCtrl' }) .when('/文件名',{ templateUrl:'tpl/main.html', controller:'mainCtrl' })

angular的路由跳转，的监听$rootScope.$on

使用angular来做项目时,习惯性的使用第三方路由插件ui-router配置路由.每一个状态都对应着一个页面, 因此对路由状态改变的监听也变的十分重要. 可以使用:$rootScope.$on(--.)监听 $stateChangeStart: 表示状态切换开始 $stateNoFound:没有发现 $stateChangeSuccess:切换成功 $stateChangeError:切换失败回调函数的参数解释: event:当前事件的信息 toState:目的路由状态 toParams:传

angular 通过路由获取ID

constructor( private dataService: TestListsService, private route: ActivatedRoute, ) { // 通过路由获取ID console.log(route); this.id = this.route.params.value['id']; } import { ActivatedRoute } from '@angular/router'; 原文地址:https://www.cnblogs.com/linsx/p/8

angular 2+ 路由守卫

1. 定义接口名称 /domain/login-guard.ts export interface LoginGuard { data: any; msg: string; status: boolean; } 2. 定义actions /ngrx/actions/login-guard.action.ts import { Action } from '@ngrx/store'; import {LoginGuard} from '../../domain/login-guard'; /**

Angular创建路由从主界面跳转到我们的cesium界面

我们要在一个独立的顶级模块中加载和配置路由器,它专注于路由功能,然后由根模块 AppModule 导入它. 按照惯例,这个模块类的名字叫做 APPRoutingModule,并且位于 src/app 下的 app-routing.module.ts 文件中. 使用 CLI 生成它. 1.在命令窗口输入ng generate module app-routing --flat --module=app --flat 把这个文件放进了 src/app 中,而不是单独的目录中.--module=app

angular之路由

一.核心问题路由要解决的核心问题是通过建立url和页面之间的对应的关系,使不同的页面可以通过不用的url来展示. 首先,当用户在浏览器上输入URL后,Angular将获取该URL并将其解析生成一个UrlTree实例其次,在路由配置中寻找并激活与UrlTree实例匹配的配置项再次,为配置项中指定的组件创建实例最后,将该组件渲染于路由组件的模板中<router-outlet>指令所在的位置二.安装或者下载angular-route的包通过npm或者cnpm安装,npm/cnpm ins

6、Angular Route 路由

1.没有嵌套路由类似 ui-route 上述的html用红字标记的是必须导入的.这是因为:路由并不在ng2中,需要我们额外引入,另外我们需要设置base href,这是个什么东西呢?相当于我们后续所有url的“前缀”,因为我们的app默认是基于"HTML 5 pushState" 风格的路由,所以我们需要加上base href,来保证当我们导航到深层次的url时候,资源可以被正确加载. 2.带参数和嵌套的 route

Angular 4 路由

1. 创建工程 ng new router --routing 2. 创建home和product组件 ng g component home ng g component product 3. 配置路由 4. 主页面导航

Angular 4 路由时传递数据

路由时传递数据的方式有 1. 在查询参数中传递数据 2. 在路由路径中传递参数 3. 在路由配置中传递参数一.在查询参数中传递数据在前一节的基础上,我们增加路由数据传递 2. 接收参数的地方 3. 显示产品ID 4. 效果图二.路径中传递参数 1. 修改路由配置 2. 使用路径调用 3. 接收 4. 效果图三.参数快照和参数订阅 snapshot参数快照参数订阅可以自己路由到自己如product/1 路由到prodct/2