AngularJs--XHRs & Dependency Injection，angularjs
本文摘錄並解釋 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允許我們自己定義服務，為了防止產生衝突，最好不要用 $ 開頭。$$ 是表示這個服務是私人的，不允許使用者改寫。
-----------------------------------------------------------------------------------------------------------------------------------------------------------------注意我下面標的重點區就可以了，
1、ng-app加上
2、把angularjs引入就可以了
具體到 angularjs.org/ 這裡看
<!doctype html><html ng-app> //重點1<head> <meta charset="UTF-8"> <title>angularjs</title></head><body> <div> <label>Name:</label> <input type="text" ng-model="yourName"placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div><script src="ajax.googleapis.com/...min.js"></script>//重點2</body></html>
angularjs怎實現通知條
可以寫個指令：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>angularjs-focus</title>
</head>
<body>
<input type="text" set-Focus="">
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp',[]);
myApp.directive('setFocus', function(){
return function(scope, element){
element[0].focus();
};
});
</script>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
