angularJs路由操作实例（一）

最新推荐文章于 2020-07-07 07:01:00 发布

泠泠在路上

最新推荐文章于 2020-07-07 07:01:00 发布

阅读量904

点赞数

分类专栏： angularJs 文章标签： angularjs

本文链接：https://blog.csdn.net/u012396955/article/details/73134850

版权

angularJs 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

一、初始化定义路由

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../org/angular.min.js"></script>
    <!--引入包-->
    <script src="../org/angular-ui-router.min.js"></script>
</head>
<body>
<div ng-app="module">
    <div ui-view></div>
</div>
<script>
   //加入ui.router模块
    var m = angular.module('module', ['ui.router']);
    //配置路由
  m.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
        //默认路由
        $urlRouterProvider.otherwise('/index');
        //定义路由规则
        $stateProvider.state('default',{
            url:'/index',
            template:'<h1>泠泠在路上</h1>'
        })
    }])
</script>
</body>
</html>

二、路由跳转

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../org/angular.min.js"></script>
    <!--引入包-->
    <script src="../org/angular-ui-router.min.js"></script>
</head>
<body>
<div ng-app="module">
    <a href="" ui-sref="home2">首页</a>
    <a href="#/lists">列表页</a>
    <div ui-view>提示你:你访问的页面不存在</div>
</div>
<script>
    //加入ui.router模块
    var m = angular.module('module', ['ui.router']);
    m.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
        //默认路由
        $urlRouterProvider.otherwise('/index');
        //定义路由规则
        $stateProvider
                .state('default', {
                    url: '/index',
                    template: '<h1>首页</h1>'
                })
                .state('home2', {
                    url: '/home',
                    template: '<h1>主页</h1>'
                })
                .state('lists', {
                    url: '/lists',
                    template: '<h1>列表页</h1>'
                })
    }])
</script>
</body>
</html>

三、路由模板设置方式

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../org/angular.min.js"></script>
     <!--引入包-->
    <script src="../org/angular-ui-router.min.js"></script>
</head>
<body>
<div ng-app="module">
    <a href="" ui-sref="home">主页</a>
    <a href="#/lists">列表页</a>
    <div ui-view>提示你:你访问的页面不存在</div>
</div>
<script>
     //加入ui.router模块
    var m = angular.module('module', ['ui.router']);
    m.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
        //默认路由
        $urlRouterProvider.otherwise('/index');
        //定义路由规则
        $stateProvider
                .state('default', {
                    url: '/index',
                    template: '<h1>首页</h1>'
                })
                .state('home', {
                    url: '/home',
                    //路由模板
                    templateUrl: 'view/home.html'
                })
                .state('lists', {
                    url: '/lists',
                    template: '<h1>列表页</h1>'
                })
    }])
</script>
</body>
</html>

home.html

<!--可以写任何需要的布局-->
<style>
    h1{
        background: red;
        color:yellow;
        height:500px;
    }
</style>
<h1>泠泠在路上</h1>

四、路由控制器设置方式

<div ng-app="module">
    <a href="" ui-sref="home">主页</a>
    <a href="#/lists">列表页</a>
    <div ui-view>提示你:你访问的页面不存在</div>
</div>
<script>
    var m = angular.module('module', ['ui.router']);
    m.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
        //默认路由
        $urlRouterProvider.otherwise('');
        //定义路由规则
        $stateProvider
                .state('home', {
                    url: '/home',
                    templateUrl: 'view/home.html',
                    //加入控制器
                    controller: 'ctrl'
                })
                .state('lists', {
                    url: '/lists',
                    template: '<h1>列表页</h1>'
                })
    }]);
    //定义控制器
    m.controller('ctrl',['$scope',function($scope){
        $scope.name= '百度';
        $scope.data=[
            {title:'标题1'},
            {title:'标题2'}
        ];
    }])
</script>

home.html

<h1>泠泠在路上:  {{name}}</h1>
<li ng-repeat="v in data">{{v.title}}</li>

五、控制器或指令中控制路由跳转

在控制器或指令中使用：$state.go(url);进行跳转。

<div ng-app="hd">
    <a href="" ui-sref="home">首页</a>
    <a href="#/lists">列表页</a>
    <div ui-view>提示你:你访问的页面不存在</div>
</div>
<script>
    var m = angular.module('hd', ['ui.router']);
    m.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
        //默认路由
        $urlRouterProvider.otherwise('');
        //定义路由规则
        $stateProvider
                .state('default', {
                    url: '',
                    template: '<h1>后盾人</h1>'
                })
                .state('home', {
                    url: '/home',
                    templateUrl: 'view/home.html',
                    controller: 'ctrl'
                })
                .state('lists', {
                    url: '/lists',
                    template: '<h1>列表页</h1>'
                })
    }]);
    m.controller('ctrl',['$scope','$state',function($scope,$state){
        $scope.go=function(url){
        //控制器里控制跳转
            $state.go(url);
        }
    }])
</script>

home.html

<h1>泠泠在路上 :  {{name}}</h1>
<li ng-repeat="v in data">{{v.title}}</li>
<hr>
<!--跳转链接-->
<a href="" ng-click="go('lists')">跳转到列表</a>

泠泠在路上

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
angularJs路由操作实例（一）

一、初始化定义路由<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <script src="../org/angular.min.js"></script>  <script src="../org/angular-ui-router.min.js"></script>
复制链接

扫一扫