一、 angularJS安装及支持
新建空白的解决方案，使用vs的nuget下载angularJS,目前版本1.3.15
angularJS学习文档参见官方：http://ngnice.com/
二、 angularJS启动
在项目中新建控制器，视图，vs会自动加载jquery，bootstrap组件，可以选择移除，保留bootstrap的样式文件。在scripts目录下新建angularJS启动入口，这里命名为MyApp.js
var MyApp = angular.module("MyApp", [])
MyApp.controller('HomeController',HomeController)
在此入口定义了一个MyApp的模块，同时增加注册了一个HomeController的控制器，下面在scipts下新建Controller文件夹并新建HomeController.js
var HomeController = function($scope) {
$scope.models= {
name:"hello world"
}
};
HomeController.$inject = ['$scope'];
本示例新建的HomeController增加了一个名为name的model，同时在末尾增加对$scope的注入，下面就可以在页面上使用这个控制器了。在布局页中增加对JS的引用，需要注意的是引用的顺序，首先是angularJS的引用，然后是控制器、最后是模块。同时在html中增加对模块MyApp的注入。
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta charset="utf-8"/>
<meta name="viewport"content="width=device-width,initial-scale=1.0">
<title>@ViewBag.Title- My ASP.NET Application</title>
@Styles.Render("~/Content/css")
</head>
<body>
<div class="container">
@RenderBody();
</div>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/Controllers/HomeController.js"></script>
<script src="~/Scripts/MyAngularApp.js"></script>
@RenderSection("scripts",required: false)
</body>
</html>
下面在新建的内容页上加入对HomeController的使用。
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<div class="panelpanel-primary" ng-controller="HomeController">
<div class="panel-heading">
<div class="panel-title">{{models.name}}</div>
</div>
<div class="panel-body">
<h1 ng-bind="models.name"></h1>
<input type="text"ng-model="models.name"/>
</div>
</div>
三、 angularJS路由
首先增加angularJS的路由引用angular-route.min.js
<script src="~/Scripts/angular-route.min.js"></script>
然后在view中添加几个链接用于测试路由。
<ul >
<li><a href="/#/route1">路由1</a></li>
<li><a href="/#/route2/3">路由2</a></li>
<li><a href="/#/route3">路由3</a></li>
</ul>
现在开始新增路由配置，示例选择在MyApp中添加路由配置
var MyApp = angular.module("MyApp", ['ngRoute'])
MyApp.controller('HomeController',HomeController)
var configFunction = function($routeProvider) {
$routeProvider.when('/route1', {
templateUrl:'/routeDemo/one'
}).when('/route2/:donuts', {
templateUrl: function (params) { return'/routeDemo/two?donuts=' + params.donuts; }
}).when('/route3', {
templateUrl: '/routeDemo/three'
})
;
};
configFunction.$inject = ['$routeProvider'];
MyApp.config(configFunction);
添加控制器，增加3个视图two视图增加参数传递，three视图增加权限过滤
public classrouteDemoController : Controller{
//
//GET: /routeDemo/
publicActionResult Index(){
returnView();
}
publicActionResult One(){
returnView();
}
publicActionResult Two(int donuts){
ViewBag.Donuts = donuts;
returnView();
}
[Authorize]
publicActionResult Three(){
returnView();
}
}
MVC5开发前端框架angularJS快速入门（一）
最新推荐文章于 2022-06-01 20:01:26 发布
4405
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
