Asp.Net MVC with AngularJs route & ng-view

2013-07-24

利用AngularJs的route來處理View(ng-view)…以下是處理的方式。

1. 在AngularJs的route設定

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $routeProvider.when('/', {
        templateUrl: '/Home/Detail',
        controller: 'HomeCtrl',
    }); 
}]);

2. Server Side – Controllers

       public ActionResult Index()
       {
                   return View();
       }

       public ActionResult Detail()
       {
           return PartialView();
       }

3. View/Home

a. _layout.cshtml

<!DOCTYPE html>
<html ng-app="myApp">
<head>    
....something something.....
</head>
<body>
    <div class="container">       
        @RenderBody()
        @RenderSection("scripts", required: false)
    </div>    
</body>
</html>

b. Home/Index.cshtml

<ng-view></ng-view>

FYI: AngularJs提供了兩種網址顯示的方式(ref:http://docs.angularjs.org/guide/dev_guide.services.$location)

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

// Specify HTML5 mode (using the History APIs) or HashBang syntax.(Default)
$locationProvider.html5Mode(false).hashPrefix('');

}]);

基本上，上列的三點就是基本的設定方式。就可以完成簡單的SPA了。

有幾個地方要注意的是

1. 如果跨ServerSide Controller時, 要注意return 的東西，是View還是PartialView, 如果是 Retrun View()時，網頁會陷入無窮迴圈中(***)

例如: 我有一個Controller叫Boards, 那我想要在View的地方也是顯示列表及詳細資料時,

我的AngularJs的Route設定是

 $routeProvider.when('/Board', {
        templateUrl: '/Board/List',
        controller: 'BoardCtrl',
    }).when('/Board/:id', { templateUrl: '/Board/Detail', controller: 'BoardDetailCtrl' });

我的Controller是

public class BoardController : Controller
    {
        //
        // GET: /Board/

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult List()
        {
            return PartialView();
        }

        public ActionResult Detail()
        {
            return PartialView();
        }

    }

View/Board/Index –> 空白頁面

View/Board/List –> 要顯示的內容

List要連結到Detail的連結會是
 <a href="~/#/Board/{{item.uid}}">link</a>

View/Board/Detail—>要顯示的內容

Detail要回到List的連結會是

$location.path('/Board');

or
 <a href="~/#/Board">link</a>

以上。

回首頁