requirejs angularjs 的总结

   研究了几天的angularjs的route配置，想实现一个spa应用，发现了angularjs的强大，也发现了许多问题：

 一、简单的实现局部页面的刷新，是很简单的，通过路由的配置可以实现局部刷新，它实际是通过ajax 来加载其他模板页，但是里面浏览器的加载顺序，是值得关注的问题，

     浏览器会首先加载index.html页面,将里面的dom和js先加载，然后进入ng-app 通过路由，加载刷新的模板；

从图中可以看出home.html是angular-route最后加载的，而其他的js文件早就加载好了，这样就会存在js失效的问题，如果js全部放在index页面，因此相应的js放在相应的模块里，如果从ajax(xhr)加载的html 中存在外部加载js,浏览器会出现警告,故js写在内部可以解决。

angular给我们提供的一些方法也可处理如 $viewcontentloaded  $localchangestart $localchangesuccess 等处理响应的事件

这里必要提一下fullpage.js插件，它尽然有对页面跳转的监听，当页面跳转在回到全屏滚动时会出现报错：

'Fullpage.js can only be initialized once and you are doing it multiple times!

 在插件里找到了它对html的class判断，class='fp-enabled' ,因为angular是局部刷新，故这部分不变，而它又对这有判断，但出现就抛出错误

function displayWarnings(){
            var extensions = ['fadingEffect', 'continuousHorizontal', 'scrollHorizontally', 'interlockedSlides', 'resetSliders', 'responsiveSlides', 'offsetSections', 'dragAndMove', 'scrollOverflowReset', 'parallax'];
            if($('html').hasClass(ENABLED)){
                showError('error', 'Fullpage.js can only be initialized once and you are doing it multiple times!');
                return;
            }

当我将他注释时，出现跳转后，全屏不是一屏一屏的跳，路由变一次它多跳一屏，找了半天也没找到，下次不用它了。

二、requirejs 和angularjs的按需加载

  在研究加载顺序的时候发现了这个好东西，按需加载controller,这样可以避免index.html的负载,一次加载全部的controller，

总结就是几点;

1. 入口定义

<script data-baseurl="./" data-main="main.js" src="lib/require/require.min.js" id="main"></script>

2.插件配置mian.js

(function(){
    require.config({
        baseUrl:'./',
        paths:{
            'angular':'lib/angular/angular.min',
            'angular-route':'lib/angular/angular-route.min'
        },
        shim:{
            'angular':{
               exports:'angular'
            },
            'angular-route':{
                deps:'angular',
                exports:'angularRoute'
            }
        }
    });
    require(['angular','router'],function(angular,controllers){
        var app=angular.module('app',[]);
        for( var key in controllers){
            app.controller(key,controllers[key])
        }
        angular.element(document).ready(function(){
            angular.bootstrap(document,['app']);
        });
        return app;
    })
})();

3.define规范需要加载的组件

define(['angular'], function (angular) {[组件的引入]
    return function($scope, $http){
        $scope.info = 'niao';  
    };
});

就差不多的了，哪里需要组件就require(['需要组件'],function(‘组件的注入’）{}）这样就可以用组件了

三、

在定义路由的时候就需要改变下了，多加个resolve属性

resolve: {//解决                                             
                        keyName: function ($q) {
                            var deferred = $q.defer();
                            require(['module1/module1.js'], function (controller) {
                                $controllerProvider.register('module1Controller', controller); 
                                deferred.resolve();
                            });
                            return deferred.promise;
                        }
                    }

这里实现的就是controller的加载

这里也可以将html加载过来

因为有个tempalte 将加载的html直接附值

require加载控制器 并注册它，因为resolve会将结果注入controller中，$q提供异步加载服务帮助 $q.defer实例化一个deferred延迟实例，resolve处理派生的promise,promise与延迟相关的prominse对象.promise也是可能注入controller的值。

总结：就是开启一个延迟来保证异步的完成，延迟路由的的跳转加载html。

requirejs思路跟angular2的思路相似，需要啥就给啥，先定义，形成模块。

里面可有许多错误望见谅！~~