13 Jun 2022
Saatnya membuat website dengan angular source code gratis free download
Yuk buat website dan blog single page application dengan astronot angular !!
Let's get started build new modern website blog single page application using angular, how to build website single page app with angular ?? so let's read this post, and get started built modern web app with astronot angular.Dan yap pada kesempatan kali ini kita akan ngebahas bagaimana cara membuat website modern single page application dengan menggunakan angular, dan tentu nya sudah include dengan source code free download gratis full untuk kamu gunain dalam belajar angular,serta deploy website mu . sebelum itu yuk cek video dibawah ini gimana sih bekerja nya dengan angular.
Play video and you can see how easy and fast develop modern website using angular. this is a source code so you can change code with you needed, you can download or clone our repo for learn angular blog spa, this project is a starter for astronot css so you can built modern unique design web app with astronot angular.before download angular source code you need to know about layout design concept.
Baiklah man teman dan wan kawan disini kita akan belajar sih untuk kebutuhan pembuatan website angular dengan mudah dan cepat, secara kita uda tau ya bahwa kalau kita kembangin sebuah project makai ng artinya spa teknologi digunakan , dimana gak perlu loading lagi pada setiap page nya langsung ngacir deh pokoknya... yuk cek dan intip tampilan desain nya dibawah ini langsung.
Home page starter - this is a home page design using with cover image include title description about your blog and website then include with get start button for accsess your blog list. of course with using astronot css make your website unique on design.
Dan halaman ini adalah halaman area beranda jadi nya ketika akses awal akan muncul display ini ya... makin keren dengan ada nya gambar disitu plus keterangan judul dan deskripsi mengenai situs kamu, dan ada tambahan lagi tombol untuk mengakses ke blog list kamu, jadi lebih menarik ya tentunya...
Blog list page - after click on get start button then your web visitor will be redirect to blog list page, on this area will be fetch all your blog post in here, include with title, description , image cover and button to accsess blog details.
jadi di sini adalah tampilan halaman daftar blog artikel yang sudah kamu buat, secara keseluruhan akan di tampilkan pada area ini, tentunya dengan desain yang lucu dan menarik era website terbaru saat ini, jadi makin kece dong untuk ngebangun situs kamu.
Article content details - if your web visitor click details information about blog article , astronot angular will displaying detail page article, with content, image cover, title and description about your blog article content page.
jadi disini adalah halaman tampilan dari halaman blog artikel, jadi ketika pengunjung situs klik pada salah satu detail informasi , maka nantinya akan muncul area ini yang berisi informasi mengenai postingan detail nya.
OKe now you can download or clone source code files from our github repo.
Github Download
Atau gunakan terminal dengan menjalankan
git clone https://github.com/mesinkasir/astronot-angular.git
Dan jangan lupa jika bermanfaat dan membantu kamu bisa berkontribusi dengan melakukan donasi agar team dev kami dapat memberikan source code gratis untuk kamu. lakukan donasi sukarela pada rekening kami berikut :
Donasi Sekarang
Home page starter
Blog list area
Article page
Installation Astornot Angular
Local installationBefore install source code file,for first make sure you have node , and angular on your devices, and of course we need code editor to work with astronot angular starter project. so you can download and install it on your devices.
Baiklah sebelum kita mulai menjalankan dan bekerja dengan kode sumber terbuka ini untuk awal pastikan kamu sudah menginstall beberapa kebutuhan untuk menjalankan web app ini, kamu bisa unduh beberapa kebutuhan dibawah ini untuk bekerja dengan nya.
Node download →
Visual Code Studio download →
After you have install all requipment now you can test with click keyboard windows logo and type
cmd
then you can run this command node -v
for check your node version, and you can run npm -v
for checking npm version , if terminal shell displaying node or npm version congratulations you have successfully installation progress.Now we need to install angular globaly on your device so you can run
npm install -g @angular/cli
this is for install angular on your devices. oke now we can check angular version so you can run ng version
, terminal shell displaying your angular cli version m so you have success install angular on your devices, allright now we can install astronot angular starter project web app.
For first you need create new folder on desktop , then extract and copy all files from source code to your new project folder, for example we create new project folder and name it with astronot-angular , open shell terminal then run
C:\Users\pcname\Desktop\astronot-angular
after this step you can open source code project using visual code studio just run code .
then we need to install source code with run npm install
, after installation success now you can run ng serve
and open web browser visit localhost:4200.Wohoo... congratulations your astronot angular single page app website blog is live now.
Online installation
hey you can install on online hosting if you needed, for first we need to register to github,register and create your github account then we need to accsess astronot angular repo just visit https://github.com/mesinkasir/astronot-angular then you can see on right top area menu, click fork for clone this repo on your github repo. oke now we need to create account and register to static hosting so register on heroku or vercel, just create account with your github account, then create new project or site, name it this project with your website and select integration your astronot-angular github repo and click deploy. congratulations now your single page app blog website is live. you can visit your website with heroku or vercel domain name, no need wory you can change domain on setting then you can use your TLD domain name.
Work with Astornot Angular
For first for sure we need to configure your web app, so you can open source code file project then open index.html file and you need to change title, description and other meta tag with your website, after you have change you can save it for update your SEO website.Oke now if you need to create or update edit and change article you can visit on astronot-angular/src/app/data/post.ts open with text editor file and change article content , image cover with you needed, if you need to create new just follow example article then create your article here. format article post
id: 0,
name: 'this is a title page blog' ,
description: 'description blog in here' ,
cover: 'insert url blog image cover' ,
content: 'you can write content in here'
If you deploy and install on online hosting so after you have change article your website is automaticly update from github repo integration with heroku vercel app, but if you have local installation and need to push your source code so you need to use production mode, so run
ng build
then push dist folder to static hosting, you can use surge, firebase for deploy your source code project.
you can run this live codding and change code with you needed, you can fork this code too.. LIVE CODDING
And we have angular project you can download it on here. download now and be ng !!
- Angular Online shop
- Angular Blog Static
- Angular Blog with firebase database
- Build Mobile app with ionic angular
- Angular KIOS POS point of sale app
- Laravel Angular Blog cms
- Angular android APP
- Angular Cuteblog
- Angular Portfolio
- Angular MVC
- New modern angular astronot
BONUS CONTENT YOU NEED TO KNOW :
New Point of sale mesin kasir →
All sourcecode project →