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

WBOY
풀어 주다: 2016-05-16 16:15:50
원래의
1155명이 탐색했습니다.

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를 출력하는 방법은 다음과 같습니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!