استفاده از سرویس http$ برای خواندن فایل json در AngularJS

پیش نیاز های این دوره:

این دوره برای افراد مبتدی مناسب نیست.

شما باید با طریقه ساخت پروژه انلاین آشنایی داشته باشید.
روش ها و طریقه کار با html را بشناسید.
همچنین باید با جاوا اسکریپت آشنا باشید.
آشنایی با text editor ها و ویرایشگر های متن.
باید با توابع جاوا اسکریپ نیز آشنایت داشته باشید.

فایل controller.js سرویس چیزی است که ما داریم کارهای عادی انجام میدهیم از کد هایمان مراقبت میکند.کار سرویس http این است که ارتباط بین برنامه ها و سرور httpرا برقرار میکند. استفاده از سرویس http خیلی راحت است تنها کاری که لازم است انجام دهید این است که همه اطلاعات را انتخاب و اطلاعات انتخاب شده را حذف کنید. بعد از آن باید از سرویس http استفاده کنید کاری که باید انجام دهید این است که آن هارا در کنار $scope در controllers اضافه کنید. همین طورعلامت $ و بعد http. حال شما میتوانید به خواص http دسترسی داشته باشید.

پس میتوانید به عملکرد http پی ببرید و آنچه میخواهید از اطلاعات فایل json را بدست بیاورید. فایل json در پوشهjs و اسمش هم json.data هست. بعد از این اگر درخواست موفقیت آمیز بود درخواست .suceess را مینویسد بعد از آن کاری را که میخواهید انجام دهید که یک تابع را اجرا کنید پس به انگولار میگویید که داده هارا دریافت کند و در $scope.artists قرار دهد.

{(;myApp.controller('Mycontroler',function Mycontroller($scope,$http ){ $http.get('js/data.json').success(function(data)){$scope.artist=data

رفع مشکلات احتمالی در کروم:

شما باید وقتی که خواستید کاری را انجام دهید از سروری که فایلتون اونجا قرار دارد استفاده کنید.

ساده ترین راه استفاده از مرورگر safari است. مرورگر safari محدودیتی مثل مرور گر کروم ندارد.
زمانی که شما برنامتون را بر روی سرور بارگذاری کردید تا زمانی که برنامه بر روی سرور وجود دارد به همین ترتیب کار میکند و گوگل کروم اروری نشان نمیدهد.
در زمان راه اندازی نیازی به دامین نمی باشد.

کارهایی برای جلوگیری از error های احتمالی:

در زمان اجرا برنامه مرورگر کرومتان را دوباره راه اندازی نکنید.
بساری ازتوسعه دهندگان میخواهند که جاوا اسکریپت را بهینه کنند بصورتی که کدهایشان کوچکتر و بهینه تر شود و در وب سایت ها راحتتراستفاده شود.
زمانی که میخواهید فایل های جاوا اسکریپت را وارد کنید نسخه کوچکی از کتاب خانه وجود دارد که همه متغیر ها فشرده میشوند وتب ها و فضاهای خالی از بین میروند بهینه سازی کتابخانه ها ممکن است مشکلاتی برای Angular به وجود بیاورد.

روشی وجود دارد که میتوانیید اسکریپ هایتان رو را اصلاح کند و این مشکل را برطرف کند باید از سرویس http با کمی تفاوت استفاده کنید. محافظت از برخی از کد ها در برابرکوچک شدن و گذاشتن در داخل یک ارایه بعد از Mycontroller از یک آرایه استفاده میکنیم.

;{(myApp.controller('Mycontroler',['$scope',$http'] function Mycontroller($scope,$http ){ $http.get('js/data.json').success(function(data)){$scope.artist=data

ذخیره کنید و با مرورگرتان بازکنید با استفاده از سرویس ها می توانید به راحتی کد هارو کوچکتر کنید.

تاحالا داشتیم روی یک مدل ساده کار میکردیم و اکنون میخواهیم کمی کارمان را گسترش دهیم و یک متغییر در Mycontroller اضافه می کنیم که اسمش author یک abject داریم که اطلاعاتی را درباره ی نام و کمپانی به ما میدهد.

ما قصد داریم که از یک قالب بسیار ساده استفاده کنیم و میخواهیم اطلاعات کامل تری وارد کنیم و view رو اصلاح کنیم.

با کپی گرفتن از برخی از فایل ها از desktop شروع میکنیم که فایل css و یک فایل images داریم و برخی از فایل هارو که در این نرم افزار جدید استفاده کنیم موجود است.حال پوشه angular را باز می کنیم و images و css را کپی می کنیم و سپس فایل json.data در پوشه js میبریم.

در برنامک ها یک پوشه css داریم که درآن ها کد های css وجود دارد.

در حال حاضر باید در پوشه cssبیشتر وقتمان را روی artist list بگذاریم و متغییر را تغیرمی دهیم و artist میگذاریم.

هر عنصر در آرایه از دو بخش تشکیل شده است نام و مقدار.

چیزی به اسمartist و short name دارید شما میتوانید فایل json را به طور مستقیم به برنامه angular باز خوانی کنید.

پس در فایل index.html فایل css را بایدinput کنیم.

و پس ذخیره می کنیم و برای اینکه مطمن شویم به درستی کار می کند در مرورگرتان بارگذاری کنید.

حال قصد داریم یک view جدید ایجاد کنیم و کلاسی به نام main و در این div کلاسی به نام artistlist ایجاد می کنیم.

Item in artist: متغییرitem که داده ها را ازartist می خواند.

پس برای گرفتن item های name یک تگ div اضافه می کنیم.

<h3>{{item.reknown}}</h3>