AngularJS入门教程记录

参考：http://docs.angularjs.org/tutorial/

创建Module

使用module()方法。在第2个参数中传入依赖模块数组。

var phonecatApp = angular.module('phonecatApp', [
    'ngRoute',
    'phonecatControllers'
]);

注册Controller

使用controller()方法。

NG识别参数名并自动注入依赖。若使用代码压缩，则参数名将被压缩从而无法使用自动注入。

使用以下两种显式注入方式可解决代码压缩带来的问题。

方式一、

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

方式二、

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

注册控制器时通常采用匿名函数的写法

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

使用$http模块进行HTTP请求

请求url为'phones/phones.json'，并通过success方法设置请求成功后的回调函数。

NG将自动侦测JSON响应并解析。

$http.get('phones/phones.json').success(function(data) {
    $scope.phones = data;
});

注册Service

注册服务，需要创建一个依赖于ngResource【angular-resource.js】的模块。

使用factory方法（除此之外还有provide()和service()方法），显式注入ngResource.$resource。

教程中没有对$resource解释得比较清楚，故而参考了在线文档，并翻译如下：

http://www.cnblogs.com/koukabatsugun/p/3442525.html

var phonecatServices = angular.module('phonecatServices', ['ngResource']);
 
phonecatServices.factory('Phone', ['$resource',
    function($resource){
        return $resource('phones/:phoneId.json', {}, {
            query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
    });
}]);

以上，$resouce的第三个参数actions中，覆盖了默认的query动作。

1、设置HTTP请求为GET方法。

2、指定url模板中的【phoneId】参数为【phones】。

3、返回值为数组。

使用Phone服务的参考代码如下：

$scope.phones = Phone.query();

$scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
    $scope.mainImageUrl = phone.images[0];
});

定义Router

为应用配置路由，需要创建一个依赖于ngRoute【angular-route.js】的模块。

使用模块的config()方法，显式注入ngRoute.$routeProvider。

var phonecatApp = angular.module('phonecatApp', [
    'ngRoute',
    'phonecatControllers'
]);
 
phonecatApp.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
        　　when('/phones', {
           　　 templateUrl: 'partials/phone-list.html',
            　　controller: 'PhoneListCtrl'
       　　 }).
　　　　　　 when('/phones/:phoneId', {
            　　templateUrl: 'partials/phone-detail.html',
           　　 controller: 'PhoneDetailCtrl'
       　　 }).
       　　 otherwise({
            　　redirectTo: '/phones'
    });
}]);

从URL中获取参数

依赖$routeParams。

从【/phones/:phoneId】中获取phoneId，只需$routeParams.phoneId。

phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
    function($scope, $routeParams) {
        $scope.phoneId = $routeParams.phoneId;
}]);