ساختار پروژه های Angular
angular.forEach(config.routes, function(route, path) { $routeProvider.when(path, {templateUrl:route.templateUrl, resolve:dependencyResolver(route.dependencies)}); });
- متد jQuery live منسوخ و حذف شده معادل هست با اتصال تمام رخدادها در سطح document یا همان (document).on('event', 'selector', function) (+).
- مشکلات متد live و خصوصا بحث انتشار رخدادها و بررسی هر بارهی انواع و اقسام آنها و در نتیجه کند شدن صفحه، مهمتر هستند تا میزان مصرف حافظه (+).
بله. برنامه reflector معروف که مد نظر هست. اسمبلی برنامه فوق را با آن باز کردم و زبان انتخابی هم VB . حاصل به صورت زیر نمایش داده شد:
Public Shared Function IsUserAvailable
یک سری کار سورس باز دیدم در CodePlex در مورد jQuery Ajax که تلاشهایی برای سادهتر کردنش کردند. بد نیست برای تکمیل کار یک سری هم به آنها هم بزنید. برای ایده گرفتن خوب است.
کلیات پروژه
پیاده سازی
var jsonFormatter = config.Formatters.OfType<JsonMediaTypeFormatter>().First(); jsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
var angularExample = angular.module('angularexample', ["restangular"]) angularExample.config(["RestangularProvider", function (RestangularProvider) { //RestangularProvider.setRestangularFields({ // id: "id" //}); RestangularProvider.setBaseUrl('/api'); }]); angularExample.controller("MainCtrl", ["Restangular", "$scope", function (Restangular, $scope) { var resource = Restangular.all('books'); resource.getList().then(function (response) { $scope.books = response; }); $scope.add = function () { resource.post($scope.newBook).then(function (newResource) { $scope.books.push(newResource); }) } }]);
<!DOCTYPE html> <html ng-app="angularexample" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Rest Angular Sample</title> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script> <script src="http://cdn.jsdelivr.net/underscorejs/1.5.1/underscore-min.js"></script> <script src="/Scripts/restangular.min.js"></script> <script src="/app/app.js"></script> </head> <body> <div ng-controller="MainCtrl"> <div ng-repeat="item in books"> name is: {{item.name}}<br /> change name: <input type="text" ng-model="item.name" /><button type="submit" ng-click="item.put();">update</button> </div> <div> add new: <br /> <input type="text" ng-model="newBook.name" /><button type="submit" ng-click="add()">add</button> </div> </div> </body>
var resource = Restangular.all('books'); resource.getList().then(function (response) { $scope.books = response; });
$scope.add = function () { resource.post($scope.newBook).then(function (newResource) { $scope.books.push(newResource); }) }
<div ng-repeat="item in books"> name is: {{item.name}}<br /> change name: <input type="text" ng-model="item.name" /><button type="submit" ng-click="item.put();">update</button> </div>
سورس پروژه: RestangularSample.rar
ما در AngularJs آبجکتی را به نام q$ داریم که برای اجرای توابع به صورت async مفید است و همچنین در استفاده از مقادیر برگشتی از این درخواستها برای پردازشهای آینده به ما کمک میکند. برای اطلاعات بیشتر در مورد این سرویس به اینجا مراجعه کنید.
در ادامه ما از تابع ()all از q$ برای ترکیب چند شیء promise داخل یک شیء promise، به منظور صدا زدن چند سرویس به صورت یکجا، استفاده میکنیم.
پیاده سازی ASP.NET Web API
قدم اول : Visual Studio را بازکنید و یک پروژه empty ASP.NET Web API را مطابق شکل زیر ایجاد کنید.
using System.Collections.Generic; namespace NG_Combine_Multiple_Promises.Models { public class Courses { public int CourseId { get; set; } public string CourseName { get; set; } } public class CourseDatabase : List<Courses> { public CourseDatabase() { Add(new Courses() { CourseId=1,CourseName="الکترونیک"}); Add(new Courses() { CourseId = 2, CourseName = "ریاضی 2" }); Add(new Courses() { CourseId = 3, CourseName = "طراحی نرم افزار" }); } } public class Student { public int StudentId { get; set; } public string Name { get; set; } public string AcadmicYear { get; set; } } public class StudentDatabase : List<Student> { public StudentDatabase() { Add(new Student() {StudentId=101,Name="محمد علوی", AcadmicYear="اول" }); Add(new Student() { StudentId = 102, Name = "طاهره موسوی", AcadmicYear = "دوم" }); Add(new Student() { StudentId = 103, Name = "علی عباسی", AcadmicYear = "سوم" }); Add(new Student() { StudentId = 104, Name = "جواد نوری", AcadmicYear = "اول" }); Add(new Student() { StudentId = 105, Name = "محسن خدایی", AcadmicYear = "دوم" }); Add(new Student() { StudentId = 106, Name = "علی کاظمی", AcadmicYear = "سوم" }); Add(new Student() { StudentId = 107, Name = "زهرا مقدم", AcadmicYear = "اول" }); Add(new Student() { StudentId = 108, Name = "لاله فکور", AcadmicYear = "دوم" }); Add(new Student() { StudentId = 109, Name = "علی نوروزی", AcadmicYear = "چهارم" }); } } }
کد بالا شامل موجودیتهای Courses و Student است و کلاسهای CourseDatabase و StudentDatabase به ترتیب برای ذخیره این موجودیتها است.
قدم سوم : بستهی نیوگت Microsoft.AspNet.WebAPi.Cors را با استفاده از NuGet Package Manager، به منظور فعال سازی امکان صدا زدن این وب سرویس از دامنههای مختلف، به پروژه اضافه کرده و کد زیر را در کلاس WebApiCofig در پوشه App_Start قرار دهید.
config.EnableCors();
قدم چهارم : دو کنترل از نوع Web API 2 Empty را با نامهای CourseAPIController و StudentAPIController ایجاد کرده و کدهای زیر را در آنها قرار دهید.
CourseAPIController.cs
[EnableCors("*","*","*")] public class CourseAPIController : ApiController { [Route("Courses")] public IEnumerable<Courses> Get() { return new CourseDatabase(); } }
StudentAPIController.cs
[EnableCors("*", "*", "*")] public class StudentAPIController : ApiController { [Route("Students")] public IEnumerable<Student> Get() { return new StudentDatabase(); } }
استفاده از Angular $q.all
قدم اول : پروژهی جدیدی را از نوع Empty ASP.NET در همین solution اضافه کرده و ارجاعات jQuery, Bootstrap و AngularJS را با استفاده از NuGet Package manager مانند زیر اضافه کنید:
Install-Package jQuery Install-Package bootstrap Install-Package angularjs
قدم دوم : پوشهایی را به نام MyScripts ایجاد کرده و درون آن فایل javascript زیر را با نام logic.js اضافه کنید:
var app = angular.module('mymodule', []); //سرویسی برای بازگرداندن لیست دروس app.service('courseService', function ($http) { this.get = function () { var response = $http.get("http://localhost:11696/Courses"); return response; }; }); //سرویسی برای بازگرداندن لیست دانشجویان app.service('studentService', function ($http) { this.get = function () { var response = $http.get("http://localhost:11696/Students"); return response; }; }); //تعریف کنترلر app.controller('ctrl', function ($scope, $q, courseService, studentService) { $scope.Courses = []; $scope.Students = []; loadData(); /**/ function loadData() { var promiseCourse = courseService.get(); var promiseStudent = studentService.get(); $scope.combineResult = $q.all([ promiseCourse, promiseStudent ]).then(function (resp) { $scope.Courses = resp[0].data; $scope.Students = resp[1].data; }); } });
<!DOCTYPE html> <html ng-app="mymodule"> <head> <title></title> <meta charset="utf-8" /> <link href="../Content/bootstrap.min.css" rel="stylesheet" /> <script src="../Scripts/jquery-3.2.1.min.js"></script> <script src="../Scripts/angular.min.js"></script> <script src="../MyScripts/logic.js"></script> </head> <body ng-controller="ctrl"> <div class="container"> <h1 class="h1">دروس</h1> <table class="table table-striped table-bordered table-condensed"> <thead> <tr> <td class="text-center">کد درس</td> <td class="text-center">نام درس</td> </tr> </thead> <tbody> <tr ng-repeat="Course in Courses"> <td class="text-center">{{Course.CourseId}}</td> <td class="text-center">{{Course.CourseName}}</td> </tr> </tbody> </table> <hr /> <h1 class="h1">دانشجویان</h1> <table class="table table-striped table-bordered table-condensed"> <thead> <tr> <td class="text-center">کد دانشجویی</td> <td class="text-center">نام و نام خانوادگی</td> <td class="text-center">سال دانشجویی</td> </tr> </thead> <tbody> <tr ng-repeat="Student in Students"> <td class="text-center">{{Student.StudentId}}</td> <td class="text-center">{{Student.Name}}</td> <td class="text-center">{{Student.AcadmicYear}}</td> </tr> </tbody> </table> </div> </body> </html>
تاریخ میلادی بلاگر واقعا روی اعصاب بود! این مشکل با استفاده از jQuery به صورت زیر قابل حل است.
تاریخ انگلیسی بلاگر به صورت زیر است:
البته در قسمت تنظیمات تاریخ بلاگ ، فرمت را به این صورت انتخاب کردم تا بدون مشکل تبدیل شود.
<h2 class='date-header'>2008/12/17</h2>
اینکار را با استفاده از jQuery به صورت زیر میتوان انجام داد:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'></script>
<script src='http://vahid.nasiri.googlepages.com/farsidate.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
$("h2.date-header").each(function() {
var obj = $(this);
obj.html(ToPersianDate(new Date(obj.text())));
});
$("a[title='comment permalink']").each(function(){
var obj = $(this);
obj.html(ToPersianDateLong(obj.text()));
});
$("a.post-count-link").each(function() {
var obj = $(this);
obj.html(getBloggerPMonthNames(obj.text()));
});
$("a.post-count-link").each(function() {
var obj = $(this);
obj.html(getBloggerPYear(obj.text()));
});
});
</script>
پ.ن.
Farsidate.js برای تبدیل تاریخ میلادی به شمسی جاوا اسکریپتی از اینجا قرض گرفته شد.
به روز رسانی،
- نام ماه و سال سمت راست صفحه هم فارسی شد.
- تاریخ کامنتها هم فارسی شد.
Restangular چیست؟
// Restangular returns promises Restangular.all('users').getList() // GET: /users .then(function(users) { // returns a list of users $scope.user = users[0]; // first Restangular obj in list: { id: 123 } }) // Later in the code... // Restangular objects are self-aware and know how to make their own RESTful requests $scope.user.getList('cars'); // GET: /users/123/cars // You can also use your own custom methods on Restangular objects $scope.user.sendMessage(); // POST: /users/123/sendMessage // Chain methods together to easily build complex requests $scope.user.one('messages', 123).one('from', 123).getList('unread'); // GET: /users/123/messages/123/from/123/unread
وابستگی ها
شروع پروژه
// Add Restangular as a dependency to your app angular.module('your-app', ['restangular']); // Inject Restangular into your controller angular.module('your-app').controller('MainCtrl', function($scope, Restangular) { // ... });
برخی از متدهای RestAngular
نام متد | پارامترهای ارسالی | توضیحات |
one | route, id | این متد یک RestAngular object ایجاد میکند که از آدرسی که در route قرار داده شده با id مشخص دریافت میشود. |
all | route | این متد یک RestAngular object که لیستی از المنت هایی را که در آدرس route قرار دارد، دریافت مینماید. |
oneUrl | route, url | این متد یک RestAngular object ایجاد میکند که یک المنت از url خاصی را بازگشت میدهد. مانند: Restangular.oneUrl( 'googlers' , 'http://www.google.com/1' ).get(); |
allUrl | route, url | این متد مانند متد قبل است با این تفاوت که یک مجموعه را بازگشت میدهد. |
copy | formElement | این متد یک کپی از المنتهای یک فرم را ایجاد میکند که ما میتوانیم آنها را تغییر دهیم. |
restangularizeElement | parent,element, route, queryParams | یک المنت جدید را به صورت Restangularize تغییر میدهد. |
restangularizeCollection | parent, element, route, queryParams | یک کالکشن Collection را به صورت Restangularize تغییر میدهد. |