angular路由

1，背景：

首先谈谈APP应用。平时我们用的app总是多页面，如果用原生安卓或者苹果，那当然很流畅啦。但是当我们用一般的html页面做移动端，简单时候我们可以用这样的标签去链接页面时，速度还是可以的。 　　但是当我们的应用越来越多时，切换起来没那么流畅。又是碍于网速，页面加载进来有点慢。但是在angular里面，我们可以用路由进行切换。因为在angular里面，我们用户一般在加载这样的应用时，会整个的缓存在手机上。我们用路由进行切换时，不用再发起HTTP请求了。体验比原来好。

angular有自带的路由模块叫ngRouter。但是，大家很少用它，因为它的功能太有限，往往满足不了需求， 于是基于ngRouter开发的第三方路由模块，ui.router ，受到了大家的“追捧”。所以今天主要是围绕ui-router来进行学习 首先讲一下ui.router的一些优点在哪里？ 1，多视图，2，嵌套视图。 多视图，就是页面可以显示多个动态变化的不同区块。 嵌套视图就是页面某个动态变化区块中，嵌套着另一个可以动态变化的区块。

2.知识剖析

ui-router 的工作原理非常类似于 Angular 的路由控制器，但它只关注状态。在应用程序的整个用户界面和导航中，一个状态对应于一个页面位置通过定义controller、template和view等属性，来定义指定位置的用户界面和界面行为  通过嵌套的方式来解决页面中的一些重复出现的部位

3.常见问题

跳转页面的时候如何传参？

4.解决方案

ui-sref、$state.go跳转页面的两种方式，其实本质上面ui-sref最后也是通过state.go方法进行实现页面的跳转，下面讲一下如何实现传参

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

              $scope.toPage2 = function (id) {

                 $state.go('page2', {ID:id});

             };

            //接收页面：

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

              var receivedId = $stateParams.ID;

               console.log(receivedId);

            //打印的结果即为id

            });

5.编码实战

$urlRouterProvider.when("","/pageTab");

    $stateProvider

        .state("pageTab",{

            url:"/pageTab",

            templateUrl:"pageTab.html",

            resolve:{

                loadMyFile:_lazyLoad(

                    ['css/pageTab.css',

                    'framework/ptteng-paging/pagination.js']

                )

            }

        })

        .state("pageTab.page1",{

            url:"/page1",

            templateUrl:"page1.html",

            controller:'load',

            resolve:{

                loadMyFile:_lazyLoad(

                    ['js/page1.js','css/page1.css']

                )

            }

        })

6.扩展思考

还有其他一些传参方法是如何实现的？

可以通过点击事件进行传参

html中：

ng-click=“toPage2(name,number)”

控制器中：

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

 $scope.toPage2 = function (name,number) {

 $state.go('page2', {

 args:{

  NAME:name,

  NUMBER:number

  });

 };

});

在第二个页面中通过$staeParams获得参数ID。

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

   var receivedName = $stateParams.args.NAME;

   var receivedNumber = $stateParams.args.NUMBER;

});

7.参考文献

http://blog.csdn.net/tenlee/article/details/52400531

http://www.cnblogs.com/GoodPingGe/p/4364383.html

今天完成的事：

对审核详情的接口弄了很长时间，然而还是没有弄好。感觉需要好好反思一下。然后修改了banner的样式和完善了详情页的样式。

明天的计划：明天按计划继续工作。

遇到的问题：

做任务的时候不能死磕，遇到问题要及时请教。及时沟通。不能耽误整体的进度。还需要进一步学习和反思和反省。