如果有人想知道如何在Visual Studio中使用Angular Material + MVC进行开发,可以按照以下步骤操作:
1. 在Visual Studio中创建MVC项目。
2. 进入App_Start文件夹。
3. 进入BundleConfig.cs文件。
4. 清空RegisterBundles函数内的所有代码并保存。
5. 进入shared文件夹下的_Layout.cshtml文件。
6. 替换以下代码。
<!DOCTYPE html>
<html lang="en" ng-app="BlankApp">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
</head>
<body>
<script type="text/javascript">
angular.module('BlankApp', ['ngMaterial']);
</script>
<div class="wrapper">
<div class="container">
@RenderBody()
</div>
</div>
@RenderSection("scripts", required: false)
</body>
</html>
7. 前往index.cshtml页面
8. 开始使用Angular Material。(示例代码如下)
@{
ViewBag.Title = "Home Page";
}
<body>
<md-content>
<md-tabs md-dynamic-height="" md-border-bottom="">
<md-tab label="one">
<md-content class="md-padding">
<h1 class="md-display-2">Tab One</h1>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</md-content>
</md-tab>
<md-tab label="two">
<md-content class="md-padding">
<h1 class="md-display-2">Tab Two</h1>
<p>LNullam malesuada consequat diam, a facilisis tortor volutpat et. Sed urna dolor.</p>
<p>Morbi viverra, ante vel aliquet tincidunt, leo dolor.</p>
<p>Integer turpis finibus commodo lectus.</p>
</md-content>
</md-tab>
<md-tab label="three">
<md-content class="md-padding">
<h1 class="md-display-2">Tab Three</h1>
<p>Integer turpis erat, lectus.</p>
</md-content>
</md-tab>
</md-tabs>
</md-content>
</body>
感谢,
-愉快的编程-