Latest web development tutorials

AngularJS와 라우팅

이 장에서는 우리는 AngularJS와 경로를 소개합니다.

다른 URL을 통해 전달 AngularJS와 우리가 다른 콘텐츠에 액세스 할 수 있습니다.

AngularJS와 한 페이지 웹 응용 프로그램 (단일 페이지 웹 응용 프로그램, SPA) 이상을보실 수 있습니다함으로써.

우리는http://w3big.com/first/page URL의 형태로 일반적이지만,하나의페이지에서의 # + 마크로웹 애플리케이션 AngularJS와 예를 들어 달성 : 

http://w3big.com/#/first
http://w3big.com/#/second
http://w3big.com/#/third

우리는 서버 주소 바랍니다에 대한 링크가있을 때 위의 클릭하면 (http://w3big.com/)를 동일합니다. 서비스 요청의 끝에 # 기호 후의 콘텐츠는 브라우저에 의해 무시 될 것이기 때문에. 그래서 우리는 구현에 나중에 #의 클라이언트 기능을 구현해야합니다. 다른 논리 페이지와 해당 컨트롤러에 바인딩 별도의 페이지를 구분하는#의 + 마크를 통해 우리를 도와 경로를 AngularJS와.

및 / AddNewOrder / ShowOrders : 위의 그래프에서, 우리는 두 개의 URL을 만들어 볼 수 있습니다. 각 URL은 해당 뷰와 컨트롤러가 있습니다.

다음에 우리는 간단한 예를 보면 : 

<html>
    <head>
    	<meta charset="utf-8">
        <title>AngularJS 路由实例 - 本教程</title>
    </head>
    <body ng-app='routingDemoApp'>
     
        <h2>AngularJS 路由应用</h2>
        <ul>
            <li><a href="#/">首页</a></li>
            <li><a href="#/computers">电脑</a></li>
            <li><a href="#/printers">打印机</a></li>
            <li><a href="#/blabla">其他</a></li>
        </ul>
         
        <div ng-view></div>
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
        <script>
            angular.module('routingDemoApp',['ngRoute'])
            .config(['$routeProvider', function($routeProvider){
                $routeProvider
                .when('/',{template:'这是首页页面'})
                .when('/computers',{template:'这是电脑分类页面'})
                .when('/printers',{template:'这是打印机页面'})
                .otherwise({redirectTo:'/'});
            }]);
        </script>
     
     
    </body>
</html>

»시도

분석의 예 :

  • 볼록 route.js : 1, 라우팅 JS 파일을 구현로드.

  • 2 주 응용 프로그램 모듈에 의존하는 모듈로 ngRoute 모듈이 포함되어 있습니다. 

    angular.module('routingDemoApp',['ngRoute'])

  • 3, ngView 명령어를 사용하여. 

    <div ng-view></div>

    경로 변경에 따라 사업부 내에서 HTML 콘텐츠.

  • 도 4는 routeProvider가 AngularJS와 $ routeProvider 라우팅 규칙을 정의하는 데 사용 $ 구성. 

    module.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/',{template:'这是首页页面'})
        .when('/computers',{template:'这是电脑分类页面'})
        .when('/printers',{template:'这是打印机页面'})
        .otherwise({redirectTo:'/'});
}]);

설정 함수 AngularJS와 모듈은 라우팅 규칙을 구성하는 데 사용된다. configAPI을 사용함으로써, 우리는 우리의 $ routeProvider 라우팅 규칙을 정의하기 위해 설정 기능 및 용도에 $ routeProvider.whenAPI 주입하도록 요청.

(경로, 개체)하는 것은 그렇지 않으면 (객체) 함수는 두 개의 인수를 순서대로 모든 경로를 정의 할 때 $ RouteProvider 우리를 제공합니다 :

  • 첫 번째 매개 변수는 정규 URL 또는 URL의 규칙이다.
  • 두 번째 매개 변수는 라우팅 구성 개체입니다.

경로 설정 개체

AngularJS와 경로는 다른 템플릿을 통해 달성 될 수있다.

첫 번째 인수 $ routeProvider.when 함수는 일정한 규칙 URL 또는 URL, 경로의 두 번째 매개 변수 구성입니다.

다음과 같이 라우팅 구성 개체 구문 규칙은 다음과 같습니다 : 

$routeProvider.when(url, {
    template: string,
    templateUrl: string,
    controller: string, function 或 array,
    controllerAs: string,
    redirectTo: string, function,
    resolve: object<key, function>
});

매개 변수 설명 :

  • 템플릿 :

    우리는 NG-보기에 간단한 HTML 콘텐츠를 삽입해야하는 경우,이 매개 변수를 사용합니다 : 

    .when('/computers',{template:'这是电脑分类页面'})

  • templateUrl :

    우리는 단지 NG-보기에서 HTML 템플릿 파일을 삽입해야하는 경우,이 매개 변수를 사용합니다 : 

    $routeProvider.when('/computers', {
    templateUrl: 'views/computers.html',
});

    위의 코드는 NG-보기에 서버 / computers.html 파일 내용에서보기를 얻을 것이다.

  • 컨트롤러 :

    함수, 문자열이나 배열 유형, 컨트롤러 기능이 현재 템플릿을 실행, 새 범위를 만듭니다.

  • controllerAs :

    문자열 형식은 컨트롤러에 대한 별칭을 지정합니다.

  • redirectTo :

    주소 리디렉션.

  • 해결 :

    현재 컨트롤러가 다른 모듈에 의존 지정합니다.

예 

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>

<script type="text/javascript">
angular.module('ngRouteExample', ['ngRoute'])
.controller('HomeController', function ($scope, $route) { $scope.$route = $route;})
.controller('AboutController', function ($scope, $route) { $scope.$route = $route;})
.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
        templateUrl: 'embedded.home.html',
        controller: 'HomeController'
    }).
    when('/about', {
        templateUrl: 'embedded.about.html',
        controller: 'AboutController'
    }).
    otherwise({
        redirectTo: '/home'
    });
});
</script>

  
</head>

<body ng-app="ngRouteExample" class="ng-scope">
  <script type="text/ng-template" id="embedded.home.html">
      <h1> Home </h1>
  </script>

  <script type="text/ng-template" id="embedded.about.html">
      <h1> About </h1>
  </script>

  <div> 
    <div id="navigation">  
      <a href="#/home">Home</a>
      <a href="#/about">About</a>
    </div>
      
    <div ng-view="">
    </div>
  </div>
</body>
</html>

»시도