angularjs post返回html_AngularJs構建單頁面應用
技術標籤：angularjs post返回html
-
- 管理複雜性的的技術通常都是建立一個可以隱藏複雜性的框架
Durandal/EnberJs可以多嘗試選擇適合自己的框架。
基於MVC框架、不依賴任何庫；
程式設計思想：AngularJS 屬於宣告式程式設計，注重於結果，生成動態的DOM樹；
-
- Angular支援資料繫結、伺服器間通訊、檢視管理、歷史管理、定位、驗證等，它也使用檢視、模型、控制器。
- 新增Web API
執行程式並訪問地址 api/moviews，可檢視電影資訊編碼成了XML或者json
-
- 建立應用程式和模組
- 專案中建立資料夾Client或者APP存放應用程式指令碼，區別專案js
- 建立子資料夾Scripts，新增檔案atTheMovies.js並輸入程式碼
(function (){
Var app= angular.module("atTheMoview",[])
}())-
- 修改Index檢視
@section scripts { <script src="~/Scripts/angular.js"></script> <script src="~/Client/Scripts/AtTheMovies.js"></script> } <div ng-app="AtTheMovies"> <div ng-cotroller="ListController "> {{message}} </div> </div>
-
- Angular控制器主要用來管理DOM節，構建模型，只要與之關聯的DOM區域仍在展現，Angular控制器就是無狀態的，存貨的。
- 區別於MVC 控制器 一次只能處理一個HTTP請求，然後斷開。
- 建立控制器、模型、檢視
- 新增檔案ListController.js，並輸入
(function(app){ }(angular.module("AtTheMovies"))); 以上引數中app為傳入atTheMovies模組，或者 (function(app){ 應用程式模組引用控制器 Var ListController = function ($scope，$http){ $http.get("/api/movie") .success(function(data){ $scope.movies=data; }) }; App.controller("ListController ",ListController ); Var app = angular.module("AtTheMovies"); }())
-
- 控制器通過$scope變了組建模型。避免了直接操作DOM，UI的改變通過更新檢視使用的模型資訊來傳播
- 模型物件不知道檢視和控制器的存在。模型只是負責儲存狀態，並暴露一些控制狀態的行為。
- 檢視使用模板和指令來訪問模型，展現資訊。
- Angular中所有的元件都是通過名稱來註冊的。$http是網路HTTP通訊服務的名稱。
- 依賴註解：由於Angular採用簡化指令碼精簡區域性變數和函式名稱，因此需要通過屬性$inject來查詢依賴的真正名稱
ListController.$inject=["$scope","$http"]-
- Ng-repeat 型別for迴圈
<tr ng-repeat="movie in movies">
<td>
{{movie.title}}
</td>
</tr>-
- 安裝路由 Install0package -IncludePrereleaseAngularjs.route
- Index.cshtml scripts增加路由模組引用
<script src="~/Scripts/angular-route.js"></script>-
- atTheMovies.js 新增依賴路由模組
var app = angular.module("AtTheMovies", ["ngRoute"]);-
- 通過$RouteProvider元件實現路由描述
var config = function ($routeProvider) {
$routeProvider
.when("/list", { templateUrl: "/client/views/list.html" })
.when("/details/:id", { templateUrl: "/client/views/details.html" })
.otherwise({ redirectTo: "/list" });
};
config.$inject = ["$routeProvider"];
app.config(config);-
- Index.cshtml 指定DOM展示
<div ng-app="AtTheMovies">
<ng-view></ng-view>
</div>-
- Views資料夾中新增list.html
<div ng-controller="ListController" class="row">
<div class="span6">
<table class="table table-striped">
<tr ng-repeat="movie in movies">
<td>
{{movie.title}}
</td>
<td>
<button class="btn" ng-click="delete(movie)">Delete</button>
<a href="#/details/{{movie.id}}" class="btn">Details</a>
</td>
</tr>
</table>
<button class="btn" ng-click="create()">Create</button>
</div>
<div class="span6">
<div >
<div ng-include="'/Client/views/edit.html'"></div>
</div>
</div>
</div>-
- Client/Views資料夾新增details.html檔案
<div ng-controller="DetailsController" class="row">
<div class="span12">
<h2>{{movie.title}}</h2>
</div>
<div class="span6">
<hr />
<div>{{movie.runtime}} minutes</div>
<div>Released in {{movie.releaseYear}}</div>
<button ng-click="edit()">Edit</button>
</div>
<div class="span6">
<div>
<div ng-include="'/Client/views/edit.html'"></div>
</div>
</div>
</div>-
- 新增DetailsController的控制器
(function (app) {
var DetailsController = function ($scope, $routeParams, movieService) {
movieService.getById($routeParams.id)
.success(function(movie) {
$scope.movie = movie;
});
$scope.edit = function () {
$scope.edit.movie = angular.copy($scope.movie);
};
};
DetailsController.$inject = ["$scope", "$routeParams", "movieService"];
app.controller("DetailsController", DetailsController);
}(angular.module("AtTheMovies")));-
- Index.cshtml scripts增加詳情控制器的引用
<script src="~/Client/Scripts/DetailsController.js"></script>-
- 自定義服務
建立movieService.js
(function(app) {
var movieService = function ($http, movieApiUrl) {
var getAll = function() {
return $http.get(movieApiUrl);
};
var getById = function(id) {
return $http.get(movieApiUrl + id);
};
var update = function(movie) {
return $http.put(movieApiUrl + movie.id, movie);
};
var create = function(movie) {
return $http.post(movieApiUrl, movie);
};
var destroy = function(movie) {
return $http.delete(movieApiUrl + movie.id);
};
return {
getAll: getAll,
getById: getById,
update: update,
create: create,
delete: destroy
};
};
movieService.$inject = ["$http", "movieApiUrl"];
app.factory("movieService", movieService);
}(angular.module("AtTheMovies")))
通過應用程式配置期間註冊常量值
app.constant("movieApiUrl", "/api/movies/");
把listController修改為使用movieService，而不使用$http
movieService.getAll().success(function(movies) {
$scope.movies = movies;
});
detailsController 修改為使用movieService
movieService.getById($routeParams.id)
.success(function(movie) {
$scope.movie = movie;
});
刪除
html頁面中 通過 ng-click觸發刪除到MovieService
<button class="btn" ng-click="delete(movie)">Delete</button>
ListController中
$scope.delete = function (movie) {
movieService.delete(movie)
.success(function() {
removeMovieById(movie.id);
});
};
//伺服器刪除成功後刪除DOM
var removeMovieById = function(id) {
for (var i = 0; i < $scope.movies.length; i++) {
if ($scope.movies[i].id == id) {
$scope.movies.splice(i, 1);
}
}
};
新增-
- 增加edit.html ng-model 實現模型的雙向繫結，ng-model提供驗證服務，監控狀態。
- Ng-show 只有在isEditable函式為true時，表單才顯示。
<div ng-controller="EditController">
<fieldset ng-show="isEditable()">
<label for="title">
Title
</label>
<input id="title" type="text" ng-model="edit.movie.title" required />
<label for="release">
Release Year
</label>
<input id="release" type="number" ng-model="edit.movie.releaseYear" required min="1900" max="2030" />
<label for="runtime">
Length
</label>
<input id="runtime" type="number" ng-model="edit.movie.runtime" required min="0" max="500" />
<button ng-click="save()">Save</button>
<button ng-click="cancel()">Cancel</button>
</fieldset>
</div>
-
- List.html增加 en-include 指令 使用單引用值才能認為是檢視，否則認為是文字
<button class="btn" ng-click="create()">Create</button>
<div ng-include="'/Client/views/edit.html'"></div>
-
- ListController控制器
$scope.create = function () {
$scope.edit = { movie: { title: "", runtime: 0, releaseYear: 0 } };
};
-
- Detils.html 增加編輯按鈕
<button ng-click="edit()">Edit</button>
-
- DetilsController控制器增加
$scope.edit = function () {
$scope.edit.movie = angular.copy($scope.movie);
};
編輯的資料，只是副本，撤銷修改的時候丟掉副本，儲存成功則覆蓋原始物件。
-
- EditController控制器
(function (app) {
var EditController = function ($scope, movieService) {
var updateMovie = function () {
movieService.update($scope.edit.movie)
.success(function () {
angular.extend($scope.movie, $scope.edit.movie);
$scope.edit.movie = null;
});
};
var createMovie = function () {
movieService.create($scope.edit.movie)
.success(function (movie) {
$scope.movies.push(movie);
$scope.edit.movie = null;
});
};
$scope.isEditable = function () {
return $scope.edit && $scope.edit.movie;
};
$scope.cancel = function () {
$scope.edit.movie = null;
};
$scope.save = function () {
if ($scope.edit.movie.id) {
updateMovie();
} else {
createMovie();
}
};
};
EditController.$inject = ["$scope", "movieService"];
app.controller("EditController", EditController);
}(angular.module("AtTheMovies")));
Index.cshtml 新增 EditController.js
其他未包含內容：單元測試、整合測試、驗證、定位等，新增第三方元件、小工具和服務等。
-
- AngularJS 中的模型
AngularJS 中的模型指的是$scope上儲存的含有瞬時狀態資料的js物件；
AngularJS 的模型是整個應用的驅動；
檢視展示的內容為模型；
被儲存起來的內容為模型；
-
- AngularJS 中的模板
模板代表模型的展現形式；
完成了如何與應用進行互動；
給應用提供樣式，並且判斷何時以及怎樣顯示一些元素；
過濾並格式化資料；
不應包含任何業務邏輯；
-
- AngularJS 中的檢視
模板和資料模型融合之後產生檢視；
-
- AngularJS 中的控制器
負責業務邏輯
如何獲取模型
可以在模型上執行何種操作
檢視需要模型上的何種資訊
應該如何轉換模型以獲取想要的資訊
表單校驗任務
對服務的呼叫
使用正確的資料啟動檢視
-
- AngularJS 中的服務
持久化狀態的資料應當儲存到服務中，服務的作用是處理模型的持久化
可以在任何控制器之間進行共享
指令是模型和檢視的聯結者，模型（或者控制器）從不直接參與操作DOM，而是由指令操作DOM，並形成與模型的繫結，修改模型會改變檢視的顯示，當檢視改變的時候，他也會傳給模型，指令幫助分離關注點。