今天完成的事情：

今天还是再次研究了angularhtml页面传值给后台的几种方法，之前用过不少，但是看的资料七七八八，理解的很不清晰，今天仔细研究理解了一波，

明天的计划：

任务8收尾，demo，开始任务9.

遇到的问题：

url页面间切换传值的几种方法：

1. 基于ui-router的页面跳转传参

(1) 在AngularJS的app.js中用ui-router定义路由，比如现在有两个页面，一个页面（producers.html）放置了多个producers，点击其中一个目标，页面跳转到对应的producer页，同时将producerId这个参数传过去。

state('producers', {

 url: '/producers',

 templateUrl: 'views/producers.html',

 controller: 'ProducersCtrl'

})

.state('producer', {

 url: '/producer/:producerId',

 templateUrl: 'views/producer.html',

 controller: 'ProducerCtrl'

})

(2) 在producers.html中，定义点击事件，比如ng-click="toProducer(producerId)"，在ProducersCtrl中，定义页面跳转函数 (使用ui-router的$state.go接口)：

.controller('ProducersCtrl', function ($scope, $state) {

 $scope.toProducer = function (producerId) {

  $state.go('producer', {producerId: producerId});

 };

});

(3) 在ProducerCtrl中，通过ui-router的$stateParams获取参数producerId，

.controller('ProducerCtrl', function ($scope, $state, $stateParams) {

 var producerId = $stateParams.producerId;

});

2 基于localStorage或sessionStorage的页面跳转传参

注意事项：通过LS或SS传参，一定要监听变量，否则参数改变时，获取变量的一端不会更新。AngularJS有一些现成的WebStorage dependency可以使用，譬如gsklee/ngStorage · GitHub，grevory/angular-local-storage · GitHub。下面使用ngStorage来简述传参过程：

(1) 上传参数到localStorage - Controller A

// 定义并初始化localStorage中的counter属性

$scope.$storage = $localStorage.$default({

 counter: 0

});

// 假设某个factory（此例暂且命名为counterFactory）中的updateCounter()方法

// 可以用于更新参数counter

counterFactory.updateCounter().then(function (data) {

 // 将新的counter值上传到localStorage中

 $scope.$storage.counter = data.counter;

});

(2) 监听localStorage中的参数变化 - Controller B

$scope.counter = $localStorage.counter;

$scope.$watch('counter', function(newVal, oldVal) {

 // 监听变化，并获取参数的最新值

 $log.log('newVal: ', newVal); 

});

收获：以上