AngularJS လမ်းကြောင်

ngRoute အစိတ်အပျက် သည် အစိတ်အပျက် သည် အသုံးပြုတုန်းအသုံးချသော စာမျက်နှာ ဖြစ်စေရန် ကူညီပါသည်。

AngularJS တွင် လမ်းကြောင်းသည် ဆိုလိုသလဲ?

ရှိသည့် အစိတ်အပျက် သို့ လမ်းကြောင်းဝင်ကြပါက၊ ပြီးတော့ အစိတ်အပျက် သည် 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>London</h1>
<h3>London is the capital city of England.</h3>
<p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>{{msg}}</p>

paris.htm

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

စာတမ်း

အထင်ပေါ်တွင် သင့် အသုံးပြုခဲ့သော $routeProvider.when စနစ်ကို အသုံးပြုခဲ့သည် templateUrl ဗီယက်န် ဗီယာ

သို့မဟုတ် သင့် အသုံးပြုနိုင်သော 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>"
  });
});

ကိုယ်တိုင် စမ်းသပ်ပါ

otherwise စနစ်ကို

အထင်ပေါ်တွင် သင့် အသုံးပြုခဲ့သော $routeProvider when စနစ်ကို。

သို့မဟုတ် သင့် အသုံးပြုနိုင်သော otherwise လုပ်ဆောင်ပုံစံတစ်ခု ကို အခြား အသုံးပြုနိုင်သော လမ်းကြောင်းများ မဖြစ်နေခင်း အခြား လမ်းကြောင်းများ နှင့် မသက်ဆိုင်ဘဲ လုပ်ဆောင်ပုံစံ ဖြစ်လိမ့်မည်။

ဌာန

မဆိုင်ရာမည်မျှ "Banana" ခေါင်းစဉ် နှင့် "Tomato" ခေါင်းစဉ် ကို ချက်ချင်း လွှတ်ခဲ့သေးသလဲ့ သူတို့ကို အကြောင်းပြောပါ:

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>Nothing has been selected</p>"
  });
});

ကိုယ်တိုင် စမ်းသပ်ပါ