در این مقاله نحوه پیاده سازی دستورالعمل ngTagsInput در AngularJS را خواهید آموخت. ما از Web API برای دریافت داده ها از پایگاه داده SQL Server با Entity Framework استفاده خواهیم کرد.
ورودی برچسب چیست؟
ورودی برچسب یک جعبه ورودی است که هر بار که کلید خاصی را فشار میدهید، بهطور خودکار برچسبهایی را از متن تایپشده ایجاد میکند. برای برچسب گذاری و برجسته کردن اطلاعات درست روی جعبه ورودی مفید است.
ngTagsInput چیست؟
ngTagsInput یک دستورالعمل ورودی برچسب بسیار قابل تنظیم است که برای چارچوب AngularJS ساخته شده است، بدون وابستگی خارجی. این یک عنصر <tags-input> را فراهم می کند تا بتوانید به صورت معنایی بیان کنید که از یک ورودی با قابلیت برچسب گذاری استفاده می کنید.
کجا باید استفاده کنم؟
هنگامی که میخواهید به کاربران اجازه دهید برچسبها را برای یک پست وارد کنند، چندین مخاطب را از یک لیست انتخاب کنند، یا هر موقعیت دیگری که در آن مناسب است فهرستی از آیتمها به صورت خطی و مطابق با نوع خود داشته باشید، میتوانید از یک ورودی با پشتیبانی از برچسبگذاری بهره ببرید.
رویه ذخیره شده
- USE [NORTHWND]
- GO
- /****** Object: StoredProcedure [dbo].[GetEmployee] Script Date: 11/15/2017 4:36:15 PM ******/
- SET ANSI_NULLS ON
- GO
- SET QUOTED_IDENTIFIER ON
- GO
- ALTER PROCEDURE [dbo].[GetEmployee]
- AS
- SELECT EmployeeID,
- FirstName,
- LastName,
- City,
- Region,
- PostalCode,
- Country,
- Notes
- FROM Employees
- ORDER BY EmployeeID DESC
Web API –
بیایید ابتدا روی بخش Web API کار کنیم:
کلاس مدل:
- public partial class GetEmployee_Result
- {
- public int EmployeeID { get; set; }
- public string FirstName { get; set; }
- public string LastName { get; set; }
- public string City { get; set; }
- public string Region { get; set; }
- public string PostalCode { get; set; }
- public string Country { get; set; }
- public string Notes { get; set; }
- }
کلاس سازنده:
- /// <summary>
- /// Get Employee using stored procedure
- /// </summary>
- /// <returns></returns>
- public async Task<IEnumerable<GetEmployee_Result>> GetEmployee()
- {
- try
- {
- return await db.Database.SqlQuery<GetEmployee_Result>("GetEmployee").ToListAsync();
- }
- catch (Exception ex)
- {
- throw ex;
- }
- }
Web API
- [RoutePrefix("api/EmployeeAPI")]
- public class EmployeeAPIController : ApiController
- {
- private readonly EmployeeVMBuilder _employeeVMBuilder = new EmployeeVMBuilder();
- // GET api/<controller>
- [Route("GetEmployee")]
- public async Task<IEnumerable<GetEmployee_Result>> GetEmployee()
- {
- return await _employeeVMBuilder.GetEmployee();
- }
- }
بنابراین، در اینجا کار با Entity Framework و API Controller تمام شده است. اکنون با استفاده از "Manage NuGet Package" فایل های ارائه شده در زیر را نصب کنید.
فایل های جاوا اسکریپت و مرجع CSS را در BundleConfig.cs اضافه کنید.
- bundles.Add(new StyleBundle("~/Content/css").Include(
- "~/Content/bootstrap.css",
- "~/Content/site.css",
- "~/Content/ui-grid.min.css",
- "~/Content/ng-tags-input.css"));
- bundles.Add(new ScriptBundle("~/bundles/angular").Include(
- "~/Scripts/angular.js",
- "~/Scripts/angular-route.js",
- "~/Scripts/ui-grid.js",
- "~/Scripts/angular-ui/ui-bootstrap.js",
- "~/Scripts/angular-ui/ui-bootstrap-tpls.js"));
- bundles.Add(new ScriptBundle("~/bundles/ngtagsInput").Include(
- "~/Scripts/ng-tags-input.js"));
- bundles.Add(new ScriptBundle("~/bundles/employee").Include(
- "~/Angular/app.js",
- "~/Angular/Services/employeeService.js",
- "~/Angular/Controller/employeeController.js",
- "~/Angular/Controller/editEmployeeController.js",
- "~/Angular/Controller/addEmployeeController.js",
- "~/Angular/Controller/ngtagsInputController.js"));
و در _layout.cshtml رندر کنید.
- @Scripts.Render("~/bundles/jquery")
- @Scripts.Render("~/bundles/bootstrap")
- @Scripts.Render("~/bundles/angular")
- @Scripts.Render("~/bundles/employee")
- @Scripts.Render("~/bundles/ngtagsInput")
- @RenderSection("scripts", required: false)
حالا یک Angular Controller جدید با scope اضافه کنید. من فقط از یک اسکریپت برای Module، Service و Controller استفاده می کنم. اگر روی یک پروژه بزرگ کار می کنید، می توانید آن را جداگانه داشته باشید.