“Places2Go” dan MEAN Stack(I)

Mari kita tulis contoh Aplikasi Full Stack dari awal dengan Angular, Mongo, Express, dan Node.js: MEAN Stack yang terkenal… Aplikasi ini adalah daftar tugas tempat-tempat yang saya ingin suatu hari nanti dapat dikunjungi… . namun, sementara itu, mari bersenang-senang menulis beberapa kode dan melakukan beberapa perjalanan di api peta Google yang didukung oleh sistem gema berbasis Javascript!

Jadi, mari kita mulai dengan “Places2Go… dan the Mean Stack”

Kode sumber

Kode Sumber Lengkap tersedia di GitHub:

https://github.com/Pabloin/mean-stack-talk

#01 Direktur Kerja

Kami bekerja di Github dan lokal

Penyiapan #02

Buat proyek dengan Angular-cli

$ng tempat baru2go-v01

dan hasilnya adalah:

Dan hanya dengan satu perintah kita punya banyak! Proyek siap pakai dengan

package.json: Mungkin file yang paling penting… atau setidaknya yang pertama yang harus Anda perhatikan: kita dapat melihat ketergantungan dan menjalankan perintah

File .angular-cli.json dengan indikasi file utamanya:

Mari kita amati bahwa index.html tidak memiliki referensi apa pun untuk memulai javascript sudut, itu karena ketika kita menjalankan dengan ng serve dari sudut-cli kelas utamamain.tsdengan indikasi tentang bagaimana memulai sudut…

Pilihan lainnya adalah memasukkan berbagai javascript sudut di kepala. Tapi saya mengikuti cara sudut-cli

karma: alat pengujian http://karma-runner.github.io (https://www.youtube.com/watch?v=5mHjJ4xf_K0)
file .gitignore
node_modules: perintah pengaturan$ng aplikasi barujalankan juga perintah $ npm install

#03 Jalankan proyek kosong

Mari kita jalankan proyek yang kosong

$ng melayani

#04 Mulai Pengkodean — Ide

Aplikasinya tentang kota-kota yang ingin saya kunjungi, jadi yang paling alami adalah membuat kelas model “Kota”.

Saat ini saya punya tiga opsi:

Mulai pengkodean dari backend (yaitu: 1. Folder server dengan api rest di nodejs dengan express dan mongose dengan skema kota, bisa berupa aplikasi mandiri. 2. Kemudian tulis komponen layanan di folder layanan di aplikasi sudut untuk menghubungkan ke api rest, lakukan tes kesatuan dan 3. Integrasikan layanan dengan komponen depan/MVC dari aplikasi sudut). Biasanya ini cara saya bekerja karena Anda memahami datanya.
Pilihan lainnya adalah mengedit komponen yang dihasilkan oleh sudut-cli pada proyek template… Saya akan melakukannya…
Pilihan lainnya adalah membangun komponen depan terhadap objek tiruan, dan setelah itu mengganti tiruan dengan objek nyata. Ada video bagus John Papa di https://www.youtube.com/watch?v=WAPQF_GA7Qg&t=92s yang berfungsi dengan cara ini. Ngomong-ngomong, di video Jhon Papa menggunakan cuplikan kode stode visual (dari https://github.com/johnpapa/vscode-angular2-snippets), saya menggunakan atom, dan saya akan menggunakan ide yang sama ekstensi berikut https://atom.io/packages/angular-2-typescript-snippets:

#04 Mulai Pengkodean — Target

a) Tambahkan gambar latar belakang ke halaman halo

Saya akan menyalin gambar keassets/images/bg.jpgdan mengedit styles.cssutama dengan:

Latar belakang:

b) Tambahkan pustaka partikel js

Ini hanya terdiri dari beberapa javascript dan tag div, berdasarkan https://github.com/VincentGarreau/particles.js

Setelah sedikit tes, tidak mudah di sudut2 menambahkan javascript semacam itu ke aplikasi sudut… jadi, setidaknya, dan hanya untuk tes, saya menyalin lib ke halaman baru di luar

halaman partikel

c) Buka Browser dengan peluncur node

Saya akan membuat peluncur menjadi statis hanya menginginkan beberapa konten statis: node pertama akan memulai server dengan express dan kemudian node akan memulai browser ke alamat ekspres (perpustakaan opn).

Untuk membuka halaman sebelumnya tanpa membuka aplikasi sudut:

$ npm instal buka -simpan

$ npm instal ekspres -simpan

Dan kita bisa melihat server ekspres statis dan pemanggilan ke browser

Mari kita beri tag di github

$ git tag v1.0.0

$ git dorong asal v1.0.0

Kita dapat mengamati bahwa tag ini mencakup semua repo, tidak hanya app04 dengan versi yang sedang saya kerjakan….

#05 Mulai Pengodean — Target Bootstrap

Pertama saya telah menginstal plugin berikut untuk penggunaan bootstrap yang lebih baik di Atom

atom-bootstrap4
Di GitHub, kami sedang membangun editor teks yang selalu kami inginkan: dapat diretas hingga ke inti, namun dapat didekati pada hari pertama… atom.io

Juga, karena saya menulis dengan Angular Cli, saya juga akan menggunakan/menginstal “cli” berikut untuk sudut

“NG Bootstrap — arahan Angular khusus untuk Bootstrap 4”

GitHub - ng-bootstrap/ng-bootstrap: Bootstrap bertenaga sudut
ng-bootstrap - Bootstrap bertenaga sudutgithub.com

Instal ng-bootstrap

npm install --save @ng-bootstrap/ng-bootstrap

Saya akan membuat template dengan bootstrap 4: Saya bisa menulisnya dari awal, atau saya bisa menggunakan alat desain: Saya akan menggunakan http://www.layoutit.com/ dan alat ini menghasilkan template dengan Bootstrap 3, setelah itu Saya ingin memiliki bootstrap4, jadi saya harus mengonversi kode sumber dengan alat online http://demo.bootstraptor.com/bootstrap4/

Catatan tentang desain Responsif dengan fleksibilitas:

Dengan Kotak:

Di bootstrap Anda harus berpikir dalam dua belas baris:

Dengan Flexbox:

Pendekatan lain untuk desain responsif (Jika saya tidak salah, flexbox ditujukan untuk v4)

Ayo mulai:

Mari kita lihat beberapa kode html biasa bootstrap4: Itu hanya salin & tempel sederhana dari tutorial resmi, dan komponen resmi. (di github: https://github.com/PabloEzequiel/MEAN-Stack/blob/master/app04/Places2Go-and-the-MEAN-Stack/places2go-v01/src/assets/bv1/boot1.html)

Dan hasilnya

Ini adalah v1.0.1 di GitHub: Desain HTML Statis

Dari kode bootstrap html sumber, kami melihat bahwa kami telah mengimpor dua file JS di akhir file: jquety dan bootstrap.js

Pada halaman sederhana yang telah kita buat, satu-satunya komponen yang memerlukannya hanyalah peringatan sukses o bahaya, bukan yang lain.

#06 Mulai Pengkodean — Targetkan Bootstrap dari sudut-cli

Langkah-langkah perantara:

a) Mari tambahkan Navbar

Cara mudahnya adalah dengan menambahkan html pada “app.component” dan file bootstrap CDN dengan css ke index.html

Hal yang perlu ditingkatkan: Navbar dengan warna gelap, dan bootstrap css lokal untuk aplikasi, bukan CDN.

Bootstrap di Angular

Saya memiliki dua kemungkinan dengan bootstrap sudut: https://github.com/valor-software/ng2-bootstrap yang digunakan di Tema Apa Pun dan saya terlihat memiliki dokumen yang lebih baik dan https://github.com /ng-bootstrap/ng-bootstrap yang sudah saya instal

Opsi 1: paket ng-bootstrap

Saya akan mengikuti https://ng-bootstrap.github.io/#/getting-started

$ npm install --save @ng-bootstrap/ng-bootstrap

saya juga harus menginstal bootstrap 4:

$ npm install --save [email protected]

Semuanya terlihat baik-baik saja… tapi hasilnya…

Opsi 2: paket ng2-bootstrap

Paket ng2-bootstrap digunakan oleh template tema apa pun

buka src/app/app.module.ts dan tambahkan

import { AlertModule } from 'ng2-bootstrap';
...
@NgModule({
   ...
   imports: [AlertModule.forRoot(), ... ],
    ... 
})

buka angular-cli.json dan masukkan entri baru ke dalam array gaya

"styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],

Oke! mari kita lihat bahwa ng2-bootstrap berfungsi:

Di github versi1.0.2memiliki perubahan integrasi Angular2 dengan Bootstrap

Penjelasan yang bagus tentang cara menginstal bootstrap pada sudut cli, adalah dengan https://www.npmjs.com/package/angular-cli dikatakan cara mengedit sudut-cli.json untuk memasukkan ketergantungan bootstrap dan jquery.

Saya telah mengubah versi navbar menjadi lebih baik, juga dengan bootstrap (kode sumber di http://codepen.io/PabloEzequiel/pen/WpQoLK?editors=1000) masalah dengan versi ini di sudut2 adalah ketika Anda mengubah ukuran browser, menunya jangan drop down. Alasannya adalah saya harus mengintegrasikan jQuery, dan ini sedikit kontradiksi karena kita tidak boleh menggunakan jQuery dengan sudut… Mari kita lihat bagaimana kita akan mengintegrasikannya:

Tambahkan jQuery ke Angular

$ npm install --save jquery

Setelah itu kita akan menambahkannya ke .angular-cli.json

"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"styles.css"
],

dan $ ng builddan $ npm start bilah navigasi pada aplikasi sudut berfungsi!

Oke! kami telah mencapai tujuan agar navbar berfungsi di sudut2 dengan instalasi sudut-cli. Ini menyiratkan banyak langkah, misalnya memasukkan bootstrap dan jquery ke Angular-cli.json ke dalam folder dist