ngRoute Moduli inasaidia programu yako kwa kuwa SPA (Single Page Application).

Je, ni nini Mtaarifu wa Rauti katika AngularJS?

Iwapo unataka naviga hadi ukurasa mwingine wa programu, lakini pia unataka programu iwe SPA (Single Page Application), na ukurasa haikurekadi, unaweza kutumia ngRoute Moduli.

ngRoute Moduli ina kubadilisha mikikili ya programu yako kwenye ukurasa mwingine, bila kusimama kuleo kote cha programu.

Mfano

Naviga hadi "red.htm", "green.htm" na "blue.htm":

body ng-app="myApp"
<p><a href="#/!">Makao</a></p>
<a href="#!red">Mwanga</a>
<a href="#!green">Kijani</a>
<a href="#!blue">Blaue</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  })
  .when("/red", {
    templateUrl : "red.htm"
  })
  .when("/green", {
    templateUrl : "green.htm"
  })
  .when("/blue", {
    templateUrl : "blue.htm"
  });
});
</script>
</body>

Jifunze tena

Ninajitahidi nini?

Kufikiria kwamba programu yako inaweza kuwa na raita, inahitaji kuwa na moduli ya AngularJS Route:

<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-route.js"></script>

Kisha, inahitaji kuingiza ngRoute Kuingiza kama kuzingatia kwenye moduli ya programu:

var app = angular.module("myApp", ["ngRoute"]);

Hivi karibuni programu yako inaweza kuwasiliana na maadili ya raita inayotolewa. $routeProvider moduli ya raita.

Tumia $routeProvider Kuingiza raita tofauti kwenye programu:

app.config(function($routeProvider) {}}
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  })
  .when("/red", {
    templateUrl : "red.htm"
  })
  .when("/green", {
    templateUrl : "green.htm"
  })
  .when("/blue", {
    templateUrl : "blue.htm"
  });
});

Nimeenda kwa nini?

Programu yako inahitaji kina kina kuweka maadili ya raita.

Hii ni kina kina: ng-view madirisha.

Inaweza kutumia tatu tofauti ya kuingiza ng-view madirisha：

Mfano

<div ng-view></div>

Jifunze tena

Mfano

<ng-view></ng-view>

Jifunze tena

Mfano

<div class="ng-view"></div>

Jifunze tena

Programu inaweza kuwa na ng-view madirisha，hii ni kina kina ya kila muonekano inayotolewa na raita.

$routeProvider

Kutumia $routeProvider，wengiweza kuingiza ukweli unaoonekana kwa kisha kwa mkondo wa kiingiliano.

Mfano

kufafanisha $routeProvider：

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  })
  .when("/london", {
    templateUrl : "london.htm"
  })
  .when("/paris", {
    templateUrl : "paris.htm"
  });
});

Jifunze tena

kutumia programu ya config kufafanisha $routeProvider。Inaenda kufanywa kwenye config kazi ya kufanywa kwenye

kontrolli

Kutumia $routeProvider，wengiweza kuingiza kontrolli kwa kila ‘muonekano’.

Mfano

Kuingiza kontrolli:

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  })
  .when("/london", {
    templateUrl : "london.htm",
    controller : "londonCtrl"
  })
  .when("/paris", {
    templateUrl : "paris.htm",
    controller : "parisCtrl"
  });
});
app.controller("londonCtrl", function ($scope) {
  $scope.msg = "I love London";
});
app.controller("parisCtrl", function ($scope) {
  $scope.msg = "I love Paris";
});

Jifunze tena

"london.htm" 和 "paris.htm" 是普通的 HTML 文件，您可以在其中添加 AngularJS 表达式，就像在 AngularJS 应用程序的其他 HTML 部分一样。

这些文件看起来像这样：

london.htm

London
London is the capital city of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
{{msg}}

paris.htm

Paris
Paris is the capital city of France.
The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.
{{msg}}

模板

在前面的例子中，我们在 $routeProvider.when 方法中使用了 templateUrl 属性。

Inaweza kutumia template 属性，它允许您直接在属性值中编写 HTML，而不是引用页面。

Mfano

Kandisha template:

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
  $routeProvider
  .when("/", {
    template : "<h1>Main</h1><p>Click on the links to change this content</p>"
  })
  .when("/banana", {
    template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
  })
  .when("/tomato", {
    template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
  });
});

Jifunze tena

metodi ya otherwise

Kwenye maelezo yaliyopita, tumetumia $routeProvider metodi ya when.

Inaweza kutumia otherwise Mwongozo, kama yote ya rutendo zote hazikubadilika, itakuwa rutendo wa kawaida.

Mfano

Kama haukubali "Banana" kiungo au "Tomato" kiungo, tukio inae kumtaa:

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
  $routeProvider
  .when("/banana", {
    template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
  })
  .when("/tomato", {
    template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
  })
  .otherwise({
    template : "<h1>None</h1><p>Hitimaye halijafikiwa.</p>"
  });
});

Jifunze tena