ఏంజులర్ జి రూటింగ్

ngRoute మాడ్యూల్స్ మీ అనువర్తనాన్ని సింగిల్ పేజీ అనువర్తనంగా చేస్తాయి.

ఏమిటి అంగురల్ యెస్ లో మార్గదర్శనం?

మీరు అనువర్తనంలో వివిధ పేజీలకు మార్గదర్శించాలి, కానీ సింగిల్ పేజీ అనువర్తనం (SPA) కావాలి మరియు పేజీలను మళ్ళీ లోడ్ చేయకుండా ఉండాలి అయితే, ఉపయోగించవచ్చు: ngRoute మాడ్యూల్స్.

ngRoute మొదటగా మీ అనువర్తనాన్ని మళ్ళీ లోడ్ చేయకుండా వివిధ పేజీలకు మార్గదర్శించే మాడ్యూల్స్ ఉన్నాయి.

ఉదాహరణ

ఈ లింకులకు మార్గదర్శించండి: "red.htm", "green.htm" మరియు "blue.htm":

<body ng-app="myApp">
<p><a href="#/!">ముఖపుటం</a></p>
<a href="#!red">ఎరుపు</a>
<a href="#!green">హరితం</a>
<a href="#!blue">నీలం</a>

స్వయంగా ప్రయత్నించండి

我需要什么？

为了使你的应用程序为路由做好准备，你必须包含 AngularJS Route 模块：

然后，您必须将 ngRoute 添加为应用程序模块中的依赖项：

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

现在您的应用程序可以访问提供 $routeProvider 的路由模块。

请使用 $routeProvider 在应用程序中配置不同的路由：

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

它去哪里了？

您的应用程序需要一个容器来放置路由提供的内容。

这个容器就是 ng-view 指令。

可以通过三种不同的方式在应用程序中包含 ng-view 指令：

ఉదాహరణ

స్వయంగా ప్రయత్నించండి

ఉదాహరణ

స్వయంగా ప్రయత్నించండి

ఉదాహరణ

స్వయంగా ప్రయత్నించండి

应用程序只能有一个 ng-view 指令，这将是该路由提供的所有视图的占位符。

$routeProvider

ఉపయోగించండి: $routeProvider，您可以定义当用户单击链接时要显示的页面。

ఉదాహరణ

定义 $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"
  });
});

స్వయంగా ప్రయత్నించండి

使用应用程序的 config 方法定义 $routeProvider。在应用程序加载时将执行在 config 方法中注册的工作。

కంట్రోలర్

ఉపయోగించండి: $routeProviderప్రతి ఒక్క "వీక్షణ" కు కంట్రోలర్ ని నిర్వచించవచ్చు.

ఉదాహరణ

కంట్రోలర్ జోడించండి:

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 = "నేను లండన్ ప్రేమిస్తున్నాను";
});
app.controller("parisCtrl", function ($scope) {}}
  $scope.msg = "I love Paris";
});

స్వయంగా ప్రయత్నించండి

"london.htm" మరియు "paris.htm" సాధారణ హెచ్ఎంఎల్ ఫైల్స్, మీరు అంగురియస్ ఎజెక్యూషన్ రాయవచ్చు, అంగురియస్ ఎజెక్యూషన్ అప్లికేషన్ యొక్క ఇతర హెచ్ఎంఎల్ భాగాల్లో అలాగే.

ఈ ఫైల్స్ ఇలా కనిపిస్తాయి:

london.htm

<h1>లండన్</h1>
<h3>లండన్ ఇంగ్లెండ్ యొక్క రాజధాని నగరం.</h3>
<p>ఇది యునైటెడ్ కింగ్డమ్ లో అతిపెద్ద నగరం, 13 మిలియన్లకు పైగా ప్రాంతీయ జనాభా ఉంది.</p>
<p>{{msg}}</p>

paris.htm

<h1>పారిస్</h1>
<h3>పారిస్ ఫ్రాన్స్ యొక్క రాజధాని నగరం.</h3>
<p>పారిస్ ప్రాంతం యూరోప్లో అతిపెద్ద జనాభా కేంద్రాలలో ఒకటి, 12 మిలియన్లకు పైగా నివాసితులు ఉన్నారు.</p>
<p>{{msg}}</p>

ప్రతిపాదన

ముంది ఉదాహరణలో, మేము $routeProvider.when మాధ్యమంలో ఉపయోగించారు templateUrl లక్షణం.

మీరు అలాగే ప్రతిపాదన లక్షణం, ఇది మీరు లక్షణపు విలువలో నేరుగా HTML రాయవచ్చు, పేజీని సూచించకుండా.

ఉదాహరణ

ప్రతిపాదన రాయండి:

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    ప్రతిపాదన : "<h1>Main</h1><p>లింకులపై క్లిక్ చేసి ఈ విషయాన్ని మార్చుకోండి</p>"
  })
  .when("/banana", {
    template : "
Banana
Bananas contain around 75% water.
"
  })
  .when("/tomato", {
    ట్యాంప్లేట్ : "<h1>టోమేటో</h1><p>టోమేటోస్ రాబోయే 95% నీటిని కలిగి ఉంటాయి.</p>"
  });
});

స్వయంగా ప్రయత్నించండి

otherwise మాధ్యమం ఉపయోగించాము

ముంది ఉదాహరణలో, మేము $routeProvider యువరు ఉపయోగించవచ్చు మాధ్యమం.

మీరు అలాగే otherwise ఇతర అన్ని మార్గాలు సరిపోనిది అయితే, ఇది డిఫాల్ట్ మార్గం అవుతుంది.

ఉదాహరణ

ఎటువంటి "Banana" లింకును లేదా "Tomato" లింకును క్లిక్ చేయలేకపోతే, వారిని తెలియజేయండి:

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/banana", {
    template : "
Banana
Bananas contain around 75% water.
"
  })
  .when("/tomato", {
    ట్యాంప్లేట్ : "<h1>టోమేటో</h1><p>టోమేటోస్ రాబోయే 95% నీటిని కలిగి ఉంటాయి.</p>"
  })
  .otherwise({
    ట్యాంప్లేట్ : "<h1>కానిది</h1><p>ఎటువంటి ఎంపిక చేయబడలేదు</p>"
  });
});

స్వయంగా ప్రయత్నించండి