Angular路由使用

最新推荐文章于 2022-06-16 15:00:27 发布

Orangesss_

最新推荐文章于 2022-06-16 15:00:27 发布

阅读量218

点赞数

本文链接：https://blog.csdn.net/Orangesss_/article/details/82082172

版权

Angular路由使用

1.什么是路由机制?

AngularJS是协助搭建单页面工程的前端开源框架, 它通过MVC模式使得开发与测试变得更容易;

AngularJS路由机制的思想?
1. 通常网页中的 header和footer是不需要改变的;也就是说在不同的页面中会看到相同的header和footer.
2. 相同的部分不需要每次都进行加载;
3. 路由机制的实现:(变化部分)
    在页面内通过[#/页面名称], 映射到访问正文内容页面, 基于Ajax方式将变化的内容加载后,显示到指定的区域.

2.AngularJS案例

1. 在项目中引入 angular-route.js;
2. 编写页面布局, 将AngularJS加载变化部分div, 指定ng-view;
3. 编写Angular 路由配置 routeProvider.
    最后, 要把ngRoute模块在我们的应用中当作依赖加载进去.
    angular.module("myApp", ['ngRoute']);
<body ng-app="myApp">
    <div>
        <h1>header</h1>
        <a href="#/JavaEE">JaveEE</a>
        <a href="#/ios">ios</a>
        <a href="#/Android">Android</a>
    </div>
    <!--路由加载后, 更新变化的内容-->
    <div ng-view>

    </div>
    <div>
        <h1>footer</h1>
    </div>
    <script type="text/javascript">
        // 定义myApp模块
        var myApp = angular.module("myApp", ["ngRoute"]);
        // 配置模块路由
        myApp.config(["$routeProvider", function(){
           $routeProvicer
               .when("/JavaEE", {
                    templateURL: "javaee.html"
           }).when("/ios", {
                    templateURL: "ios.html
           }).when("/Android", {
                    templateURL: "Android.html  
           }).otherwise({
                    redirectTo : "javaee.html"
           });
        }]);
    </script>
</body>

Orangesss_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Angular路由使用

Angular路由使用1.什么是路由机制?AngularJS是协助搭建单页面工程的前端开源框架, 它通过MVC模式使得开发与测试变得更容易;AngularJS路由机制的思想?1. 通常网页中的 header和footer是不需要改变的;也就是说在不同的页面中会看到相同的header和footer.2. 相同的部分不需要每次都进行加载;3. 路由机制的实现:(变化部分) ...
复制链接

扫一扫