angular文档学习记录

/ 0评 / 0

我该什么时候使用$location?

只要你的应用想更改当前地址,或者你想要修改浏览器的当前地址,就用它吧!

什么时候不该用它?

 
在浏览器地址变化的时候,它不会导致全页面刷新。要想在地址变化之后重载整个页面,请使用底层API<span style="box-sizing: border-box; color: #333333;">$window</span><span style="box-sizing: border-box; color: #333333;">.</span><span style="box-sizing: border-box; color: #333333;">location</span><span style="box-sizing: border-box; color: #333333;">.</span><span style="box-sizing: border-box; color: #333333;">href</span>

$location服务配置

要想配置<span style="box-sizing: border-box; color: #333333;">$location</span>服务,应该获取<span style="box-sizing: border-box; color: #333333;">$locationProvider</span>对象,然后按下面的方法设置它的参数:

  • html5Mode(模式): {boolean}
    <span style="box-sizing: border-box; color: #333333;">true</span> - 参见下文中的“HTML5模式”
    <span style="box-sizing: border-box; color: #333333;">false</span> - 参见下文中的“Hashbang模式”
    默认值: <span style="box-sizing: border-box; color: #333333;">false</span>

  • hashPrefix(前缀): {string}
    Hashbang的URL前缀(用于Hashbang模式或者使用Html5模式但运行在老式浏览器中)
    默认值: <span style="box-sizing: border-box; color: #dd1144;">""</span>(空字符串)

范例配置

$locationProvider.html5Mode(true).hashPrefix('!');


replace方法

有一个特殊的<span style="box-sizing: border-box; color: #333333;">replace</span>方法,用来告诉$location服务:你下次和浏览器同步的时候,应该用新地址“替代”最后一条历史记录而不是“追加”新纪录。这在你实现重定向的时候很有用,否则它将“玩死”浏览器的“后退”按钮(“后退”立刻触发一次重定向,我胡汉三又回来了!)。要想改变当前地址却不创建新历史记录,你可以这样调用:

  $location.path('/someNewPath');
  $location.replace();
  // 你也可以像这样把它们串起来:$location.path('/someNewPath').replace();

 
注意,setter方法不会立刻更新<span style="box-sizing: border-box; color: #333333;">window</span><span style="box-sizing: border-box; color: #333333;">.</span><span style="box-sizing: border-box; color: #333333;">location</span>。反之,<span style="box-sizing: border-box; color: #333333;">$location</span>服务是挂在与<span style="box-sizing: border-box; color: #333333;">作用域(</span><span style="box-sizing: border-box; color: #333333;">scope</span><span style="box-sizing: border-box; color: #333333;">)</span>的生命周期中的,它会在作用域的<span style="box-sizing: border-box; color: #333333;">$digest</span>阶段把多个<span style="box-sizing: border-box; color: #333333;">$location</span>调用合并到一起,然后“提交”到<span style="box-sizing: border-box; color: #333333;">window</span><span style="box-sizing: border-box; color: #333333;">.</span><span style="box-sizing: border-box; color: #333333;">location</span><span style="box-sizing: border-box; color: #333333;">对象中。由于对</span><span style="box-sizing: border-box; color: #333333;">$location</span><span style="box-sizing: border-box; color: #333333;">的状态的多次修改会被合并成一次修改通知浏览器,在一个生命周期内你只要调用了一次</span>replace<span style="box-sizing: border-box; color: #333333;">操作就可以“提交”一个</span><span style="box-sizing: border-box; color: #333333;">replace</span><span style="box-sizing: border-box; color: #333333;">操作(“替换”而不是“追加”历史记录)。浏览器地址一旦被更新,</span><span style="box-sizing: border-box; color: #333333;">$location</span><span style="box-sizing: border-box; color: #333333;">服务器就会重置</span>replace()<span style="box-sizing: border-box; color: #333333;">方法设置的标识,将来的修改将会追加新的历史记录,除非再次调用</span>replace()`。




概念 说明
模板(Template) 带有Angular扩展标记的HTML
指令(Directive) 用于通过自定义属性和元素扩展HTML的行为
模型(Model) 用于显示给用户并且与用户互动的数据
作用域(Scope) 用来存储模型(Model)的语境(context)。模型放在这个语境中才能被控制器、指令和表达式等访问到
表达式(Expression) 模板中可以通过它来访问作用域(Scope)中的变量和函数
编译器(Compiler) 用来编译模板(Template),并且对其中包含的指令(Directive)和表达式(Expression)进行实例化
过滤器(Filter) 负责格式化表达式(Expression)的值,以便呈现给用户
视图(View) 用户看到的内容(即DOM
数据绑定(Data Binding) 自动同步模型(Model)中的数据和视图(View)表现
控制器(Controller) 视图(View)背后的业务逻辑
依赖注入(Dependency Injection) 负责创建和自动装载对象或函数
注入器(Injector) 用来实现依赖注入(Injection)的容器
模块(Module) 用来配置注入器
服务(Service) 独立于视图(View)的、可复用的业务逻辑
 

正确使用控制器

通常情况下,控制器不应被赋予太多的责任和义务,它只需要负责一个单一视图所需的业务逻辑。

最常见的保持控制器“纯度”的方法是将那些不属于控制器的逻辑都封装到服务(services)中,然后在控制器中通过依赖注入调用相关服务。详见指南中的 依赖注入 服务 这两部分。

注意,下面的场合千万不要用控制器

  • 任何形式的DOM操作:控制器只应该包含业务逻辑。DOM操作则属于应用程序的表现层逻辑操作,向来以测试难度之高闻名于业界。把任何表现层的逻辑放到控制器中将会大大增加业务逻辑的测试难度。ng 提供数据绑定 (数据绑定) 来实现自动化的DOM操作。如果需要手动进行DOM操作,那么最好将表现层的逻辑封装在 指令 中
  • 格式化输入:使用 angular表单控件 代替
  • 过滤输出:使用 angular过滤器 代替
  • 在控制器间复用有状态或无状态的代码:使用angular服务 代替
  • 管理其它部件的生命周期(如手动创建 service 实例)
 

Angular把一个元素的标签和属性名字进行规范化,来决定哪个元素匹配哪个指令。 我们通常用区分大小写的规范化命名方式(比如<span style="box-sizing: border-box; color: #333333;">ngModel</span>)来识别指令。 然而,HTML是区分大小的,所以我们在DOM中使用的指令只能用小写的方式命名, 通常使用破折号间隔的形式(比如:<span style="box-sizing: border-box; color: #333333;">ng</span><span style="box-sizing: border-box; color: #333333;">-</span><span style="box-sizing: border-box; color: #333333;">model</span>).

规范化的过程如下所示:

  1. 从元素或属性的名字前面去掉<span style="box-sizing: border-box; color: #333333;">x</span><span style="box-sizing: border-box; color: #333333;">-</span> and <span style="box-sizing: border-box; color: #333333;">data</span><span style="box-sizing: border-box; color: #333333;">-</span>
  2. <span style="box-sizing: border-box; color: #333333;">:</span><span style="box-sizing: border-box; color: #333333;">-</span>, 或 <span style="box-sizing: border-box; color: #333333;">_</span>分隔的形式转换成<span style="box-sizing: border-box; color: #333333;">小驼峰命名法(</span><span style="box-sizing: border-box; color: #333333;">camelCase</span><span style="box-sizing: border-box; color: #333333;">)</span>.
 

什么情况下该用元素名,什么情况下该用属性名? 当创建一个含有自己模板的组件的时候,建议使用元素名,常见情况是,当你想为你的模板创建一个DSL(特定领域语言)的时候。如果仅仅想为已有的元素添加功能,建议使用属性名.



 

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注