AngularJS التوجيه

هذا الفصل سوف نقدم الطريق AngularJS.

AngularJS توجيهها من خلال URL مختلفة تتيح لنا الوصول إلى المحتوى.

التي يمكن AngularJS عرض المزيد من تطبيقات الويب صفحة واحدة (صفحة واحدة تطبيقات الويب، SPA).

URL لدينا عادة في شكلhttp://w3big.com/first/page، ولكن في صفحة واحدة تطبيقات الويب AngularJS بواسطة علامة # +تحقيقه، على سبيل المثال:

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

عند النقر على أي من أعلاه عندما يكون لدينا تصل إلى الخادم يرجى معالجة هي نفسها (http://w3big.com/). لأن المحتوى بعد علامة # في نهاية طلب خدمة سيتم تجاهل من قبل المتصفح. لذلك نحن بحاجة لتنفيذ وظيفة عميل لل# في وقت لاحق في التنفيذ. AngularJS طرق لمساعدتنا من خلالعلامة # + للتمييز بين مختلف الصفحة المنطقية وصفحات منفصلة ملزمة إلى وحدة تحكم المقابلة.

في الرسم البياني أعلاه، يمكننا أن نرى أن خلق اثنين URL: / ShowOrders و / AddNewOrder. كل عنوان 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>

محاولة »

أمثلة التحليل:

1، وتحميلها تنفيذ التوجيه ملف شبيبة: الزاوي-route.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>
});

المعلمة الوصف:

قالب:
إذا نحن بحاجة فقط لإدراج محتوى HTML بسيط في نانوغرام عرض، ثم استخدام هذه المعلمة:
```
.when('/computers',{template:'这是电脑分类页面'})
```
templateUrl:
إذا نحن بحاجة فقط لادخال ملفات قالب HTML في الرؤية نانوغرام، ثم استخدام هذه المعلمة:
```
$routeProvider.when('/computers', {
    templateUrl: 'views/computers.html',
});
```
سوف رمز أعلاه الحصول على وجهات نظر من محتوى الملف الخادم / 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>

محاولة »

السابق: AngularJS حقن التبعية

AngularJS مسار

AngularJS أمثلة

AngularJS الدليل المرجعي

AngularJS التوجيه

كائن إعدادات الطريق

أمثلة