標籤：scope 建立 asp.net port img bag lang otherwise com
參考：http://www.cnblogs.com/eedc/p/6082052.html
一、引用anguler:
1、angular.js
2、angular-route.js
3、app.js （下面會講到）
二、_Layout.cshtml：母片聲明angular應用
ng-app="myApp"
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> @Styles.Render("~/css") @Scripts.Render("~/jq")</head><body ng-app="myApp"> <p>我就是主版頁面</p> <hr /> @RenderBody()</body></html>
三、Index.cshtml：view視圖中引用angular視圖
<div ng-view></div>
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml";}<h2>Index</h2><div ng-view></div>
四、在App檔案夾中，我們建立兩個檔案，一個是app.js和Show.html。
五、app.js
(function () { var myApp = angular.module("myApp", [‘ngRoute‘]); myApp.config([‘$routeProvider‘, function ($routeProvider) { $routeProvider.when(‘/index‘, { templateUrl: ‘/App/show.html‘, controller: ‘showCtrl‘ }).otherwise({ redirectTo: ‘/index‘ }); }]); myApp.controller(‘showCtrl‘, [‘$scope‘, ‘$http‘, function ($scope, $http) { $http.get(‘home/show‘).success(function (data) { $scope.item = data; }); }]);})();
六、show.html模板檔案
<ul ng-repeat="s in item"> <li>{{s.Name}}</li> <li>{{s.Age}}</li> <li>{{s.Gender}}</li></ul><table> <tr> <td>姓名</td> <td>年齡</td> <td>性別</td> </tr> <tr ng-repeat="s in item"> <td>{{s.Name}}</td> <td>{{s.Age}}</td> <td>{{s.Gender}}</td> </tr></table>
Asp.Net Mvc+Angular.Js自測小Demo
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
