【angular】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,首先你需要先下载好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使用。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

笑起来贼好看

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值