AngularJS (3)

商業，創業，業務，職涯，美食，葡萄酒，閱讀，網路科技。

從 Larry 創業以及商業的經驗，希望以白話的口吻，介紹給大家這個商業的世界。

FB粉專會頻繁地更新 Larry 對於商業、社會、人生的觀察與心得，歡迎大家追蹤互動~

https://docs.angularjs.org/tutorial

一直以來沒有真正走過官方教程。其實這官方教程有一些很基本扎實的東西，尤其是 coding convention 的部分可以參考。

1. ng-app 宣告在 html tag, ng-controller 宣告在 body tag.
2. object array 換行，indent 的方式

$scope.phones = [
  {'name': 'Nexus S',
   'snippet': 'Fast just got faster with Nexus S.'},
  {'name': 'Motorola XOOM™ with Wi-Fi',
   'snippet': 'The Next, Next Generation tablet.'},
  {'name': 'MOTOROLA XOOM™',
   'snippet': 'The Next, Next Generation tablet.'}
];

3. Filtering Repeaters. ng-repeat 可以加上 filter. 另外也可以選擇 sort ‘orderBy’

4. $http. 首先教程上 sample code $http.get(‘url’).success(…
https://docs.angularjs.org/api/ng/service/$http 有提到
“The $http legacy promise methods success and error have been deprecated. Use the standard then method instead.”
=> 用 then 而不是 success / error.

get 回來的 data 一定要是 json 格式，如果 callback function input 是 ‘response’, url 上放的 data 是 {“PPP”: “QQQ”}, 則在 callback function 中 response.data.PPP 中存的就是 “QQQ”. 另外要特別注意的是 json 的 object array 最後不能有逗點。上述 $scope.phones array 最後一個 object 的後方加逗號是 ok 的，但在 json 不行。另外如果 json 中要直接指定 array 的話，直接用上述 object array 的格式即可，中括號開頭，中括號結尾。Again, 如果 callback function input 是 ‘response’, response.data 存的就是該 array.

https://docs.angularjs.org/tutorial/step_05
“$ Prefix Naming Convention
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 $.”

也是 Coding convention 的東西，inject service to controller 方法一：

function PhoneListCtrl($scope, $http) {...}
PhoneListCtrl.$inject = ['$scope', '$http'];
phonecatApp.controller('PhoneListCtrl', PhoneListCtrl);

方法二

phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', function($scope, $http) {...}]);

因為 $scope, $http 是 Angular 內建 services, 可以省略

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

5. ng-route. https://docs.angularjs.org/tutorial/step_07
“Providers can only be injected into config functions. Thus you could not inject $routeProvider into PhoneListCtrl.
Starting with AngularJS version 1.2, ngRoute is in its own module and must be loaded by loading the additional angular-route.js file.”

這章節的 sample 新增一個 module ‘phonecatControllers’, 將多個 view 的 controller 設定在 ‘phonecatControllers’ 底下，再將 ‘phonecatControllers’ inject 進 app module ‘phonecatApp’, 在 ‘phonecatApp’ config 中就可以指定 route templateUrl 和 controller 了。

6. custom filter. Add filter module, add filter name, add the filter module to the dependencies of app module, then html can use the filter.

7. REST and Custom Services https://docs.angularjs.org/tutorial/step_11
首先 inject 進 controller 時，如果有自定的 services, 即使是 Angular 內建的 services 也要列出 (下例中 $scope 要列出，不能省略)

phonecatControllers.controller('PhoneListCtrl', ['$scope', 'Phone', function ($scope, Phone) {

}]);

“An important thing to notice in the code above is that we don't pass any callback functions when invoking methods of our Phone service. Although it looks as if the result were returned synchronously, that is not the case at all. What is returned synchronously is a “future” — an object, which will be filled with data when the XHR response returns.”

有些人會認為”當下 return 後來填上”的方式 ambiguous, 所以教程上也提供了設定 callback 的方式。