@Scripts.Render("~/bundles/angularjs") 要放在 angular.module使用之前
使用 controller的寫法
1.2
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
1.3
var myApp = angular.module('myApp', []);
myApp.controller('HelloController', ['$scope', function ($scope) {
$scope.greeting = { text: 'Hello' };
} ]);
or
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
// The $inject property of every controller (and pretty much every other type of object in Angular) needs to be a string array equal to the controllers arguments, only as strings
HelloController.$inject = ['$scope'];
var myApp = angular.module('myApp', []);
myApp.controller('HelloController', HelloController);
SPA 注意事項
1.要設定 SPA要先加入 angular-route.min.js
//AngularJS
bundles.Add(new ScriptBundle("~/bundles/angularjs").Include(
"~/Scripts/angular.min.js"
, "~/Scripts/angular-route.min.js"
));
2.設定連結
a href="/#/routeOne"
如果 default網頁是 Index.cshtml，可以寫成如上的連結，但如果不是，比如有一個網頁叫 SPATest.cshtml放在 Home目錄底下的話，連結修改如下：
a
href="
/Home/SPATest/#/routeOne"
3.加上一個 <div ng-view></div>在你的 Index.cshtml (SPA的首頁)上
4.設定 angulasjs route，可儲存在 javascript檔
//routing for angularjs
var configFunction = function ($routeProvider) {
$routeProvider.
when('/routeOne', {
templateUrl: '/RoutesDemo/one'
})
.when('/routeTwo', {
templateUrl: '/RoutesDemo/two'
})
.when('/routeThree', {
templateUrl: '/RoutesDemo/three'
});
}
configFunction.$inject = ['$routeProvider'];
myApp.config(configFunction);
5. 建立 contorller
public class RoutesDemoController : Controller
{
//
// GET: /RouttesDemo/
public ActionResult One()
{
ViewBag.test = 1;
return PartialView("SPAPartialTest");
}
public ActionResult Two(int donuts = 1)
{
ViewBag.Donuts = donuts;
ViewBag.test = 1;
return PartialView("Two");
}
public ActionResult Three()
{
ViewBag.test = 3;
return PartialView("SPAPartialTest");
}
}
6.建立 partialview
Hands On Lab: Build a Single Page Application (SPA) with ASP.NET Web API and Angular.js
Using AngularJs, ASP.NET MVC, Web API and EntityFramework to build NLayered Single Page Web Applications
【AngularJs + ASP.NET MVC】使用AntularJs快速建立ASP.NET MVC SPA網站
Getting started with AngularJS and ASP.NET MVC - Part One
Getting started with AngularJS and ASP.NET MVC - Part Two
AngularJS 開發 ASP.NET MVC
What's the difference between “return View()” and “return PartialView()”
