1.AngularJS--路由

最新推荐文章于 2022-07-13 14:20:25 发布

「已注销」

最新推荐文章于 2022-07-13 14:20:25 发布

阅读量350

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/dream_cat_forever/article/details/82718247

版权

Web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.整体把握

AngularJS是一个单页面的处理程序，访问的入口只有一张，也就是说只有一张对外暴露的html文件。在该入口文件中有一个重要的概念，视图：此视图可能是空的，将会被各种html片段多替换。
这里写图片描述

路由：我们在访问视图部分的时候可能什么也看不到，所以需要用html代码片段进行替换，这个过程就是路由。

模块：进行功能划分，目的是配置路由。

2.项目步骤

（1）引入文件

进行路由的控制，需要引入两个文件，angular.min.js （核心文件）和 angular-ui-router.min.js （路由文件）。

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-ui-router.min.js"></script>

（2）书写html片段

A.html

<div>A</div>

B.html

<div>B</div>

C.html

<div>C</div>

（3）书写模块

// 创建路由模块
var m = angular.module("app",["ui.router"]);

// 配置路由
m.config(function($stateProvider,$urlRouterProvider){
    $urlRouterProvider.otherwise("/A"); // 激发路由
    $stateProvider.state("A",{
        url:"/A",
        views:{
            "main":{
                templateUrl:'templates/A.html',
            }
        }
    }).state("B",{
        url:"/B",
        views:{
            "main":{
                templateUrl:'templates/B.html',
            }
        }
    }).state("C",{
        url:"/C",
        views:{
            "main":{
                templateUrl:'templates/C.html',
            }
        }
    })
})

备注：

var m = angular.modual(“app”,[模块需不需要别人的帮助可以查看源码])

激发路由是在页面加载的时候，初始化视图（上面实例默认视图部分用A.html替换），激发的是url地址。

“main”是需要替换的视图名称。

state中第一个参数是路由的名称，对应的是ui-sref属性的值。

<ul class="header">
    <li ui-sref="A">视图A</li>
    <li ui-sref="B">视图B</li>
    <li ui-sref="C">视图C</li>
</ul>

配置路由在项目中是最重要的一部分，项目的转向，实际就是在视图中对html进行替换

（4）页面托管

整个html页面交给模块托管。

<html lang="en" ng-app="app">

3.实现结果

这里写图片描述

源码地址：https://gitee.com/DreamForever/front-end.git

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1.AngularJS--路由

1.整体把握AngularJS是一个单页面的处理程序，访问的入口只有一张，也就是说只有一张对外暴露的html文件。在该入口文件中有一个重要的概念，视图：此视图可能是空的，将会被各种html片段多替换。路由：我们在访问视图部分的时候可能什么也看不到，所以需要用html代码片段进行替换，这个过程就是路由。模块：进行功能划分，目的是配置路由。2.项目步骤（1）引入文件进行...
复制链接

扫一扫