在Asp.Net MVC中使用AngularJS的路由

最新推荐文章于 2020-07-21 20:54:59 发布

遛狗的代码

最新推荐文章于 2020-07-21 20:54:59 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： ASP.NET MVC AngularJS

本文链接：https://blog.youkuaiyun.com/Brave_Coder/article/details/50890222

Web前端专栏收录该内容

29 篇文章

订阅专栏

参考自：http://www.tuicool.com/articles/mMzAvy

主页面代码如下:

@{ 
    Layout = null;
}}
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-route.js"></script>
    <script src="~/Scripts/controller.js"></script>
</head>
<body>
    <header>
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">Angular Routing Example</a>
                </div>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                    <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
                    <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
                </ul>
            </div>
        </nav>
    </header>

    <!-- MAIN CONTENT AND INJECTED VIEWS -->
    <div id="main">
        <div ng-view></div>
        <!-- angular templating -->
        <!-- this is where content will be injected -->

    </div>
</body>
</html>

//controller.js

'use strict';
var myApp = angular.module('myApp', ['ngRoute']);

//配置路由
myApp.config(["$routeProvider", function ($routeProvider) {
    $routeProvider

      //home
      .when('/', {
          templateUrl: '/Template/home.html',
          controller: 'mainController'
      })

      //about
      .when('/about', {
          templateUrl: '/Template/about.html',
          controller: 'aboutController'
      })

      //contact
      .when('/contact', {
          templateUrl: '/Template/contact.html',
          controller: 'contactController'
      });
}]);
//main控制器
myApp.controller('mainController', ["$scope", function ($scope) {
    // create a message to display in our view
    $scope.message = 'Everyone come and see how good I look!';
}]);
//about控制器
myApp.controller('aboutController', ["$scope", function ($scope) {
    $scope.message = 'Look! I am an about page.';
}]);
//contact控制器
myApp.controller('contactController', ["$scope", function ($scope) {
    $scope.message = 'Contact us! JK. This is just a demo.';
}]);

<!--contact.html-->
<div class="jumbotron text-center" ng-controller="contactController">
    <h1>Contact Page</h1>

    <p>{{ message }}</p>
</div>

<!--about.html-->
<div class="jumbotron text-center" ng-controller="aboutController">
    <h1>About Page</h1>
    <p>{{ message }}</p>
</div>

<!-- home.html -->
<div class="jumbotron text-center" ng-controller="mainController">
    <h1>Home Page</h1>

    <p>{{ message }}</p>
</div>

项目文件结构如下：