AngularJS '라우팅' 소개 및 사용법-H5 튜토리얼-php.cn

AngularJS '라우팅' 소개 및 사용법

巴扎黑

풀어 주다： 2017-07-21 14:05:30

원래의

1340명이 탐색했습니다.

이것은 편집자가 제공한 학습 자료입니다. 이론상으로는 미래의 학습을 위한 것일 뿐이지만 여전히 진지하게 받아들여야 합니다.

다음 내용은 참고용으로만 사용하고 공부하세요.

AngularJS 개념에서 "라우팅"의 정의

AngularJS는 최근 많은 동료, 학우, 친구들이 사용하고 있습니다. 이름을 들었을 때 저는 별로 추천하지 않았습니다.

AngularJS가 무엇인지는 설명하지 않겠습니다. 여전히 매우 흥미롭습니다.

여기에는 초보자 튜토리얼인 학습 웹사이트가 있지만 대부분은 매우 간단합니다. 설명하자면, 시작하기에 정말 좋은 선택입니다

1. AngularJS란 무엇인가요?

AngularJS 라우팅을 사용하면 다양한 URL을 통해 다양한 콘텐츠에 액세스할 수 있습니다. 다중 보기 단일 페이지 웹 애플리케이션은 AngularJS를 통해 구현할 수 있습니다

1 3 5

로그인 후 복사

위는 프레젠테이션 형식입니다. # 기호 뒤의 내용은 실제로 서버 요청 중에 브라우저에서 무시됩니다. 요청. 우리에게 필요한 것은 클라이언트 측에서 # 번호 뒤에 있는 콘텐츠의 기능을 구현하는 것입니다.

AngularJS 라우팅은 # + 태그 를 사용하여 다양한 논리적 페이지를 구별하고 다양한 페이지를 해당 컨트롤러에 바인딩하는 데 도움을 줍니다.

2. 라우팅 구성 예

 1 <html> 2 <head> 3 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 4  5 <!--导入angular以及路由文件angular-route.js--> 6 <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js?1.1.11"></script> 7 <script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js?1.1.11"></script> 8  9     <script type="text/javascript">10         //把元素值（比如输入域的值）绑定到应用程序。11         angular.module('ngRouteExample', ['ngRoute'])12         .controller('a1', function ($scope, $route) { $scope.$route = $route;})13         .controller('a2', function ($scope, $route) { $scope.$route = $route;})14         .config(function ($routeProvider) {15             $routeProvider.16             when('/a1', {17                 templateUrl: 'a1.html',18                 controller: 'a1'19             }).20             when('/a2', {21                 templateUrl: 'a2.html',22                 controller: 'a2'23             }).24             otherwise({25                 redirectTo: '/a2'26             });27         });28 </script>29 30   31 </head>32 33     <body ng-app="ngRouteExample" class="ng-scope">34           <script type="text/ng-template" id="a1.html">35               <h1> Home </h1>36           </script>37     38           <script type="text/ng-template" id="a2.html">39               <h1> About </h1>40           </script>41     42           <div> 43             <div id="navigation">  44               <a href="#/a1">这是a1</a>45               <a href="#/a2">这是a2</a>46             </div>47               48             <div ng-view="">49             </div>50           </div>51     </body>52 </html>

로그인 후 복사

3. 분석

1 //包含了ngRoute 模块的2 angular.module('routingDemoApp',['ngRoute'])

로그인 후 복사

1 //使用 ngView 指令，用来显示路由切换的页面2 <div ng-view></div>

로그인 후 복사

 //                // //redirectTo，重定向的地址，可以是你想最开始加载的页面

로그인 후 복사

1  <script type="text/ng-template" id="a1.html">2               <h1> Home </h1>3           </script>4     5           <script type="text/ng-template" id="a2.html">6               <h1> About </h1>7           </script>8 //这里的加载内容可以使本地的HTML文件链接，然后删掉这部分js就好

로그인 후 복사

native HTML 그냥 만들어 보세요 두 파일을 a1.html 및 a2.html로 직접 지정해야 합니다(여기서는 동일한 디렉토리에 위치함)