웹 프론트엔드 JS 튜토리얼 방문한 페이지를 기반으로 컨트롤러를 동적으로 로드하는 AngularJs 솔루션_AngularJS

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

May 16, 2016 pm 04:15 PM
angularjs controller

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

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

SpringBoot가 컨트롤러를 스캔할 수 없는 문제를 해결하는 방법 SpringBoot가 컨트롤러를 스캔할 수 없는 문제를 해결하는 방법 May 14, 2023 am 08:10 AM

SpringBoot 초보자가 프로젝트를 생성하면 Controller를 스캔할 수 없고 일련의 문제가 발생합니다. 1.2.3.4.5.6 또 다른 방법은 시작할 때 @ComponentScan(basePackages={"xxx.xxx.xx","xxx.xxx"를 추가하는 것입니다. 서비스 클래스) .xx”})는 여러 SpringBoot 사용자 정의 컨트롤러에 사용할 수 있는 패키지의 정규화된 이름입니다. SpringBoot 사용자 정의 컨트롤러 경로는 시작 클래스와 사용자 정의 컨트롤러 패키지가 다음과 같기 때문에 검색할 수 없으며 찾을 수 없습니다. 같은 디렉토리에 있지 않습니다. 공식적으로 권장되는 application.java 배치

SpringBoot 다중 컨트롤러에 URL 접두사를 추가하는 방법 SpringBoot 다중 컨트롤러에 URL 접두사를 추가하는 방법 May 12, 2023 pm 06:37 PM

서문 어떤 경우에는 서비스 컨트롤러의 접두사가 일관됩니다. 예를 들어 모든 URL의 접두사는 /context-path/api/v1이고 일부 URL에는 통합 접두사를 추가해야 합니다. 가능한 해결책은 서비스의 context-path를 수정하고 api/v1을 context-path에 추가하는 것입니다. 전역 접두사를 수정하면 위의 문제를 해결할 수 있지만 URL에 여러 접두사가 있는 경우 단점이 있습니다. URL에는 접두사가 필요합니다. api/v2인 경우 서비스의 일부 정적 리소스에 api/v1을 추가하지 않으려면 구별할 수 없습니다. 다음은 사용자 정의 주석을 사용하여 특정 URL 접두어를 균일하게 추가합니다. 하나,

입문부터 숙달까지, 2022년 최신 5개 Anglejs 튜토리얼 입문부터 숙달까지, 2022년 최신 5개 Anglejs 튜토리얼 Jun 15, 2017 pm 05:50 PM

자바스크립트는 코드의 구성, 코드의 프로그래밍 패러다임, 객체지향 이론 측면에서 매우 독특한 언어입니다. 하지만 20년 동안 Javascript가 지배했음에도 불구하고 jQuery, Angularjs, 심지어 React와 같은 인기 프레임워크를 이해하려면 "Black Horse Cloud Classroom JavaScript Advanced Framework"를 시청하세요. 디자인 비디오 튜토리얼'을 참조하세요.

PHP와 AngularJS를 사용하여 반응형 웹사이트를 구축하여 고품질 사용자 경험 제공 PHP와 AngularJS를 사용하여 반응형 웹사이트를 구축하여 고품질 사용자 경험 제공 Jun 27, 2023 pm 07:37 PM

오늘날의 정보화 시대에 웹사이트는 사람들이 정보를 얻고 소통하는 중요한 도구가 되었습니다. 반응형 웹사이트는 다양한 기기에 적응하고 사용자에게 고품질 경험을 제공할 수 있으며, 이는 현대 웹사이트 개발에서 핫스팟이 되었습니다. 이 기사에서는 PHP와 AngularJS를 사용하여 고품질 사용자 경험을 제공하는 반응형 웹사이트를 구축하는 방법을 소개합니다. PHP 소개 PHP는 웹 개발에 이상적인 오픈 소스 서버측 프로그래밍 언어입니다. PHP는 배우기 쉬움, 크로스 플랫폼, 풍부한 도구 라이브러리, 개발 효율성 등 많은 장점을 가지고 있습니다.

PHP와 AngularJS를 사용하여 웹 애플리케이션 구축 PHP와 AngularJS를 사용하여 웹 애플리케이션 구축 May 27, 2023 pm 08:10 PM

인터넷의 지속적인 발전으로 인해 웹 애플리케이션은 기업 정보 구축의 중요한 부분이자 현대화 작업에 필요한 수단이 되었습니다. 웹 애플리케이션을 쉽게 개발, 유지 관리 및 확장하려면 개발자는 개발 요구 사항에 맞는 기술 프레임워크와 프로그래밍 언어를 선택해야 합니다. PHP와 AngularJS는 각각 서버측 및 클라이언트측 솔루션으로 널리 사용되는 두 가지 웹 개발 기술입니다. 이들을 결합하여 사용하면 웹 애플리케이션의 개발 효율성과 사용자 경험을 크게 향상시킬 수 있습니다. PHPPHP의 장점

PHP 치명적인 오류에 대한 해결 방법: '컨트롤러' 클래스를 찾을 수 없습니다. PHP 치명적인 오류에 대한 해결 방법: '컨트롤러' 클래스를 찾을 수 없습니다. Jun 22, 2023 pm 03:13 PM

PHP 프레임워크를 사용할 때 "PHPFatalerror: Class'Controller'notfound"와 같은 오류가 자주 발생합니다. 이러한 종류의 오류는 일반적으로 프레임워크에서 파일 이름 지정, 위치 또는 로드와 관련이 있으며, 특히 컨트롤러를 사용하려고 할 때 더욱 그렇습니다. 이 기사에서는 이 문제를 해결하기 위한 몇 가지 일반적인 처리 방법을 소개합니다. 파일 위치 확인 먼저 컨트롤러 파일이 프레임워크의 올바른 디렉터리에 있는지 확인해야 합니다. 예를 들어 Laravel 프레임워크를 사용하는 경우

PHP 및 AngularJS를 사용하여 파일 관리를 용이하게 하는 온라인 파일 관리 플랫폼 개발 PHP 및 AngularJS를 사용하여 파일 관리를 용이하게 하는 온라인 파일 관리 플랫폼 개발 Jun 27, 2023 pm 01:34 PM

인터넷의 대중화로 인해 점점 더 많은 사람들이 네트워크를 사용하여 파일을 전송하고 공유하고 있습니다. 그러나 여러 가지 이유로 파일 관리에 FTP와 같은 전통적인 방법을 사용하는 것은 현대 사용자의 요구를 충족할 수 없습니다. 따라서 사용하기 쉽고 효율적이며 안전한 온라인 파일 관리 플랫폼을 구축하는 것이 추세가 되었습니다. 본 기사에서 소개하는 온라인 파일 관리 플랫폼은 PHP와 AngularJS를 기반으로 파일 업로드, 다운로드, 편집, 삭제 및 기타 작업을 쉽게 수행할 수 있으며 파일 공유, 검색,

PHP 프로그래밍에서 AngularJS를 어떻게 사용하나요? PHP 프로그래밍에서 AngularJS를 어떻게 사용하나요? Jun 12, 2023 am 09:40 AM

웹 애플리케이션의 인기로 인해 프런트엔드 프레임워크인 AngularJS가 점점 인기를 얻고 있습니다. AngularJS는 동적 웹 애플리케이션 기능을 갖춘 웹 애플리케이션을 구축하는 데 도움이 되도록 Google에서 개발한 JavaScript 프레임워크입니다. 반면, 백엔드 프로그래밍의 경우 PHP는 매우 널리 사용되는 프로그래밍 언어입니다. 서버 측 프로그래밍에 PHP를 사용하는 경우 AngularJS와 함께 PHP를 사용하면 웹 사이트에 더욱 역동적인 효과를 가져올 수 있습니다.

See all articles