집 > 기사 > 웹 프론트엔드 > AngularJS 시작하기 튜토리얼(1) - 라우팅 사용법에 대한 간략한 소개

AngularJS 시작하기 튜토리얼(1) - 라우팅 사용법에 대한 간략한 소개

黄舟원래의: 2017-05-27 10:33:39837검색

본 글에서는 주로 Angular JS 라우팅의 사용법을 소개하고, AngularJS 라우팅의 개념과 기능, 기본 사용법 방법은 필요하신 분들은

을 참고하시면 됩니다. 이 글은 AngularJS 라우팅 사용법을 예시로 설명하고 있습니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

현재 이해에 따르면 이 NG 라우팅 모듈은 여러

뷰가 있는 단일 페이지 개발에 사용할 수 있습니다.

모든 코드를 먼저 게시하세요:

HTML:

<!doctype html>
<meta charset="UTF-8">
<html>
<head>
  <link href="self.css" rel="external nofollow" rel="stylesheet">
</head>
<body ng-app=&#39;routingDemoApp&#39;>
<h2>AngularJS 路由应用</h2>
<ul>
  <li><a href="#/" rel="external nofollow" >首页</a></li>
  <li><a href="#/computers" rel="external nofollow" >电脑</a></li>
  <li><a href="#/user" rel="external nofollow" >用户</a></li>
  <li><a href="#/blabla" rel="external nofollow" >其他</a></li>
</ul>
<p ng-view></p>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="test.js"></script>
</body>
</html>

list.html:

<p>
  <h1>HI,这里是list.html</h1>
  <h2>{{name}}</h2>
</p>

JS:

var app = angular.module(&#39;routingDemoApp&#39;,[&#39;ngRoute&#39;]);
app.config([&#39;$routeProvider&#39;, function($routeProvider){
    $routeProvider
      .when(&#39;/&#39;,{template:&#39;这是首页页面&#39;})
      .when(&#39;/computers&#39;,{
        template:&#39;这是电脑分类页面&#39;
      })
      .when(&#39;/user&#39;,{templateUrl:&#39;list.html&#39;,controller:&#39;listController&#39;})
      .otherwise({redirectTo:&#39;/&#39;});
}]);
app.controller(&#39;listController&#39;,function($scope){
  $scope.name="ROSE";
});

우선 Angular1.5를 사용하고 있기 때문에 추가로 angle-route.js를 도입해야 합니다:

<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>

NG에서 라우팅을 사용하려면 먼저 특정 모듈에서 이를 정의해야 합니다.

.config([&#39;$routeProvider&#39;, function($routeProvider){
//内容
}

when 및 else 메소드를 사용하여 경로를 일치시킵니다. (실제로는 위 URL 뒤의 / 문자와 일치합니다.) 마지막으로 ng-view 지시어를 사용하여 일치하는 문자에 해당하는 필드나 파일을 DOM에 넣습니다.

속성이 많은 경우. 내부에 컨트롤러를 설정하면 해당 필드나 파일에 컨트롤러가 매칭됩니다. 위 코드의 listController 컨트롤러와 같습니다.

ng-view 지시문에는 많은 규칙이 있습니다.

경로 일치 시:

1. 새로운 현재 범위를 만듭니다. 2. 이전 범위를
삭제합니다. 3. 현재 템플릿(컨트롤러 등)을 현재 새로 생성된 범위와 연결합니다.
4. 내장된 관련 컨트롤러가 있는 경우 이를 현재 범위와 연결합니다.

위 내용은 AngularJS 시작하기 튜토리얼(1) - 라우팅 사용법에 대한 간략한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：AngleJS 모달 상자 $modal에 대한 샘플 코드 공유다음 기사：AngleJS 모달 상자 $modal에 대한 샘플 코드 공유