ASP.NET Core Angular 2 EF 1.0.1 Web API با استفاده از بسته الگو.
مقدمه
در این مقاله بیایید ببینیم چگونه اولین ASP.NET Core Angular 2 Starter Application (.NET Core) خود را با استفاده از بسته قالب با استفاده از Entity Framework 1.0.1 و Web API برای نمایش داده ها از پایگاه داده به Angular2 و ASP.NET Core ایجاد کنیم. برنامه تحت وب.
توجه داشته باشید
لطفا مقاله قبلی ما را بخوانید که به طور عمیق در مورد شروع کار با بسته قالب هسته ASP.NET توضیح می دهد . در این مقاله در مورد موارد زیر خواهیم دید:
- ایجاد نمونه پایگاه داده و جدول در SQL Server برای نمایش در برنامه وب ما.
- نحوه ایجاد ASP.NET Core Angular 2 Starter Application (.NET Core) با استفاده از بسته قالب
- ایجاد EF، کلاس DBContext و کلاس مدل.
- ایجاد WEB API
- ایجاد اولین فایل TypeScript کامپوننت برای دریافت نتیجه JSON WEB API با استفاده از ماژول Http.
- ایجاد اولین فایل HTML کامپوننت برای پیوند نتیجه نهایی.
پیش نیازها
مطمئن شوید که تمام پیش نیازها را در رایانه خود نصب کرده اید. اگر نه، پس همه آنها را یکی یکی دانلود و نصب کنید.
- ابتدا Visual Studio 2015 را با آپدیت 3 از این لینک دانلود و نصب کنید .
- اگر ویژوال استودیو 2015 دارید و هنوز با آپدیت 3 آپدیت نکرده اید، به روز رسانی 3 ویژوال استودیو 2015 را از این لینک دانلود و نصب کنید .
- NET Core 1.0.1 را دانلود و نصب کنید
- TypeScript 2.0 را دانلود و نصب کنید
- Node.js نسخه 4.0 یا بالاتر را دانلود و نصب کنید. من V6.9.1 ( لینک دانلود ) را نصب کردم .
- دانلود فایل visz ASP.NET Core Template Pack را از این لینک دانلود و نصب کنید .
قسمت کد
مرحله 1 ایجاد یک پایگاه داده و جدول
ما از پایگاه داده SQL Server برای WEB API و EF خود استفاده خواهیم کرد. ابتدا یک پایگاه داده به نام StudentsDB و یک جدول به عنوان StudentMaster ایجاد می کنیم. در اینجا اسکریپت SQL برای ایجاد جدول پایگاه داده و نمونه درخواست درج رکورد در جدول ما است. پرس و جوی زیر را در سرور SQL محلی خود اجرا کنید تا پایگاه داده و جدول ایجاد شود تا در پروژه ما استفاده شود.
- USEMASTER
- GO
- --1) Check
- for the Database Exists.If the database is exist then drop and create new DB
- IFEXISTS(SELECT[name] FROMsys.databasesWHERE[name] = 'StudentsDB')
- DROPDATABASEStudentsDB
- GO
- CREATEDATABASEStudentsDB
- GO
- USEStudentsDB
- GO
- --1) //////////// StudentMasters
- IFEXISTS(SELECT[name] FROMsys.tablesWHERE[name] = 'StudentMasters')
- DROPTABLEStudentMasters
- GO
- CREATETABLE[dbo].[StudentMasters](
- [StdID] INTIDENTITYPRIMARYKEY, [StdName][varchar](100) NOTNULL, [Email][varchar](100) NOTNULL, [Phone][varchar](20) NOTNULL, [Address][varchar](200) NOTNULL
- )
- --insert sample data to Student Master table
- INSERTINTO[StudentMasters]([StdName], [Email], [Phone], [Address])
- VALUES('Shanu', 'syedshanumcain@gmail.com', '01030550007', 'Madurai,India')
- INSERTINTO[StudentMasters]([StdName], [Email], [Phone], [Address])
- VALUES('Afraz', 'Afraz@afrazmail.com', '01030550006', 'Madurai,India')
- INSERTINTO[StudentMasters]([StdName], [Email], [Phone], [Address])
- VALUES('Afreen', 'Afreen@afreenmail.com', '01030550005', 'Madurai,India')
- select * from[StudentMasters]
مرحله 2 ایجاد برنامه ASP.NET Core Angular 2
پس از نصب تمام پیش نیازهای ذکر شده در بالا و الگوی ASP.NET Core، روی دسکتاپ خود روی Start >> Programs >> Visual Studio 2015 >> Visual Studio 2015 کلیک کنید. روی New >> Project کلیک کنید. Web >> ASP.NET Core Angular 2 Starter را انتخاب کنید. نام پروژه خود را وارد کرده و روی OK کلیک کنید.
پس از ایجاد برنامه ASP.NET Core Angular 2، چند ثانیه صبر کنید. خواهید دید که تمام وابستگی ها به طور خودکار بازیابی می شوند.
چه چیزی در راه حل بسته قالب هسته ASP.NET وجود دارد؟
- WWWroot
میتوانیم ببینیم که همه فایلهای CSS، JS در زیر پوشه «dist» اضافه شدهاند. فایل main-client.js فایل مهمی است زیرا تمام نتایج Angular2 کامپایل میشوند و نتایج از این فایل «js» بارگیری میشوند. به فایل html ما.