AngularJS学习（三）

最新推荐文章于 2018-11-16 10:40:08 发布

HNAer_RadAsm

最新推荐文章于 2018-11-16 10:40:08 发布

阅读量552

点赞数

CC 4.0 BY-SA版权

分类专栏： angularjs 文章标签： angularjs

本文链接：https://blog.youkuaiyun.com/HNAer_RadAsm/article/details/46898349

angularjs 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了AngularJS中的过滤器(filter)使用方法及自定义过滤器的实现，并详细讲解了如何通过路由配置(RouteConfig)来实现单页面应用(SPA)的导航功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、过滤器（filter）

1、angular本身定义了许多的过滤器，如：

1>filter

将指定数据进行过滤，只要任意的属性中含有过滤的数据中的部分，就将进行过滤:

<script>
        var app=angular.module("app",[]);
        app.controller("ZController",function($scope){
           $scope.bb="abvhhdfks";
            $scope.mm="ddd";
            $scope.phones = [
                {"name": "Nexus S",
                    "snippet": "Fast just got faster with Nexus S.",
                    "age": 0},
                {"name": "Motorola XOOM™ with Wi-Fi",
                    "snippet": "The Next, Next Generation tablet.",
                    "age": 1},
                {"name": "MOTOROLA XOOM™",
                    "snippet": "The Next, Next Generation tablet.",
                    "age": 2}
            ];

            $scope.jk=[{"name":"van","age":"33"},{"name":"tian","age":"44"},{"name":"wen","age":"666"}];
        });
    </script>

上面定义了一个angularJS的module：app，在这个“app”上定义一个“ZController“，在”ZController”中定义了一个“phones”数组，注意在js中定义数组的方式，严格按照这样”XXX”:”XXX”的格式进行组织，否则很容易发生不能生效的代码。

在中进行filter的使用

<body ng-app="app" ng-controller="ZController">
{{bb|uppercase}}
{{phones | filter:"XOOM"}}
{{jk|filter:"van"}}
</body>

上面的{{phones | filter:"XOOM"}}定义了一个将数组中任意属性中包含“XOOM”的数据进行过滤。{{bb | uppercase}}定义了将bb这个在“ZController”中定义的字符串进行全部大写化。
依次种种。

2、自定义Filter

app.filter("BFilter",function(){
           var vv=function(){
               return "This is a angularJS-Filter!";
           }
            return vv;
        });

上面定义的一个“BFilter”，将任何东西均过滤成“This is a angularJS-Filter!”这个字符串。

使用：

<body ng-app="MyApp" ng-controller="BController">
{{cc}}
<hr/>
{{cc|BFilter}}
</body>

二、路由配置

使用routeConfig进行路由配置，实现单页面的web app

1、运行环境配置

你需要在模拟的服务器的路由环境下进行测试，比方是Tomcat。

2、index.html

<!DOCTYPE html>
<html ng-app="RApp">
<head lang="en">
    <meta charset="UTF-8">
    <title>angularJS路由配置</title>
    <script src="../js/angularJS-mini.js"></script>
    <script src="../js/angularJS-route-mini.js"></script>

    <script>
        var app=angular.module('RApp',['ngRoute']);
        function RouteConfig($routeProvider){
            $routeProvider.when('/',{controller:ListController,templateUrl:'lists.html'})
                    .when('/haha/:id',{controller:DetailController,templateUrl:'detail.html'})
                    .otherwise({redirectTo:'/'});
        }
        app.config(RouteConfig);
        persons=[
            {id:0,aa:1,name:'van'},{id:1,aa:2,name:'tian'}
        ];
        function ListController($scope){
            $scope.persons=persons;
        }

        function DetailController($scope,$routeParams){
            $scope.person=persons[$routeParams.id];
        }
    </script>

</head>
<body>

<div ng-view>

</div>

</body>
</html>

3、lists.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<ul ng-repeat="person in persons">
    <li>
        <a href="#/haha/{{person.id}}">{{person.name}}</a>
    </li>
</ul>


</body>
</html>

4、detail.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h3>{{person.name}}</h3>
<hr/>
<h3>
    <a href="#/">返回</a>
</h3>
</body>
</html>

5、实现的效果

index.html是index页面，我们配置的路由是默认是“/”是进入“lists.html”，路由是“/haha/:id”时，进入list页面，这里的“：id”会将id以{id:XXX}这样的形式存储到$routeParams中。

6、注意点

正如这里中所讲到的，两种定义controller
的方式。

其一：

app.controller('ListController',function($scope){
        $scope.persons=persons;
   });
    app.controller('DetailController',function($scope,$routeParams){
        $scope.person=persons[$routeParams.id];
    });

其二：

function ListController($scope){
        $scope.persons=persons;
    }
    function DetailController($scope,$routeParams){
        $scope.person=persons[$routeParams.id];
    }

其中，两种方法都是正确的，但是第一种不是全局配置的，第二种才是。路由配置时，我们需要进行全局的Controller的配置。