【angular】angular-ui-router学习

发布时间：2020-12-17 09:44:19 所属栏目：安全来源：网络整理

导读：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 ;

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使用。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!