AngularJS '라우팅' 소개 및 사용법
- 巴扎黑원래의
- 2017-07-21 14:05:301377검색
이것은 편집자가 제공한 학습 자료입니다. 이론상으로는 미래의 학습을 위한 것일 뿐이지만 여전히 진지하게 받아들여야 합니다.
다음 내용은 참고용으로만 사용하고 공부하세요.
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로 직접 지정해야 합니다(여기서는 동일한 디렉토리에 위치함)
4. 그런 다음 최종 모습은 어떻게 됩니까? 작동합니다다른 태그를 클릭하면 다음
위 내용은 AngularJS '라우팅' 소개 및 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.