본 글에서는 주로 AngularJS라우팅의 사용법을 소개하고, 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='routingDemoApp'> <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('routingDemoApp',['ngRoute']);
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/computers',{
template:'这是电脑分类页面'
})
.when('/user',{templateUrl:'list.html',controller:'listController'})
.otherwise({redirectTo:'/'});
}]);
app.controller('listController',function($scope){
$scope.name="ROSE";
});<script src="angular.min.js"></script> <script src="angular-route.min.js"></script>
.config(['$routeProvider', function($routeProvider){
//内容
}속성이 많은 경우. 내부에 컨트롤러를 설정하면 해당 필드나 파일에 컨트롤러가 매칭됩니다. 위 코드의 listController 컨트롤러와 같습니다.
ng-view 지시문에는 많은 규칙이 있습니다.경로 일치 시:
1. 새로운 현재 범위를 만듭니다. 2. 이전 범위를
삭제합니다. 3. 현재 템플릿(컨트롤러 등)을 현재 새로 생성된 범위와 연결합니다.
4. 내장된 관련 컨트롤러가 있는 경우 이를 현재 범위와 연결합니다.
위 내용은 AngularJS 시작하기 튜토리얼(1) - 라우팅 사용법에 대한 간략한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
