angular 插件ngSanitize ngRoute
ngSanitize
作用：让浏览器简析 html 标签
步骤：
- 引入 js angular-sanitize.min.js
- 在 module 中引入一下插件 var app = angular.module(“myApp”, [‘ngSanitize’]);
- 使用 绑定数据
无标题文档
ngRoute
- AngularJS 路由介绍 ：
AngularJS路由功能是一个纯前端的解决方案，与我们熟悉的后台路由不太一样。后台路由，通过不同的 URL 会路由到不同的控制器上(controller)，再渲染(render)到页面(HTML)。AngularJS 的前端路由，需求提前对指定的(ng-app)，定义路由规则(routeProvider)，然后通过不同的 URL，告诉(ng-app)加载哪个页面(HTML)，再渲染到(ng-app)视图(ng-view)中。
AngularJS 的 前端路由，虽然 URL 输入不一样，页面展示不一样，其实完成的单页(ng-app)视图(ng-view)的局部刷新。这样来看，AngularJS 做单页应用就有点标配的感觉了。 - 步骤：
- 引入 js angular-route.min.js
- 在 module 中引入一下插件 var app = angular.module(“myApp”, [‘ngRoute’]);
- 添加模板指令位置
- 配置路由的内置服务
$routeProvider，在config中配置
$routeProvider的方法：
otherwise(params)：设置用于路由改变时，与任何其他路由定义无法匹配时使用的路由定义。
when(path, route)：向$route服务添加新的路由。path是指定的URL路径，route标明路由的处理。
$routeParams服务
作用：检索当前路由的参数集。
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
$routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'}
- 路由的相关方法
- reload();
使路由服务重新加载当前路由，即使路由没有改变。 - updateParams(newParams);
操作路由服务更新当前的URL，使用newParams里指定的路由参数指定当前路由参数。
- 路由的相关事件
-
$routeChangeStart
URL路由开始变化（未跳转成功）的时候触发的事件。
-
$routeChangeSuccess
URL路由变化成功的时候触发的事件。
-
$routeChangeError
URL路由变化失败的时候触发的事件。
-
$routeUpdate
当承诺被拒绝时广播。
- 案例
无标题文档
template1.html外部文件
这是外部引入的template
{{text}}
注意：templateUrl 通过ajax请求模板资源，在Chrome浏览器中，如果想通过AJAX请求不同域中的资源，很可能就会遇到 “Origin null is not allowed by Access-Control-Allow-Origin” 的错误。
这是因为在新版本浏览器中安全策略引起。简单的说，如果XMLHttpRequest 请求的URL和当前页面不同一个域中时，浏览器会检测响应http header中有没有 Access-Control-Allow-Origin项，如果此项值为空或者与当前页面的域不匹配时，就会报此错误。
扩展：使用$location完成路由切换
无标题文档