방문한 페이지를 기반으로 컨트롤러를 동적으로 로드하는 AngularJs 솔루션_AngularJS

Ng를 사용하는 목적은 단일 페이지 애플리케이션(간단한 페이지 애플리케이션)을 만드는 것입니다. 사이트의 모든 페이지가 Ng의 Route를 사용하고 location.href를 사용하지 않도록 노력하면 좋겠습니다. 웹앱이지만 유일한 단점은 시간이 지남에 따라 웹앱에 더 많은 사용자, 더 풍부한 기능 및 더 많은 컨트롤러가 있다는 것입니다. 이후 사이트의 모든 페이지를 누를 수 있도록 모든 컨트롤러를 전역 모듈로 로드해야 합니다. F5를 눌러 새로고침하면 컨트롤러를 찾지 못하는 오류 없이 다른 페이지로 라우팅할 수 있습니다. 컨트롤러를 모두 로드하면 휴대폰에서 페이지가 처음 열릴 때 속도가 느려지는 문제를 해결한 방법을 오늘 알려드리겠습니다. 이러한 단점을 해결하기 위해 컨트롤러의 모듈식 로딩을 구현합니다

app.js

코드 복사 코드는 다음과 같습니다.

app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {
app.register = {
컨트롤러: $controllerProvider.register,
지시문: $compileProvider.directive,
필터: $filterProvider.register,
공장: $provide.factory,
서비스: $provide.service
};
});

필요한 js를 로드하는 동안 차단하고, $script가 무엇인지 모르시면 http://dustindiaz.com/scriptjs를 클릭하세요. 🎜>

코드 복사 코드는 다음과 같습니다.

$routeProvider.when('/:플러그인', {
templateUrl: 함수(rd) {
'plugin/' rd.plugin '/index.html'을 반환합니다.
},
해결: {
로드: function($q, $route, $rootScope) {
var deferred = $q.defer();
var 종속성 = [
          'plugin/' $route.current.params.plugin '/controller.js'
];
$script(종속성, 함수() {
$rootScope.$apply(함수() {
           deferred.resolve();
        });
});
deferred.promise 반환;
}
}
});

controller.js

코드 복사 코드는 다음과 같습니다.

app.register.controller('MyPluginCtrl', 함수 ($scope) {
...
});

index.html

코드 복사 코드는 다음과 같습니다.

...

이런 식으로 경로가 의존하는 js는 경로 중에 동적으로 로드될 수 있습니다. 그러나 일반적으로 우리 웹앱에는 경로가 많고 각 경로마다 작성하는 데 많은 코드가 필요하므로 보기 흉하고 어렵습니다. 유지하려면 또 다른 최적화를 추가하는 것이 좋습니다

app.js

코드 복사 코드는 다음과 같습니다.

app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {
  app.register = {
    컨트롤러: $controllerProvider.register,
    지시문: $compileProvider.directive,
    필터: $filterProvider.register,
    공장: $provide.factory,
    서비스: $provide.service
  };
  app.asyncjs = 함수(js) {
        return ["$q", "$route", "$rootScope", 함수($q, $route, $rootScope) {
            var deferred = $q.defer();
            var 종속성 = js;
            if (Array.isArray(종속성)) {
                for (var i = 0; i < dependency.length; i ) {
                    종속성[i] = "?v=" v;
                }
            } 그 밖의 {
                종속성 = "?v=" v;//v是版本号
            }
            $script(종속성, 함수() {
                $rootScope.$apply(함수 () {
                    deferred.resolve();
                });
            });
            deferred.promise 반환;
        }];
    }
});

复主代码 代码如下:

$routeProvider.when('/:플러그인', {
  templateUrl: 함수(rd) {
    return 'plugin/' rd.plugin '/index.html';
  },
  해결: {
    로드: app.asyncjs('plugin/controller.js')
  }
});

复主代码 代码如下:

$routeProvider.when('/:플러그인', {
  templateUrl: 함수(rd) {
    return 'plugin/' rd.plugin '/index.html';
  },
  해결: {
    로드: app.asyncjs(['plugin/controller.js','plugin/jquery.ui.datepicker.js'])
  }
});

便可以了

PS:$script可以对需要加载적js进行判断, 如果之前已经加载过了他会直接返回成功, 也就是说只只也就是说只有第一次进入日期选择界면时会去请求jquery.ui.datepicker. js를 출력하는 방법은 다음과 같습니다.