AngularJS学习（三）

来源：互联网发布：停车场画线软件编辑：程序博客网时间：2024/05/29 12:29

一、过滤器（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的配置。

三、Small Tips

在javascript中，“”和‘’的区别：

1、“”会对其中的内容进行内容的检索，而‘’不会，因此‘’单引号效率高些；
2、‘’和“”一同出现的时候，可以使用“This’s a book”这样的方式，但是如果使用‘this\’s is a book’需要使用反斜杠进行转义。
3、推荐先使用’‘单引号。

0 0