【angular】angular-ui-router学习_angular-ui-router菜鸟教程

作者：天景科技苑 | 2024-08-21 01:22:47

踩

angular-ui-router菜鸟教程

Angular-ui-router是建立SPA的route框架，学好ui-router框架，我们能更好的优化我们的web前端。

下面先呈上我们的index.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>learn-ui-router</title>
    <style>
        .active {
            color : red;
            font-weight : 600;
        }
    </style>
</head>
<body ng-app="app"> <!-- 申明这是一个angular模块 -->
    <!-- ui-sref 是一个指令，当点击的时候，会激活一个状态,它的功能类似于href,它代表的是一个state，有了这个指令后，dom会自动在这个a上面生成一个href属性，属性值就是state的url值-->
    <!-- ui-sref-active 代表当状态被激活的时候，呈现的class ,可以自定义样式，然后值写成你定义的即可 -->
    <a ui-sref="main" ui-sref-active="active">main</a>
    <a ui-sref="about" ui-sref-active="active">about</a>
    <a ui-sref="help" ui-sref-active="active">help</a>
    <!-- 上面状态激活后，模板加载的地方 -->
    <ui-view></ui-view>
    <script src="js/angular.min.js"></script>
    <script src="js/angular-ui-router.js"></script>
    <script>
        angular.module("app",['ui.router'],function($stateProvider){
            $stateProvider.state({
                name : "main",
                url : "/main",
                template : "<span> i have a dream ! </span>"
            }).state({
                name : "about",
                url : "/about",
                template : "<span> This is a about page ! </span>"
            }).state({
                name : "help",
                url : "/help",
                template : "<span> please call the 110 for help ! </span>"
            })
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

1，首先你需要先下载好angular.js或者 angular.min.js 还有 angular-ui-router.js ，
2，创建一个module，angular.module()，该方法在参数个数不同的时候，功能也不尽相同，当一个参数的时候，如： var getModule = angular.module("app") 该方法代表获取一个建立好的module，那么如何创建一个module呢？ angular.module("app",[依赖项],configFunction) 依赖项可以为空数组，configFunction也可不写，或者angular.module(“app”,[依赖项]).config(function(){})，效果是一样的
3，$stateProvider提供三个state，供上面的ui-sref使用。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/天景科技苑/article/detail/1009254