angularJs搭建多页面应用-angularJs路由。

最新推荐文章于 2022-10-24 18:19:11 发布

LUCKY - W · J

最新推荐文章于 2022-10-24 18:19:11 发布

阅读量2.8k

点赞数 1

分类专栏： angularJs 文章标签： angularjs 应用

本文链接：https://blog.csdn.net/qq_33152517/article/details/51852743

版权

angularJs 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

ng-app 指令定义一个 AngularJS 应用程序。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

ng-bind 指令把应用程序数据绑定到 HTML 视图。

ng-controller 指令定义了应用程序控制器。

ng-repeat 指令用于循环输出指定次数的 HTML 元素。

ng-click 指令定义了 AngularJS 点击事件。

ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。

以下为html代码：

<!DOCTYPE html>
<html lang="en" ng-app="demo"><table border="1" width="200" cellspacing="1" cellpadding="1"><tbody><tr><td> </td><td> </td></tr><tr><td> </td><td> </td></tr><tr><td> </td><td> </td></tr></tbody></table>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/angular.min.js"></script>
    <script src="controller/index.js"></script>
    <script src="js/angular-route.min.js"></script>
    <style>
        a{
            color: black;
        }
        a:hover{
            cursor: pointer;
            color: red;
            box-shadow: #1b6d85;
        }
        li{
            list-style: none;
        }
    </style>
</head>
<body ng-controller="main">
<header>
    <nav class="">
        <ul class="nav nav-pills">
            <li class="pagination" ng-repeat="item in navlist" ng-click="go(item)" ng-class="currItem===item?'active':''"><a>{{item.name}}</a></li>
        </ul>
    </nav>
</header>
<main ng-view></main>
</body>
</html>

以下为js代码：

/**
 * Created by acerp3 on 2016/7/6.
 */
angular.module("demo",['ngRoute'])
    .config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider){
       $locationProvider.html5Mode=true;
        $routeProvider.when(
            '/hot',{templateUrl:'view/hot.html',controller:'hot'}
        )

    }])
    .service("getlist",function($http,$q){
        return {
            get:function(){
                var defer=$q.defer();
                $http({url:'cgi/list.json',method:'post',data:{a:1}})
                    .success(function(data){
                       defer.resolve(data);
                    }).error(function(data){
                    defer.reject("oh no an error,try again.");
                });
                return defer.promise;
            }
        };
    })
    .controller("hot",function($scope,getlist){
        getlist.get().then(function(data){
            $scope.list=data.list;
            //console.log($scope.list);
        },function(data){
            console.log(data);
        })

    })

    .controller("main",function($scope,$location){
        $scope.navlist=[
            {
                name:"今日热销",
                id:"hot",
                isHidden:0
            },
            {
                name:"最新评论",
                id:"comment",
                isHidden:0
            },
            {
                name:"发现文章",
                id:"artical",
                isHidden:0
            }
        ];
        $scope.go=function(item){
          $scope.currItem=item;
            $location.path(item.id);

        };
    });

以下为目录结构：

html:首先使用ng-app定义应用的跟元素，ng-controller定义一个控制器 main,ng-repeat循环数组navlist(item in navlist 将循环得到的元素

{{item.name}}显示),ng-click定义单击事件go(item),ng-class给元素添加一个active(currItem===item?'active':''   三目表达式)。

js:1:angular.module绑定应用程序demo选择控制器main定义一个数组navlist。

2:angular路由依赖angular-route.js文件，将文件导入，在绑定应用处写上所依赖的文件名angular.module("demo",["ngRoute"])，若有多个依赖文件

用逗号隔开。

3:config函数配置路由规则，注入俩个服务$routeProvider\$locationProvider,$routeProvider定义路由规则，$locationProvider定义解析路径参阅

模式，$locationProvider.html5Mode=true(参阅html5模式，false参阅hashbang模式，默认为false。)。

4:when函数按顺序定义所有路由，第一个参数为URL，第二个参数为路由配置对象。

5:通过内置服务得到服务器的数据。

6:把拿到的数据注入到控制器。

LUCKY - W · J

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angularJs搭建多页面应用-angularJs路由。

ng-app 指令定义一个 AngularJS 应用程序。 ng-model 指令把元素值（比如输入域的值）绑定到应用程序。 ng-bind 指令把应用程序数据绑定到 HTML 视图。ng-controller 指令定义了应用程序控制器。ng-repeat 指令用于循环输出指定次数的 HTML 元素。ng-click 指令
复制链接

扫一扫

专栏目录