Anglejs의 라우팅 원리를 아시나요? Anglejs 라우팅의 세부 원칙은 다음과 같습니다.

이 글에서는 주로 angularjs의 라우팅 원리와 angularjs 라우팅의 단계를 소개합니다. 누구나 이해할 수 있어야 합니다. 다음으로 이 글을 살펴보겠습니다

1.AngularJS 소개를 살펴보겠습니다.

AngularJS 라우팅 메커니즘은 ngRoute 모듈에서 제공하는 뷰를 레이아웃과 템플릿 뷰로 분해하고, URL 변경에 따라 템플릿 뷰를 레이아웃에 동적으로 로드함으로써 단일 페이지 애플리케이션의 페이지 점프 기능을 구현할 수 있습니다.

둘째, AngularJS의 URL을 살펴보세요

단일 페이지 WEB 애플리케이션의 URL에 # 기호가 추가되고, # 기호는 웹페이지의 위치를 ​​나타내며 그 오른쪽에 있는 모든 항목은 해당 위치를 표시하는 데 사용되는 식별자입니다. # 기호와 다음 내용은 URL의 해시 조각이라고 하며 다음 세 개의 URL은 서버에 동일한 주소를 요청합니다. # 기호 뒤의 내용만 변경하는 경우 새로고침해도 웹페이지가 다시 로드되지 않습니다.

//m.sbmmt.com/

//m.sbmmt.com/#123

http:// m.sbmmt.com/#123/456

3. 이제 라우팅 사용에 대해 이야기해 보겠습니다.

1 . 소개 파일 및 종속성 주입

AngularJS는 버전 1.2부터 ngRoutes를 핵심 코드에서 독립 모듈로 분리했습니다. 따라서 AngularJS 애플리케이션에서 정상적으로 라우팅 기능을 사용하려면 모듈 선언에 ngRoute에 대한 종속성을 설치하고 주입해야 합니다. (Angularjs에 대해 더 알고 싶다면 PHP 중국어 웹사이트 AngularJs 학습 매뉴얼 열을 참조하세요.)

<script src="angular-route.min.js"></script>
var app = angular.module("myApp",[&#39;ngRoute&#39;]);

2 레이아웃 템플릿 만들기#🎜 🎜 #

<div ng-app="myApp">
    <a ng-href="#/music">音乐</a>
    <a ng-href="#/movie">电影</a>
    <a ng-href="#/novel">小说</a>
    <a ng-href="#/other">其他</a>
    <div ng-view></div>
</div>

3. 일부 템플릿 보기 만들기

<p>这里是音乐界面啦</p>

<p>这里是电影界面啦</p>

<p>这里是小说界面啦</p>

<p>我是首页界面</p>

4. 라우팅 테이블 정의

app.config(['$routeProvider',function($routeProvide) {
    $routeProvide
        .when('/',{templateUrl:"home.html"})
        .when('/music',{templateUrl:"myMusic.html"})
        .when('/movie',{templateUrl:"myMovie.html"})
        .when('/novel',{templateUrl:"myNovel.html"})
        .otherwise({redirectTo:'/'});
}]);

열을 방문하여 학습하는 것이 좋습니다.) 질문이 있으시면 아래에 메시지를 남겨주세요. Question[편집자 추천]

위 내용은 Anglejs의 라우팅 원리를 아시나요? Anglejs 라우팅의 세부 원칙은 다음과 같습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!