点击价格与名称可以进行排序，排序时显示向上或向下的箭头，在搜索框中可以输入查询条件过滤数据。验证搜索框中的内容只能是字母与数字，不允许输入其它类型的字符。
练习2：
请自定义一个过滤器实现敏感关键字过滤，在过滤器中可以准备一个敏感词数组，将敏感词替换成指定的符号，默认为*号。
{{"This is some bad,dark evil text" | censor:"bad,dark,evil":"happy"}}
显示结果：
This is some happy,happy happy text
三、指令（directive）
指令(directive)是AngularJS模板标记和用于支持的JavaScript代码的组合。AngularJS指令标记可以是HTML属性、元素名称或者CSS类，指令扩展了HTML的行为。指令可以分为：
a)、内置指令：支持AngularJS功能的指令、扩展表单元素的指令、把作用域绑定到页面元素的指令
b)、自定义指令，增加与扩展出新的指令。
ng-app这样的标记我们称之为指令。模板通过指令指示AngularJS进行必要的操作。 比如：ng-app指令用来通知AngularJS自动引导应用；ez-clock 指令用来通知AngularJS生成指定的时钟组件。
3.1、支持AngularJS功能的指令
3.1.1、应用与模块（ng-app）
自动载入启动一个AngularJS应用，声明了ng-app的元素会成为$rootScope的起点
每个HTML文档只有一个AngularJS应用能被自动载入启动,文档中找到的第一个ngApp将被用于定义自动载入启动的应用的根元素。要在一个HTML文档中运行多个应用，你必须使用angular.bootstrap来手工启动。AngularJS应用间不能嵌套。
3.1.2、控制器（ng-Controller）
ngController指令给视图添加一个控制器，控制器之间可以嵌套，内层控制器可以使用外层控制器的对象，但反过来不行。这是angular支持基于“视图-模型-控制器”设计模式原则的主要方面。
Angular中的MVC组件有：
模型 — 模型是一个域的属性集合；域被附加到DOM上，通过绑定来存取域属性。
视图 — 模板(进行数据绑定的HTML)会被呈现到视图中。
控制器 — ngController指令声明一个控制器类；该类包含了业务逻辑，在应用后台使用函数和值来操控域中的属性。
注意，你也能使用$route服务定义一个路由来将控制器附加到DOM上。一个常见错误是在模板上再次使用ng-controller定义一个控制器。这将引起控制器被附加和执行两次。
3.1.3、包含（ng-Include）
获取、编译并引用一个外部HTML片段(也可以是内部的)
默认情况下，模板URL被强制为使用与应用文档相同的域名和协议。这是通过调用$sce.getTrustedResourceUrl 实现的。为了从其它的域名和协议载入模板，你可以采用 白名单化 或 包裹化 任一手段来作为可信任值。参考 Angular的 强上下文转义。
此外，浏览器的 同源策略 和 交叉源资源共享(CORS) 策略会进一步限制模板是否能成功载入。例如，ngInclude 在所有浏览器上不能进行交叉域请求，一些浏览不能访问 file:// 等。
<ng-include src="" [onload=""] [autoscroll=""]></ng-include> <ANY ng-include="" [onload=""] [autoscroll=""]></ANY> <ANY> </ANY>
外部包含：
外部包含是指包含一个独立的外部文件。
包含时请注意中间页面地址要加引号，需要的是一个字符，如果不加会认为是一个变量。
header.html
<header> <h2>欢迎光临天狗商城</h2> </header>
footer.html
<style> .cls1 { background: lightblue; height: 100px; line-height: 100px; text-align: center; } </style> <footer> <h3>版本所有 违者必究</h3> </footer>
d05.html
<!DOCTYPE html> <!--指定angular管理的范围--> <html ng-app="app01"> <head> <meta charset="UTF-8"> <title>指令</title> </head> <body> <!--指定控制器的作用范围--> <form ng-controller="Controller1" ng-init="header='https://www.jb51.net/header.html'"> <ng-include src="https://www.jb51.net/article/header"></ng-include> <ng-include src="'https://www.jb51.net/header.html'"></ng-include> <div ng-include="'footer.html'"></div> </form> <!--引入angularjs框架--> <script src="https://www.jb51.net/js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //定义模块，指定依赖项为空 var app01 = angular.module("app01", []); //定义控制器，指定控制器的名称，$scope是全局对象 app01.controller("Controller1", function($scope) { }); function regTest() { var reg1=new RegExp("\d","igm"); var reg2=https://www.jb51.net/\d/igm; var str="This is some bad,dark evil text"; str=str.replace(/bad|dark|evil/igm,"Happy"); console.log(str); //取出Hello Hello var str="<input value='Hello'/><input value='World'/>"; //将value中的内容前后增加一个* } regTest(); </script> </body> </html>
运行结果：
内部包含：
先定义模板，指定id与类型，模板中可以是任意片段：
<script type="text/ng-template">
引用模板，模板中可以使用angular表达式，引用的方法与外部包含一样。