Node.js进行web开发知识清单2

承接上文，继续分析Node.js进行web开发的过程，整理知识点如下。

1、使用ui-sref和ui-view实现页面导航的过程。

ui-sref根据路由查找对应state的URL，并将其设置到a的href属性上；
ui-view本质是占位符，最终使用a的href的内容渲染该区域；
还有一个ng-view，区别是ng-router和ui-router两种路由组件。

2、视图路由原理

指定应用(ng-app)的路由规则（routProvider），然后通过不同的URL，告诉ng-app加载那个HTML页面，再将html页面渲染到那个ng-view上。前端的路由过程就是这个逻辑：ng-router和ui-router两种路由组件。

3、视图路由语法

$stateProvider
    .state('home',{
        url: '/viewshome',
        templateUrl: 'page/home.tpl.html',
        controller: 'HomeController',
        controllerAs: 'ctrl',
        resolve: {
            load: ['$q', '$rootScope', function($q, $rootScope) {
                //创建一个deferred对象
                var defer = $q.defer();

                //依赖一个控制器，执行的回调
                require(['home-controller'], function() {
                    //scopt.$apply方法是在数据发生变化后更新到绑定的页面元素上
                    $rootScope.$apply(function() {
                        defer.resolve();
                    });
                });

                //defer.promise用于返回一个promise对象
                return defer.promise;
            }]
        }
    })
    .state('scenesHome',{
    //other url
    }]);

4、resolve的作用

当路由切换的时候，被路由的页面中的元素（标签）就会立马显示出来，同时，数据会被准备好并呈现出来。
但是注意，数据和元素并不是同步的，在没有任何设置的情况下，AngularJS默认先呈现出元素，而后再呈现出数据。这样就会导致页面会被渲染两遍，导致“页面UI抖动”的问题，对用户不太友好。resolve的出现解决了这个问题。

resolve属性里的值会在路由成功前被预先设定好，然后注入到控制器中。通俗地将，就是等数据都“就位”后，才进行路由（其实我觉得也不能叫路由，因为路由是一些列的操作，其中就包括了设置resolve属性等等）。这样的好处就是页面仅会被渲染一遍。
$q ,内置服务，是AngularJS中自己封装实现的一种Promise实现，相对与Kris Kwal’s Q要轻量级的多。

$rootScopt.$apply()用于传播模型数据的变化。

5、express路由

app.use('/server/admin',require('./server/routes/admin'));

（第一）这句路由的含义是：当前请求的路径为/server/admin的时候，会去找/server/routes/目录下的admin.js文件，然后执行。也就得到了路由处理应用逻辑了。

（第二）admin.js中所有的app.get()设置路由的时候，js文件内的代码相对于此页面，而显示到页面上的路径：即所有这些请求URL，本质其真实路径是相对当前js文件的路径，全路径就是加上根目录样子。

（第三）app.use与app.get的区别：app.use的作用是将一个中间件绑定到应用中；app.get是express中应用路由的一部分，用于匹配并处理一个特定的请求，且请求方法必须是GET。

6、总结node.js进行web开发的逻辑

6.1、前端一个主页面data-main指定主js路径
6.2、导航页视图路由配置
6.3、各种业务的Controller定义
6.4、视图路由时配置指定的Controller完成数据绑定
6.5、express路由配置各个请求对应的Controller
核心思想：前端用js实现，后端还是用js实现控制逻辑。

Node.js进行web开发知识清单2

猜你喜欢