AngularJs ui router

最新推荐文章于 2024-05-27 15:27:28 发布

若水三千你是一千

最新推荐文章于 2024-05-27 15:27:28 发布

阅读量332

点赞数

CC 4.0 BY-SA版权

分类专栏： AngularJs 文章标签： Angularjs

本文链接：https://blog.youkuaiyun.com/daiyutage/article/details/79212438

AngularJs 专栏收录该内容

7 篇文章

订阅专栏

AngularJs ui router是一个用于路由的第三方库，比AngularJs本身的路由更强大和易用

创建一个SPA页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../lib/bootstrap.min.css">
    <script src="../lib/angular.min.js"></script>
    <script src="../lib/angular-ui-router.js"></script>
</head>
<body>
    <div ng-app="helloworld">
        <a ui-sref="hello">Hello</a>
        <a ui-sref="about">About</a>
        <div ui-view=""></div>
    </div>

    <script>
        var a = angular.module('helloworld',['ui.router']);
        //使用config将$stateProvider和$urlRouterProvider依赖注入
        a.config(function ($stateProvider,$urlRouterProvider) {
            var helloState = {
                name:'hello',
                url:'/hello',
                template:'<h1>这是hello页面</h1>'
            };
            var aboutState = {
                name:'about',
                url: '/about',
                template:'<h1>这是about页面</h1>'
            };
            var otherState = {
                name:'other',
                url:'/other',
                template:'<h2>出错啦</h2>'
            };
            //设置当没有找到匹配的url时的跳转
            $urlRouterProvider.otherwise("/other");
            $stateProvider.state(helloState);
            $stateProvider.state(aboutState);
            $stateProvider.state(otherState);

        })
    </script>

</body>
</html>