AngularJs--XHRs & Dependency Injection

本文摘录并解释 AngularJs 引导片段-5 里面的一些重要片段。

The app/phones/phones.json file
in your project is a dataset that contains a larger list of phones stored in the JSON format.

Following is a sample of the file:

[
{
 "age": 13,
 "id": "motorola-defy-with-motoblur",
 "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
 "snippet": "Are you ready for everything life throws your way?"
 ...
},
...
]

上面是一个json格式的数据。angularjs提倡web开发的模块化。后台的职责只能是接受请求并处理,最后以一定的格式返回给前端的js代码。这里推荐用 json 因为 ng(angularjs 简称,以下都用ng代替)能自动识别并将json文件打包成一个对象直接拿来使用。

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

We‘ll use Angular‘s $http service in our controller to make an HTTP request to your web server to fetch the
data in theapp/phones/phones.json file. $http is
just one of several built-in Angular services that handle common operations in web apps. Angular injects these services
for you where you need them.

这里主要是说明 $http 是一个内置的服务,也就是库函数,主要用于向服务器发起http请求。至于你怎么拿到这个库函数,大致上可以分成四个步骤【1】编译器得到函数参数【2】将参数作为服务名进行搜索【3】若找到响应的服务,检测该服务是否已经生成实例【4】如果没有实例,生成一个新的实例。如果已经有了,那么返回这个实例。(单例模式)

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

app/js/controllers.js:

var phonecatApp = angular.module(‘phonecatApp‘, []);

phonecatApp.controller(‘PhoneListCtrl‘, function ($scope, $http) {
  $http.get(‘phones/phones.json‘).success(function(data) {
    $scope.phones = data;
  });

  $scope.orderProp = ‘age‘;
});

$http makes an HTTP GET request
to our web server, asking for phones/phones.json (the
url is relative to our index.html file).
The server responds by providing the data in the json file.

The $http service returns a promise
object
 with a success method.
We call this method to handle the asynchronous response and assign the phone data to the scope controlled by this controller, as a model called phones.
Notice that Angular detected the json response and parsed it for us!

To use a service in Angular, you simply declare the names of the dependencies you need as arguments to the controller‘s constructor function, as follows:

phonecatApp.controller(‘PhoneListCtrl‘, function ($scope, $http) {...}

Angular‘s dependency injector provides services to your controller when the controller is being constructed. The dependency injector also takes care of creating any transitive dependencies the service may have (services often depend upon other services).

Note that the names of arguments are significant, because the injector uses these to look up the dependencies.

这里主要说明 $http 这个服务在成功接受数据后会调用一个回调的方法,因为本身这个服务是异步的,所以需要回调,在回调函数中我们可以做一些赋值操作。接下来又说明了ng的自动依赖注入功能,在注入我们需要的服务的同时,也能同时注入主服务依赖的其他服务,以确保主服务工作正常。

最后又说了注入的字符串参数是有意义的,不能乱写,因为ng会根据这个字符串去找对应服务,如果名字写错了,那么就找不到这个服务了。

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

$ Prefix Naming
Convention

You can create your own services, and in fact we will do exactly that in step 11. As a naming convention, Angular‘s built-in services, Scope methods and a few other Angular APIs have a $ prefix
in front of the name.

The $ prefix is there to namespace
Angular-provided services. To prevent collisions it‘s best to avoid naming your services and models anything that begins with a $.

If you inspect a Scope, you may also notice some properties that begin with $$.
These properties are considered private, and should not be accessed or modified.

这部分主要讲ng中的前缀问题,$ 和 $$ 。$是内置服务和API的惯例前缀,ng允许我们自己定义服务,为了防止产生冲突,最好不要用 $ 开头。$$ 是表示这个服务是私有的,不允许用户改写。

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

时间: 2024-12-22 08:21:08

AngularJs--XHRs & Dependency Injection的相关文章

AngularJS之Dependency Injection(五)

前言 这一节我们来讲讲AngularJS中的依赖注入,在实际开发中Angular提供了具体的方法供我们去调用,但是一旦业务不能满足要求或者出现麻烦或者错误时导致无从下手,所以基于此我们有必要深入一点去了解内部的基本原理,这样我们才能将Angualr玩弄于鼓掌之间. 话题 在讲述依赖注入时我们有必要讲一讲一个组件decorator(暂且叫做装饰者).它也是创建服务的一个例子.decorator是一个设计模式,它能隔离修改在不修改源码的前提下.在Angular中,它能够在服务.指令.过滤器使用之前被

AngularJs学习笔记--Dependency Injection(DI,依赖注入)

原版地址:http://code.angularjs.org/1.0.2/docs/guide/di 一.Dependency Injection(依赖注入) 依赖注入(DI)是一个软件设计模式,处理代码如何得到它所依赖的资源. 关于DI更深层次的讨论,可以参观Dependency Injection(http://en.wikipedia.org/wiki/Dependency_injection),Inversion of Control(http://martinfowler.com/ar

[Angular 9] Improved Dependency Injection with the new providedIn scopes 'any' and 'platform'

@Injectable({ providedIn: "root" | "any" | "platform" }) export class MyService {} More ProvidedIn: root Every service defined with 'root' will be provided in the root injector and is a singleton for the whole application. La

[LINK]List of .NET Dependency Injection Containers (IOC)

http://www.hanselman.com/blog/ListOfNETDependencyInjectionContainersIOC.aspx I'm trying to expand my mind around dependency injection in .NET (beyond the two frameworks I've personally used) and an starting to put together a list of .NET Dependency I

IoC(Inversion of Control)控制反转和 DI(Dependency Injection)依赖注入

首先想说说IoC(Inversion of Control,控制倒转).这是spring的核心,贯穿始终.所谓IoC,对于spring框架来说,就是由spring来负责控制对象的生命周期和对象间的关系.这是什么意思呢,举个简单的例子,我们是如何找女朋友的?常见的情况是,我们到处去看哪里有长得漂亮身材又好的mm,然后打听她们的兴趣爱好.qq号.电话号.ip号.iq号---,想办法认识她们,投其所好送其所要,然后嘿嘿--这个过程是复杂深奥的,我们必须自己设计和面对每个环节.传统的程序开发也是如此,在

Dependency Injection 筆記 (4)

續上集未完的相關設計模式... Composite 模式延續先前的電器比喻.現在,如果希望 UPS 不只接電腦,還要接電風扇.除濕機,可是 UPS 卻只有兩個電源輸出孔,怎麼辦? 我們可以買一條電源延長線,接在 UPS 上面.如此一來,電風扇.除濕機.和電腦便都可以同時插上延長線的插座了.這裡的電源延長線,即類似Composite Pattern(組合模式),因為電源延長線本身又可以再連接其他不同廠牌的延長線(這又是因為插座皆採用相同介面),如此不斷連接下去. 呃….延長線的比喻有個小問題:它在

Dependency Injection 筆記 (1)

<.NET 相依性注入>連載 (1) 本文從一個基本的問題開始,點出軟體需求變動的常態,以說明為什麼我們需要學習「相依性注入」(dependency injection:簡稱 DI)來改善設計的品質.接著以一個簡單的入門範例來比較沒有使用 DI 和改寫成 DI 版本之後的差異,並討論使用 DI 的時機.目的是讓讀者先對相關的基礎概念有個概括的理解,包括可維護性(maintainability).寬鬆耦合(loose coupling).控制反轉(inversion of control).動態

(You Can Hack It, Architecture and Design) =&gt; { Dependency Injection; }

(You Can Hack It, Architecture and Design) => { Dependency Injection; }

Scala 深入浅出实战经典 第57讲:Scala中Dependency Injection实战详解

王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 腾讯微云:http://url.cn/TnGbdC 360云盘:http://yunpan.cn/cQ4c2UALDjSKy 访问密码 45e2土豆:http://www.tudou.com/programs/view/5LnLNDBKvi8/优酷:http://v.youku.com/v_show/id_

Introduction to dependency injection with unityContainer

/* By Dylan SUN */ This article is just a simple introduction to unityContainer. If you have already used unityContainer as a dependency injection or IoC (Inversion of control) library, this article is not for you. As you know, dependency injection i