You must remember this , you should go nuget pakage and install [ angular route ]
Controller
public ActionResult AngularProject()
{
return View();
}
public ActionResult Student()
{
return View();
}
Layout
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body ng-app="myApp">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
<link rel="stylesheet" href="~/Scripts/css/bootstrap.min.css">
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-route.min.js"></script>
<script src="~/Scripts/app.js"></script>
<script src="~/Scripts/mycontroller.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>
Angularproject .cshtml view
@{
ViewBag.Title = "AngularProject";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="container">
<div class="row">
<div class="col-sn-12">
<h1 class="jumbotron bg-dark text-white text-center"> My first Single page application</h1>
</div>
</div>
<div class="row" style="margin-top: -30px">
<div class="col-sn-3">
<div class="bg-dark" style="height:500px">
<ul style="list-style:none; font-size:30px;">
<li><a href="#!teacher">Teacher</a></li>
<li><a href="#!Student">Student</a></li>
<li><a href="#!course">Courses</a></li>
<li><a href="#!gallery">gallery</a></li>
</ul>
</div>
</div>
<div class="col-sn-9">
<div ng-view>
</div>
</div>
</div>
<div class="row">
<div class="col-sn-12">
<div class="card card-body bg-dark text-white text-center">ALL Right Reserved © 2020</div>
</div>
</div>
</div>
app.js
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/Student', {
templateUrl: '/Home/Student'
})
.otherwise({ redirectTo: '/' });
}]);
No comments:
Post a Comment