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

来源：互联网发布：淘宝开店视频教学视频编辑：程序博客网时间：2024/06/10 19:11

参考自：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>

项目文件结构如下：

0 0