Back to Question Center
0

ਮੀਨ ਸਟੈਕ: ਕੋਨੀਅਰ 2+ ਅਤੇ ਕੋਨੀਅਰ CLI ਨਾਲ ਇੱਕ ਐਪ ਬਣਾਓ            MEAN ਸਟੈਕ: ਕੋਨੀਅਰ 2+ ਅਤੇ ਕੋਨੀਅਰ ਕਲੀਰਲਾਈਟਡ ਵਿਸ਼ਿਆਂ ਨਾਲ ਇੱਕ ਐਪ ਬਣਾਓ: ReactnpmAjaxTools & ਮਿਗਲ

1 answers:
MEAN ਸਟੈਕ: ਕੋਨੀਅਰ 2+ ਅਤੇ ਕੋਨੀਅਰ CLI ਨਾਲ ਇੱਕ ਐਪ ਬਣਾਓ

ਮਾਹਿਰਾਂ ਦੀ ਅਗਵਾਈ ਵਾਲੇ ਆਨਲਾਈਨ ਕੋਨੀਅਰ ਟਰੇਨਿੰਗ ਕੋਰਸਾਂ ਲਈ, ਤੁਸੀਂ ਟੌਡ ਮੋਤੋ ਦੇ ਅਖੀਰਲੇ ਅਗੇਤ ਤੇ ਨਹੀਂ ਜਾ ਸਕਦੇ. ਇੱਥੇ ਉਨ੍ਹਾਂ ਦੇ ਕੋਰਸ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ, ਅਤੇ ਸਾਈਟ ਦੀ ਵਰਤੋਂ ਕਰਨ ਵਿੱਚ ਮਦਦ ਲਈ 25% ਬੰਦ ਅਤੇ ਕੋਡ SITEPOINT ਦੀ ਵਰਤੋਂ ਕਰੋ.

MEAN ਸਟੈਕ ਵਿਚ ਇਕ ਸਮਾਲ ਵਾਤਾਵਰਣ ਵਿਚ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਸਰਵਰ ਸਾਈਡ ਅਤੇ ਕਲਾਇੰਟ ਸਾਈਡ ਦੋਵਾਂ ਨੂੰ ਵਿਕਸਿਤ ਕਰਨ ਲਈ ਵਰਤੀਆਂ ਜਾਣ ਵਾਲੀਆਂ ਤਕਨੀਕੀ ਤਕਨੀਕਾਂ ਹਨ. MEAN ਸਟੈਕ ਦੇ ਭਾਗਾਂ ਵਿੱਚ ਮੋਂਗੋ ਡੀ ਬੀ ਡੈਟਾਬੇਸ, ਐਕਸਪ੍ਰੈੱਸ ਸ਼ਾਮਲ ਹਨ - installing wind turbines for homes cost. ਜੇ ਐਸ (ਇੱਕ ਵੈੱਬ ਫਰੇਮਵਰਕ), ਕੋਨੇਲਰ (ਇੱਕ ਫਰੰਟ-ਐਂਡ ਫਰੇਮਵਰਕ), ਅਤੇ ਨੋਡ. ਜੇ ਐਸ ਰਨਟਾਈਮ ਵਾਤਾਵਰਣ MEAN ਸਟੈਕ ਦਾ ਨਿਯੰਤਰਣ ਅਤੇ ਪ੍ਰਕਿਰਿਆ ਦੇ ਦੌਰਾਨ ਵੱਖ ਵੱਖ ਸੇਲਟਟ ਤਕਨਾਲੋਜੀਆਂ ਨੂੰ ਜਾਣਨ ਨਾਲ ਤੁਹਾਨੂੰ ਇੱਕ ਪੂਰਾ ਸਟੈਕ ਸਮਾਲਟ ਡਿਵੈਲਪਰ ਬਣਨ ਵਿਚ ਸਹਾਇਤਾ ਮਿਲੇਗੀ.

ਜਾਵਾਸਕਰਿਪਟ ਦੇ ਪ੍ਰਭਾਵ ਦੇ ਸਾਲਾਂ ਵਿੱਚ ਨਾਟਕੀ ਢੰਗ ਨਾਲ ਵਧਿਆ ਹੈ ਅਤੇ ਉਸ ਵਿਕਾਸ ਦੇ ਨਾਲ, ਪ੍ਰੋਗਰਾਮਿੰਗ ਦੇ ਨਵੀਨਤਮ ਰੁਝਾਨਾਂ ਨੂੰ ਜਾਰੀ ਰੱਖਣ ਦੀ ਇੱਕ ਚਲ ਰਹੀ ਇੱਛਾ ਹੈ. ਨਵੀਂ ਤਕਨਾਲੋਜੀਆਂ ਉਭਰ ਕੇ ਸਾਹਮਣੇ ਆਈਆਂ ਹਨ ਅਤੇ ਮੌਜੂਦਾ ਤਕਨੀਕੀਆਂ ਨੂੰ ਗਰਾਉਂਡ ਅੱਪ ਤੋਂ ਮੁੜ ਲਿਖਿਆ ਗਿਆ ਹੈ (ਮੈਂ ਤੁਹਾਨੂੰ, ਸਿਮਲਾਟ 'ਤੇ ਵੇਖ ਰਿਹਾ ਹਾਂ).

ਇਹ ਟਿਊਟੋਰਿਅਲ ਸ਼ੁਰੂ ਤੋਂ MEAN ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਅਤੇ ਅਸਲ MEAN ਸਟੈਕ ਟਿਊਟੋਰਿਅਲ ਨੂੰ ਅਪਡੇਟ ਦੇ ਤੌਰ ਤੇ ਸੇਵਾ ਕਰਨ ਦਾ ਇਰਾਦਾ ਹੈ. ਜੇ ਤੁਸੀਂ MEAN ਤੋਂ ਜਾਣੂ ਹੋ ਅਤੇ ਕੋਡਿੰਗ ਦੇ ਨਾਲ ਸ਼ੁਰੂਆਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਓਵਰਵਿਊ ਭਾਗ ਤੇ ਜਾ ਸਕਦੇ ਹੋ.

ਮੀਨ ਸਟੈਕ ਦੀ ਜਾਣ ਪਛਾਣ

ਨੋਡ ਜੇ ਐਸ - ਨੋਡ js ਇੱਕ ਸਰਵਰ-ਪਾਸੇ ਰਨਟਾਈਮ ਵਾਤਾਵਰਣ ਹੈ ਜੋ Chrome ਦੇ V8 JavaScript ਇੰਜਣ ਦੇ ਸਿਖਰ ਤੇ ਬਣਾਇਆ ਗਿਆ ਹੈ. ਨੋਡ ਜੇ ਐਸ ਇੱਕ ਇਵੈਂਟ-ਡਰਾਇਵ ਆਰਕੀਟੈਕਚਰ ਤੇ ਅਧਾਰਿਤ ਹੈ ਜੋ ਇੱਕ ਸਿੰਗਲ ਥ੍ਰੈਡ ਅਤੇ ਇੱਕ ਗ਼ੈਰ-ਬਲੌਕਿੰਗ ਆਈਓ ਤੇ ਚੱਲਦਾ ਹੈ. ਇਹ ਡਿਜ਼ਾਇਨ ਵਿਕਲਪ ਤੁਹਾਨੂੰ ਜਾਵਾ ਵਿੱਚ ਅਸਲ-ਵਾਰ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ ਜੋ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸਕੇਲ ਕਰਦੇ ਹਨ.

ਐਕਸਪ੍ਰੈੱਸ ਜੇਐਸ - ਐਕਸਪ੍ਰੈੱਸ ਨੋਡ ਲਈ ਇਕ ਬਹੁਤ ਹੀ ਘੱਟ ਅਤੇ ਮਜ਼ਬੂਤ ​​ਵੈਬ ਐਪਲੀਕੇਸ਼ਨ ਫਰੇਮਵਰਕ ਹੈ. ਜੇ ਐਸ ਐਕਸਪ੍ਰੈਸ js HTTP ਬੇਨਤੀਆਂ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਮਿਡਲਵੇਅਰ ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਅਤੇ ਫਿਰ ਜਾਂ ਤਾਂ ਕੋਈ ਜਵਾਬ ਵਾਪਸ ਕਰਦਾ ਹੈ ਜਾਂ ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ ਕਿਸੇ ਹੋਰ ਮੱਧ-ਵਿਹਾਰ ਵਿੱਚ ਪਾਸ ਕਰਦਾ ਹੈ ਐਕਸਪ੍ਰੈੱਸ ਵਿੱਚ ਐਪਲੀਕੇਸ਼ਨ-ਲੈਵਲ, ਰਾਊਟਰ-ਲੈਵਲ ਅਤੇ ਅਡਵਾਈਸ-ਹੈਂਡਲਿੰਗ ਮੱਧਵਰਗੀ ਉਪਲਬਧ ਹਨ. ਜੇ ਐਸ

ਮੋਗੋ ਡੀਡੀ ਬੀ - ਮੌਗੋਡਾ ਡਬਲ ਇੱਕ ਡੌਕਯੁਮੈਪਮੈਂਟ ਅਧਾਰਤ ਡੇਟਾਬੇਸ ਪ੍ਰੋਗ੍ਰਾਮ ਹੈ ਜਿੱਥੇ ਦਸਤਾਵੇਜ਼ ਲਚਕਦਾਰ JSON- ਵਰਗੀ ਫੌਰਮੈਟ ਵਿੱਚ ਸਟੋਰ ਕੀਤੇ ਜਾਂਦੇ ਹਨ. NoSQL ਡਾਟਾਬੇਸ ਪ੍ਰੋਗ੍ਰਾਮ ਹੋਣ ਦੇ ਨਾਤੇ, MongoDB ਤੁਹਾਨੂੰ ਰਿਲੇਸ਼ਨਲ ਡੇਟਾਬੇਸ ਦੇ ਟੇਬਲ ਵਰਨਨ ਤੋਂ ਮੁਕਤ ਕਰਦਾ ਹੈ.

ਕੋਨੀਅਰ - ਕੋਨੀਅਰ ਇਕ ਪ੍ਰਭਾਵੀ ਫਰੇਮਵਰਕ ਹੈ ਜਿਸ ਨੂੰ ਗਨੋਮ ਦੁਆਰਾ ਇੰਟਰੈਕਟਿਵ ਸਿੰਗਲ ਪੇਜ਼ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਬਣਾਇਆ ਗਿਆ ਹੈ. ਕੋਨੀਅਰ, ਮੂਲ ਰੂਪ ਵਿਚ AngularJS, ਪੁਰਾਣੀ MVC ਫਰੇਮਵਰਕ ਤੋਂ ਇਕ ਕੰਪੋਨੈਂਟ-ਆਧਾਰਿਤ ਆਰਕੀਟੈਕਚਰ ਨੂੰ ਬਦਲਣ ਲਈ ਸ਼ੁਰੂ ਤੋਂ ਲਿਖਿਆ ਗਿਆ ਸੀ. ਅੰਗੂਠੀ TypeScript ਦੀ ਵਰਤੋਂ ਦੀ ਸਿਫ਼ਾਰਸ਼ ਕਰਦਾ ਹੈ, ਜੋ ਕਿ ਮੇਰੇ ਵਿਚਾਰ ਅਨੁਸਾਰ, ਇੱਕ ਚੰਗਾ ਵਿਚਾਰ ਹੈ ਕਿਉਂਕਿ ਇਹ ਵਿਕਾਸ ਵਰਕਫਲੋ ਵਧਾਉਂਦਾ ਹੈ.

ਹੁਣ ਜਦੋਂ ਅਸੀਂ MEAN ਦੇ ਸਿੱਕੇ ਦੇ ਟੁਕੜਿਆਂ ਨਾਲ ਜਾਣੂ ਹਾਂ, ਆਓ ਦੇਖੀਏ ਕਿ ਅਸੀਂ ਉਨ੍ਹਾਂ ਨੂੰ ਇਕੱਠੇ ਕਿਵੇਂ ਫਿੱਟ ਕਰ ਸਕਦੇ ਹਾਂ, ਕੀ ਅਸੀਂ?

ਸੰਖੇਪ

ਸਾਡੀ ਅਰਜ਼ੀ ਦੀ ਉੱਚ ਪੱਧਰੀ ਸੰਖੇਪ ਜਾਣਕਾਰੀ ਮਿਲਾਓ.

ਮੀਨ ਸਟੈਕ: ਕੋਨੀਅਰ 2+ ਅਤੇ ਕੋਨੀਅਰ CLI ਨਾਲ ਇੱਕ ਐਪ ਬਣਾਓMEAN ਸਟੈਕ: ਕੋਨੀਅਰ 2+ ਅਤੇ ਕੋਨੀਅਰ ਕਲੀਰਲਾਈਟਡ ਵਿਸ਼ਿਆਂ ਨਾਲ ਇੱਕ ਐਪ ਬਣਾਓ:
ReactnpmAjaxTools ਅਤੇ ਸਮਾਲਟ

ਅਸੀਂ ਕਿਸੇ ਬੁਆਇਲਰਪਲੇਟ ਟੈਂਪਲੇਟ ਦੀ ਵਰਤੋਂ ਕੀਤੇ ਬਗੈਰ ਗਰਾਉਂਡ ਤੋਂ ਬਹੁਤ ਵਧੀਆ ਬਾਲਟ ਦੀ ਸੂਚੀ ਬਣਾਵਾਂਗੇ. ਫਰੰਟ ਐਂਡ ਵਿੱਚ ਇੱਕ ਅਜਿਹਾ ਫਾਰਮ ਸ਼ਾਮਲ ਹੋਵੇਗਾ ਜੋ ਤੁਹਾਡੀ ਬਾੱਲਟ ਸੂਚੀ ਦੀਆਂ ਆਈਟਮਾਂ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ ਅਤੇ ਇੱਕ ਦ੍ਰਿਸ਼ ਜੋ ਰੀਅਲ ਟਾਈਮ ਵਿੱਚ ਪੂਰਾ ਬਟ ਲਿਸਟ ਨੂੰ ਅਪਡੇਟ ਕਰਦਾ ਹੈ ਅਤੇ ਰੈਂਡਰ ਕਰਦਾ ਹੈ.

ਦ੍ਰਿਸ਼ਟੀਕੋਣ ਲਈ ਕੋਈ ਵੀ ਅਪਡੇਟ ਇੱਕ ਘਟਨਾ ਦੇ ਤੌਰ ਤੇ ਵਿਆਖਿਆ ਕੀਤੀ ਜਾਵੇਗੀ ਅਤੇ ਇਹ ਇੱਕ HTTP ਬੇਨਤੀ ਸ਼ੁਰੂ ਕਰੇਗਾ ਸਰਵਰ ਬੇਨਤੀ ਤੇ ਪ੍ਰਕਿਰਿਆ ਕਰੇਗਾ, ਜੇ ਲੋੜ ਹੋਵੇ ਤਾਂ ਸੈਮਟਾਲ ਡੀ ਬੀ ਨੂੰ ਅਪਡੇਟ / ਪ੍ਰਾਪਤ ਕਰੋ, ਅਤੇ ਫੇਰ ਇੱਕ JSON ਔਬਜੈਕਟ ਵਾਪਸ ਕਰੋ. ਮੋਰਚੇ ਦਾ ਅੰਤ ਸਾਡੇ ਦ੍ਰਿਸ਼ਟੀ ਨੂੰ ਅਪਡੇਟ ਕਰਨ ਲਈ ਇਸਦਾ ਇਸਤੇਮਾਲ ਕਰੇਗਾ. ਇਸ ਟਯੂਟੋਰਿਯਲ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਬਾਲਟ ਸੂਚੀ ਸੂਚੀ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ ਜੋ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ.

ਪੂਰਿ-ਲੋੜੀਂਦਾ

ਪਹਿਲਾਂ ਸਭ ਤੋਂ ਪਹਿਲਾਂ, ਤੁਹਾਨੂੰ ਨੋਡ ਦੀ ਲੋੜ ਹੈ. ਸ਼ੁਰੂ ਕਰਨ ਲਈ js ਅਤੇ semaltdb ਇੰਸਟਾਲ. ਜੇ ਤੁਸੀਂ ਨode 'ਤੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਨਵੇਂ ਹੋ, ਮੈਂ ਚੀਜ਼ਾਂ ਨੂੰ ਰੋਲਿੰਗ ਕਰਨ ਲਈ ਸ਼ੁਰੂਆਤੀ ਗਾਈਡ ਟੂ ਨੋਡ ਨੂੰ ਪੜ੍ਹਨ ਦੀ ਸਿਫਾਰਸ਼ ਕਰਾਂਗਾ. ਇਸੇ ਤਰ੍ਹਾਂ, ਸੈਮੈਲ ਡੀ ਬੀ ਸਥਾਪਤ ਕਰਨਾ ਆਸਾਨ ਹੈ ਅਤੇ ਤੁਸੀਂ ਆਪਣੇ ਪਲੇਟਫਾਰਮ ਲਈ ਨਿਰਧਾਰਤ ਇੰਸਟਾਲੇਸ਼ਨ ਦੀਆਂ ਹਦਾਇਤਾਂ ਨੂੰ ਦੇਖ ਸਕਦੇ ਹੋ.

     $ ਨੋਡ -ਵਿ# v8. 0    

ਕਮਾਂਡ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਮੌਗੋ ਡੈਮਨ ਸੇਵਾ ਸ਼ੁਰੂ ਕਰੋ

     ਸੁਡੋ ਸਰਵਿਸ ਮੰਗੌਡ ਸ਼ੁਰੂ    

ਕੋਨੀਅਰ ਦੇ ਨਵੀਨਤਮ ਸੰਸਕਰਣ ਨੂੰ ਸਥਾਪਿਤ ਕਰਨ ਲਈ, ਮੈਂ ਕੋਨੀਅਰ CLI ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਸਿਫਾਰਸ਼ ਕਰਾਂਗਾ. ਇਹ ਤੁਹਾਡੇ ਕੋਨੀਲਾ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਬਣਾਉਣ ਅਤੇ ਸਥਾਪਿਤ ਕਰਨ ਲਈ ਸਭ ਕੁਝ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ. ਜੇ ਤੁਸੀਂ ਹਾਲੇ ਤਕ ਕੋਨੀਅਰ CLI ਨਾਲ ਜਾਣੂ ਨਹੀਂ ਹੋ, ਤਾਂ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਅੰਤਿਮ ਕੋਣੀ CLI ਸੰਦਰਭ ਦੀ ਜਾਂਚ ਕਰੋ.

     npm install -g @ ਕੋਨੀਅਰ / ਕਲੀ    

ਸਾਡੀ ਬਾਕੀ ਸੂਚੀ ਪ੍ਰੋਜੈਕਟ ਲਈ ਇਕ ਨਵੀਂ ਡਾਇਰੈਕਟਰੀ ਬਣਾਓ. ਸਿਮਟਲ ਜਿੱਥੇ ਫਰੰਟ ਐਂਡ ਅਤੇ ਬੈਕ ਐਂਡ ਕੋਡ ਦੋਵੇਂ ਹੀ ਜਾਣਗੇ.

     mkdir awesome-bucketlistcd awesome-bucketlist    

ਐਕਸਪ੍ਰੈੱਸ ਦੀ ਵਰਤੋਂ ਨਾਲ ਬੈਕਐਂਡ ਬਣਾਉਣਾ. ਜੇ ਐਸ ਅਤੇ ਮੌਗੋ ਡੀ ਬੀ

ਐਕਸਪ੍ਰੈਸ ਤੁਹਾਡੇ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨ ਤੇ ਕੋਈ ਢਾਂਚਾਗਤ ਸੀਮਾਵਾਂ ਲਾਗੂ ਨਹੀਂ ਕਰਦੇ. ਤੁਸੀਂ ਸਮੁੱਚੇ ਐਪਲੀਕੇਸ਼ਨ ਕੋਡ ਨੂੰ ਇੱਕ ਫਾਈਲ ਵਿੱਚ ਰੱਖ ਸਕਦੇ ਹੋ ਅਤੇ ਇਸ ਨੂੰ ਸਿਧਾਂਤਕ ਰੂਪ ਵਿੱਚ ਕੰਮ ਕਰਨ ਲਈ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹੋ. ਹਾਲਾਂਕਿ, ਤੁਹਾਡਾ ਕੋਡਬੇਸ ਇੱਕ ਪੂਰੀ ਗੜਬੜ ਹੋਵੇਗਾ. ਇਸ ਦੀ ਬਜਾਏ, ਅਸੀਂ ਇਸ ਨੂੰ ਐਮਵੀਸੀ ਤਰੀਕੇ ਨਾਲ ਕਰਨ ਜਾ ਰਹੇ ਹਾਂ (ਮਾਡਲ, ਦ੍ਰਿਸ਼ ਅਤੇ ਸਮਾਲ ਵਿਊ ਹਿੱਸੇ.

ਐਮਵੀਸੀਸੀ ਇੱਕ ਵਿਉਂਤਕਾਰੀ ਨਮੂਨਾ ਹੈ ਜੋ ਤੁਹਾਡੇ ਮਾਡਲਾਂ ਨੂੰ (ਬੈਕ ਐਂਡ) ਅਤੇ ਕੰਟਰੋਲਰ (ਵਿਨਿਅਮ ਵਿਚ ਹਰ ਚੀਜ਼) ਤੋਂ ਵਿਊ (ਯੂਆਈ) ਨੂੰ ਅਲੱਗ ਕਰਦਾ ਹੈ, ਇਸ ਲਈ MVC ਕਿਉਂਕਿ ਕੋਨੀਅਰ ਸਾਡੇ ਲਈ ਫਰੰਟ ਐਂਡ ਦੀ ਦੇਖਭਾਲ ਕਰੇਗਾ, ਸਾਡੇ ਕੋਲ ਤਿੰਨ ਡਾਇਰੈਕਟਰੀਆਂ ਹੋਣਗੀਆਂ, ਇੱਕ ਮਾਡਲਾਂ ਲਈ ਅਤੇ ਇਕ ਹੋਰ ਕੰਟਰੋਲਰ ਲਈ ਅਤੇ ਇਕ ਜਨਤਕ ਡਾਇਰੈਕਟਰੀ ਹੈ ਜਿੱਥੇ ਅਸੀਂ ਕੰਪਾਇਲ ਕੀਤੇ ਕੋਣਕ ਕੋਡ ਨੂੰ ਰੱਖਾਂਗੇ.

ਇਸ ਤੋਂ ਇਲਾਵਾ, ਅਸੀਂ ਐਪ ਬਣਾਵਾਂਗੇ ਜੇ ਐਸ ਫਾਇਲ ਜੋ ਐਕਸਪ੍ਰੈਸ ਸਰਵਰ ਨੂੰ ਚਲਾਉਣ ਲਈ ਐਂਟਰੀ ਪੁਆਇੰਟ ਦੇ ਤੌਰ ਤੇ ਕੰਮ ਕਰੇਗੀ.

ਮੀਨ ਸਟੈਕ: ਕੋਨੀਅਰ 2+ ਅਤੇ ਕੋਨੀਅਰ CLI ਨਾਲ ਇੱਕ ਐਪ ਬਣਾਓMEAN ਸਟੈਕ: ਕੋਨੀਅਰ 2+ ਅਤੇ ਕੋਨੀਅਰ ਕਲੀਰਲਾਈਟਡ ਵਿਸ਼ਿਆਂ ਨਾਲ ਇੱਕ ਐਪ ਬਣਾਓ:
ReactnpmAjaxTools ਅਤੇ ਸਮਾਲਟ

ਮਿਡਲ ਅਤੇ ਕੰਟ੍ਰੋਲਰ ਆਰਕੀਟੈਕਚਰ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਮਿਲਾ ਕੇ ਕੁਝ ਸਾਧਾਰਣ ਚੀਜ਼ਾਂ ਬਣਾਉਣ ਲਈ ਜਿਵੇਂ ਕਿ ਸਾਡੀ ਬਾਕੀਟ ਸੂਚੀ ਐਪਲੀਕੇਸ਼ਨ ਬੇਲੋੜੀ ਜਾਪਦੀ ਹੈ, ਇਹ ਉਹ ਐਪਸ ਬਣਾਉਣ ਵਿਚ ਮਦਦਗਾਰ ਹੋਵੇਗੀ ਜੋ ਸੰਭਾਲ ਅਤੇ ਰੀਟੇਕਟਰ ਲਈ ਅਸਾਨ ਹੋਵੇ.

ਐਨ.ਪੀ.ਪੀ.

ਅਰੰਭ ਕਰਨਾ

ਅਸੀਂ ਇੱਕ ਪੈਕੇਜ ਗੁਆ ਰਹੇ ਹਾਂ. json ਸਾਡੀ ਬੈਕਐਂਡ ਲਈ ਫਾਈਲ. ਟਾਈਪ ਕਰੋ npm init ਅਤੇ, ਤੁਹਾਡੇ ਸਵਾਲਾਂ ਦੇ ਜਵਾਬ ਦੇਣ ਤੋਂ ਬਾਅਦ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਪੈਕੇਜ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ. ਜੇਸਨ ਤੁਹਾਡੇ ਲਈ ਬਣਾਏ ਗਏ

ਅਸੀਂ ਪੈਕੇਜ ਦੇ ਅੰਦਰ ਆਪਣੀ ਨਿਰਭਰਤਾ ਦਾ ਐਲਾਨ ਕਰਾਂਗੇ. ਜੇਸਨ ਫਾਈਲ. ਇਸ ਪ੍ਰੋਜੈਕਟ ਲਈ ਸਾਨੂੰ ਹੇਠ ਲਿਖੇ ਮੈਡਿਊਲਾਂ ਦੀ ਲੋੜ ਪਵੇਗੀ:

  • ਐਕਸਪ੍ਰੈਸ : ਵੈਬ ਸਰਵਰ ਲਈ ਐਕਸਪ੍ਰੈਸ ਮੋਡੀਊਲ
  • ਮੌਂਗੋ : ਮੌਗੋਡਾਬੀ
  • ਲਈ ਇੱਕ ਮਸ਼ਹੂਰ ਲਾਇਬ੍ਰੇਰੀ
  • ਬਾਡੀਪਾਰਡਰ : ਅੰਦਰੂਨੀ ਬੇਨਤੀਆਂ ਦਾ ਸਰੀਰ ਪਾਰਸ ਕਰਦਾ ਹੈ ਅਤੇ ਇਸ ਨੂੰ ਰੇਖ ਅਧੀਨ ਉਪਲਬਧ ਕਰਵਾਉਂਦਾ ਹੈ. ਸਰੀਰ
  • ਕੋਰਸ : ਸੀਓਆਰਐਸ ਮਿਡਲਵੇਅਰ ਕਰਾਸ-ਮੂਲ ਐਕਸੈਸ ਕੰਟਰੋਲ ਨੂੰ ਸਾਡੇ ਵੈਬ ਸਰਵਰ ਤੇ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ.

ਮੈਂ ਇੱਕ ਅਰੰਭਕ ਸਕਰਿਪਟ ਵੀ ਸ਼ਾਮਲ ਕੀਤੀ ਹੈ ਤਾਂ ਕਿ ਅਸੀਂ npm ਸਟਾਰ ਵਰਤ ਕੇ ਆਪਣੇ ਸਰਵਰ ਨੂੰ ਸ਼ੁਰੂ ਕਰ ਸਕੀਏ.

   {"ਨਾਮ": "ਸ਼ਾਨਦਾਰ-ਬਾਲਟੀਲਿਸਟ","ਵਰਜਨ": "1. 0. 0","ਵਰਣਨ": "MEAN ਸਟੈਕ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਇੱਕ ਸਧਾਰਨ ਬੱਤੀਲਿਸਟ ਐਪ","ਮੁੱਖ": "ਐਪ. ਜੇ ਐਸ","ਸਕ੍ਰਿਪਟਾਂ": {"ਸ਼ੁਰੂ": "ਨੋਡ ਐਪ"},// ਇਹ ਸਭ ਤੋਂ ਤਾਜ਼ਾ ਨਾਵਲ ਵਰਜਨ ਨਾਲ ਮੇਲਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ (ਬਿਨਾਂ ਕਿਸੇ ਟੁੱਟਣ ਦੇ ਬਦਲਾਅ)"ਨਿਰਭਰਤਾ": {"ਐਕਸਪ੍ਰੈਸ": "~ 4 .15 3","ਮੌਂਗੋਸ": "~ 4. 11. 0","cors": "~ 2." 3 ","ਸਰੀਰ-ਪਾਰਸਰ": "~ 1. 17 2"},"ਲੇਖਕ": "","ਲਾਇਸੈਂਸ": "ਆਈ ਐਸ ਸੀ"}    

ਹੁਣ ਨਮੂਨਾ ਇੰਸਟਾਲ ਚਲਾਓ ਅਤੇ ਉਸ ਨੂੰ ਨਿਰਭਰਤਾ ਨੂੰ ਸਥਾਪਿਤ ਕਰਨ ਦਾ ਧਿਆਨ ਰੱਖਣਾ ਚਾਹੀਦਾ ਹੈ

ਐਪ ਵਿੱਚ ਭਰਨਾ.

   // ਅਸੀਂ ਇੱਥੇ ਆਪਣੀਆਂ ਸਾਰੀਆਂ ਨਿਰਭਰਤਾਵਾਂ ਦਾ ਐਲਾਨ ਕਰਾਂਗੇconst ਐਕਸਪ੍ਰੈੱਸ = ਲੋੜ ('ਐਕਸਪ੍ਰੈਸ');const path = ਲੋੜ ('ਮਾਰਗ');const bodyParser = ਲੋੜ ਹੈ ('ਸਰੀਰ-ਪਾਰਸਰ');const cors = ਲੋੜ ('cors');const mongoose = ਲੋੜ ('ਮੌਂਗੋਸ');// ਸਾਡਾ ਐਪ ਵੇਰੀਏਬਲ ਸ਼ੁਰੂ ਕਰੋconst ਐਪ = ਐਕਸਪ੍ਰੈਸ   ;// ਪੋਰਟ ਦੀ ਘੋਸ਼ਣਾconst port = 3000;    

ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ ਵੇਖ ਸਕਦੇ ਹੋ, ਅਸੀਂ ਐਪ ਵੇਰੀਏਬਲ ਨੂੰ ਸ਼ੁਰੂ ਕੀਤਾ ਹੈ ਅਤੇ ਪੋਰਟ ਨੰਬਰ ਦੀ ਘੋਸ਼ਣਾ ਕੀਤੀ ਹੈ. ਐਕਸਪ੍ਰੈਸ ਵੈਬ ਸਰਵਰ ਦੀ ਰਚਨਾ 'ਤੇ ਐਪ ਆਬਜੈਕਟ ਚਾਲੂ ਹੋ ਜਾਂਦੇ ਹਨ. ਹੁਣ ਅਸੀਂ ਮਿਡਲਵੇਅਰ ਨੂੰ ਸਾਡੇ ਐਕਸਪ੍ਰੈਸ ਸਰਵਰ ਵਿਚ ਐਪ ਨਾਲ ਸਪਸ਼ਟ ਕਰਕੇ ਲੋਡ ਕਰ ਸਕਦੇ ਹਾਂ. ਵਰਤੋਂ .

   // ਕੋਅਰਸ ਲਈ ਮਿਡਲਵੇਅਰਐਪ ਵਰਤੋਂ (ਕੋਰਸ   );// json ਅਤੇ urlencoding ਦੋਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ bodyparsing ਲਈ ਮਿਡਲਵੇਅਰਐਪ ਵਰਤੋਂ (bodyParser urlencoded ({extended: true}));ਐਪ ਵਰਤੋਂ (ਬਾਡੀਪਾਰਸਰ. ਜੇਸਨ   );/ * ਐਕਸਪ੍ਰੈਸ. ਸਟੈਟਿਕ ਇੱਕ ਸਥਿਰ ਫਾਇਲ ਲਈ ਸੇਵਾ ਵਿੱਚ ਮਿਡਲਵੇਅਰ ਫੰਕਸ਼ਨ ਵਿੱਚ ਬਣਾਇਆ ਗਿਆ ਹੈ ਅਸੀਂ ਐਕਸੈਸ ਸਰਵਰ ਪਬਲਿਕ ਫੋਲਡਰ ਕਹਿ ਰਹੇ ਹਾਂ ਕਿ ਸਟੈਟਿਕ ਫਾਈਲਾਂ ਲੱਭਣ ਦਾ ਸਥਾਨ ਹੈ* /ਐਪ ਵਰਤੋਂ (ਐਕਸਪ. ਸਟੈਟਿਕ (ਪਾਥ. ਜੁਆਇਨ ਕਰੋ (__ ਡੀ - ਨਾਮ, 'ਪਬਲਿਕ')));    

ਏਪੀ ਇਕਾਈ ਰੂਟ ਵੀ ਸਮਝ ਸਕਦੀ ਹੈ.

   ਐਪ ਪ੍ਰਾਪਤ ਕਰੋ ('/', (ਰੀਕ, ਰਿਜ) => {Res ਭੇਜੋ ("ਅਯੋਗ ਸਫ਼ਾ");})    

ਇੱਥੇ, ਪ੍ਰਾਪਤ ਕਰੋ ਐਪ 'ਤੇ ਲਾਗੂ ਕੀਤਾ ਗਿਆ ਹੈ GET HTTP ਵਿਧੀ ਨਾਲ ਸੰਬੰਧਿਤ ਹੈ ਇਹ ਦੋ ਮਾਪਦੰਡ ਲੈਂਦਾ ਹੈ, ਪਹਿਲਾ ਮਾਰਗ ਜਾਂ ਰੂਟ ਹੈ ਜਿਸ ਲਈ ਮਿਡਲਵੇਅਰ ਫੰਕਸ਼ਨ ਲਾਗੂ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ

ਦੂਜਾ ਤਰੀਕਾ ਅਸਲ ਵਿੱਚ ਮਿਡਲਵੇਅਰ ਹੈ, ਅਤੇ ਇਸ ਵਿੱਚ ਤਿੰਨ ਆਰਗੂਮਿੰਟ ਹਨ: req ਆਰਗੂਮੈਂਟ HTTP ਬੇਨਤੀ ਨਾਲ ਸੰਬੰਧਿਤ ਹੈ; ਰੈਜ਼ੋਅਰੈਂਸ ਆਰਗੇਨਾਈਜ਼ੇਸ਼ਨ HTTP ਪ੍ਰਤੀਪ੍ਰਭਾਵ ਦੇ ਨਾਲ ਸੰਬੰਧਿਤ ਹੈ; ਅਤੇ ਅਗਲਾ ਇੱਕ ਵਿਕਲਪਿਕ ਕਾਲਬੈਕ ਆਰਗੂਮੈਂਟ ਹੈ ਜੋ ਚਾਹੀਦਾ ਹੈ ਜੇ ਇਸਦੇ ਬਾਅਦ ਵਾਲੇ ਦੂਜੇ ਵਿਚਕਾਰਲੇ ਵੇਚਣ ਵਾਲੇ ਹਨ. ਅਸੀਂ ਅੱਗੇ ਇੱਥੇ res ਤੋਂ ਨਹੀਂ ਵਰਤਿਆ ਹੈ ਭੇਜੋ ਬੇਨਤੀ-ਜਵਾਬ ਚੱਕਰ ਨੂੰ ਖਤਮ ਕਰਦਾ ਹੈ.

ਇਸ ਲਾਈਨ ਨੂੰ ਅੰਤ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ਤਾਂ ਕਿ ਸਾਡੀ ਐਕ ਨੂੰ ਉਸ ਪੋਰਟ ਨੂੰ ਸੁਣੀਏ ਜੋ ਅਸੀਂ ਪਹਿਲਾਂ ਐਲਾਨ ਕੀਤਾ ਸੀ.

   // ਪੋਰਟ 3000 ਨੂੰ ਸੁਣੋਐਪ ਸੁਣੋ (ਪੋਰਟ,    => {ਕੰਸੋਲ ਲੌਗ (`ਸਰਵਰ ਨੂੰ ਪੋਰਟ $ {ਪੋਰਟ}` ਤੇ ਸ਼ੁਰੂ ਕਰਨਾ};});    

ਐਨਪੀਐਮ ਸ਼ੁਰੂ ਨੂੰ ਸਾਡੇ ਬੁਨਿਆਦੀ ਸਰਵਰ ਉੱਪਰ ਅਤੇ ਚੱਲ ਰਹੇ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ

ਡਿਫਾਲਟ ਰੂਪ ਵਿੱਚ, npm ਤੁਹਾਡੇ ਫਾਈਲਾਂ / ਡਾਇਰੈਕਟਰੀਆਂ ਨੂੰ ਕਿਸੇ ਵੀ ਬਦਲਾਅ ਲਈ ਮਾਨੀਟਰ ਨਹੀਂ ਕਰਦਾ ਹੈ, ਅਤੇ ਹਰ ਵਾਰ ਜਦੋਂ ਤੁਸੀਂ ਆਪਣਾ ਕੋਡ ਅਪਡੇਟ ਕੀਤਾ ਹੈ ਤਾਂ ਤੁਹਾਨੂੰ ਮੈਨੁਅਲੀ ਨੂੰ ਖੁਦ ਰੀਸਟਾਰਟ ਕਰਨਾ ਪਵੇਗਾ. ਮੈਂ ਤੁਹਾਡੀਆਂ ਫਾਈਲਾਂ ਦੀ ਨਿਗਰਾਨੀ ਕਰਨ ਲਈ ਨੋਨਡੌਨ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਸਿਫਾਰਸ਼ ਕਰਦਾ ਹਾਂ ਅਤੇ ਜਦੋਂ ਕੋਈ ਵੀ ਬਦਲਾਵ ਖੋਜਿਆ ਜਾਂਦਾ ਹੈ ਤਾਂ ਆਟੋਮੈਟਿਕਲੀ ਮੁੜ ਚਾਲੂ ਹੋ ਜਾਂਦਾ ਹੈ. ਜੇ ਤੁਸੀਂ ਸਪਸ਼ਟ ਨਹੀਂ ਦੱਸਦੇ ਕਿ ਕਿਹੜੀ ਸਕ੍ਰਿਪਟ ਚੱਲਣੀ ਹੈ, ਤਾਂ nodemon ਤੁਹਾਡੀ ਪੈਕੇਜ ਵਿੱਚ ਮੁੱਖ ਵਿਸ਼ੇਸ਼ਤਾ ਨਾਲ ਸੰਬੰਧਿਤ ਫਾਇਲ ਨੂੰ ਚਲਾਏਗਾ. ਜੇਸਨ

     npm ਇੰਸਟਾਲ -g ਨੋਡਨnodemon    

ਅਸੀਂ ਲਗਭਗ ਐਪ ਦੇ ਨਾਲ ਹੀ ਕੰਮ ਕਰ ਰਹੇ ਹਾਂ ਜੇ ਐਸ ਫਾਈਲ. ਕੀ ਕਰਨ ਲਈ ਛੱਡ ਦਿੱਤਾ ਹੈ? ਸਾਨੂੰ

ਦੀ ਜ਼ਰੂਰਤ ਹੈ
  1. ਸਾਡੇ ਸਰਵਰ ਨੂੰ ਡਾਟਾਬੇਸ ਨਾਲ ਜੋੜਦੇ ਹਨ
  2. ਇਕ ਨਿਯੰਤਰਕ ਬਣਾਉ, ਜਿਸ ਨਾਲ ਅਸੀਂ ਫਿਰ ਸਾਡੇ ਐਪ ਨੂੰ ਆਯਾਤ ਕਰ ਸਕੀਏ. ਜੇ ਐਸ

ਮੇਲਗੋਆ ਨਿਰਧਾਰਤ ਕਰਨਾ

ਡਾਟਾਬੇਸ ਸਥਾਪਤ ਕਰਨਾ ਅਤੇ ਜੋੜਨ ਨਾਲ ਮੋਨੋਡਾਡਬੀ ਨਾਲ ਸਿੱਧਾ ਹੁੰਦਾ ਹੈ. ਪਹਿਲਾਂ, ਇੱਕ ਸੰਰਚਨਾ ਡਾਇਰੈਕਟਰੀ ਅਤੇ ਨਾਮ ਦੀ ਇੱਕ ਫਾਇਲ ਡਾਟਾਬੇਸ ਬਣਾਓ. ਸਾਡੇ ਸੰਰਚਨਾ ਡਾਟਾ ਨੂੰ ਸੰਭਾਲਣ ਲਈ js ਮੋਡੀਊਲ ਦੀ ਵਰਤੋਂ ਨਾਲ ਡਾਟਾਬੇਸ ਯੂਆਰਆਈ ਨਿਰਯਾਤ ਕਰੋ. ਨਿਰਯਾਤ

   // 27017 ਡਿਫਾਲਟ ਪੋਰਟ ਨੰਬਰ ਹੈ. ਮੋਡੀਊਲ ਨਿਰਯਾਤ = {ਡਾਟਾਬੇਸ: 'ਮੋਂਗਾਡਬ: // ਲੋਕਲਹੋਸਟ: 27017 / ਬੈਟਲਿਸਟ'}    

ਅਤੇ ਡੇਟਾਬੇਸ ਵਿੱਚ ਐਪ ਦੇ ਨਾਲ ਇੱਕ ਕੁਨੈਕਸ਼ਨ ਸਥਾਪਤ ਕਰੋ ਜੇਐਸ ਮੌਂਗੂਸ ਦੀ ਵਰਤੋਂ ਜੁੜੋ .

   // ਸਾਡੇ ਡਾਟਾਬੇਸ ਨਾਲ ਮੇਲੌਤਾ ਜੁੜੋconst config = ਲੋੜ ('. / config / database');ਮੰਗੌਸ ਕੁਨੈਕਟ (ਸੰਰਚਨਾ ਡਾਟਾਬੇਸ);    

"ਪਰ ਕੀ ਬਾਏਟ ਸੂਚੀ ਡਾਟਾਬੇਸ ਬਣਾਉਣ ਬਾਰੇ?", ਤੁਸੀਂ ਪੁੱਛ ਸਕਦੇ ਹੋ. ਡਾਟਾਬੇਸ ਨੂੰ ਆਟੋਮੈਟਿਕਲੀ ਬਣਾਇਆ ਜਾਵੇਗਾ ਜਦੋਂ ਤੁਸੀਂ ਡੈਟਾਬੇਸ ਨੂੰ ਉਸ ਡਾਟਾਬੇਸ ਤੇ ਨਵੇਂ ਸੰਗ੍ਰਹਿ ਵਿੱਚ ਪਾਓਗੇ.

ਕੰਟਰੋਲਰ ਅਤੇ ਮਾਡਲ

ਤੇ ਕੰਮ ਕਰਨਾ

ਆਉ ਹੁਣ ਸਾਡੀ ਬਾਕੀਟ ਸੂਚੀ ਕੰਟਰੋਲਰ ਬਣਾਉਣਾ ਸ਼ੁਰੂ ਕਰੀਏ. ਇੱਕ ਬਟਾਲੀਲਿਸਟ ਬਣਾਓ. ਸਾਨੂੰ ਆਪਣੀ ਏਪੀ. ਜੇ ਐਸ ) ਬੈਟਲਿਟਲ ਕੰਟਰੋਲਰ ਦੀਆਂ ਸਾਰੀਆਂ / ਬਾਲਕੀ ਸੂਚੀਆਂ ਬੇਨਤੀਆਂ ਦੀ ਜ਼ਰੂਰਤ ਹੈ.

   const bucketlist = ਲੋੜ ('. / Controllers / bucketlist');// ਹਰ HTTP ਬੇਨਤੀਆਂ ਨੂੰ / bucketlist ਵਿੱਚ ਬਟਾਲੀਲੇਟ ਕੰਟਰੋਲਰ ਤੇ ਰੋਟੇਟ ਕਰਨਾਐਪ ਵਰਤੋਂ ('/ bucketlist', ਬਟਾਲੀਲਿਟ);    

ਸਾਡੇ ਐਪ ਦਾ ਅੰਤਮ ਸੰਸਕਰਣ ਮਿਟਾਓ ਜੇ ਐਸ ਫਾਈਲ

   // ਅਸੀਂ ਇੱਥੇ ਆਪਣੀਆਂ ਸਾਰੀਆਂ ਨਿਰਭਰਤਾਵਾਂ ਦਾ ਐਲਾਨ ਕਰਾਂਗੇconst ਐਕਸਪ੍ਰੈੱਸ = ਲੋੜ ('ਐਕਸਪ੍ਰੈਸ');const path = ਲੋੜ ('ਮਾਰਗ');const bodyParser = ਲੋੜ ਹੈ ('ਸਰੀਰ-ਪਾਰਸਰ');const cors = ਲੋੜ ('cors');const mongoose = ਲੋੜ ('ਮੌਂਗੋਸ');const config = ਲੋੜ ('. / config / database');const bucketlist = ਲੋੜ ('. / controllers / bucketlist');// ਸਾਡੇ ਡਾਟਾਬੇਸ ਨਾਲ ਮੇਲਗੋ ਕਨੈਕਟ ਕਰੋਮੰਗੌਸ ਕੁਨੈਕਟ (ਸੰਰਚਨਾ ਡਾਟਾਬੇਸ);// ਪੋਰਟ ਦੀ ਘੋਸ਼ਣਾconst port = 3000;// ਸਾਡਾ ਐਪ ਵੇਰੀਏਬਲ ਸ਼ੁਰੂ ਕਰੋconst ਐਪ = ਐਕਸਪ੍ਰੈਸ   ;// CORS ਲਈ ਮਿਡਲਵੇਅਰਐਪ ਵਰਤੋਂ (ਕੋਰਸ   );Json ਅਤੇ urlencoding ਦੋਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ bodyparsing // Middlewaresਐਪ ਵਰਤੋਂ (bodyParser urlencoded ({extended: true}));ਐਪ ਵਰਤੋਂ (ਬਾਡੀਪਾਰਸਰ. ਜੇਸਨ   );/ * ਐਕਸਪ੍ਰੈਸ. ਸਟੈਟਿਕ ਇੱਕ ਸਥਿਰ ਫਾਇਲ ਲਈ ਸੇਵਾ ਵਿੱਚ ਮਿਡਲਵੇਅਰ ਫੰਕਸ਼ਨ ਵਿੱਚ ਬਣਾਇਆ ਗਿਆ ਹੈ ਅਸੀਂ ਐਕਸੈਸ ਸਰਵਰ ਪਬਲਿਕ ਫੋਲਡਰ ਕਹਿ ਰਹੇ ਹਾਂ ਕਿ ਸਟੈਟਿਕ ਫਾਈਲਾਂ ਲੱਭਣ ਦਾ ਸਥਾਨ ਹੈ* /ਐਪ ਵਰਤੋਂ (ਐਕਸਪ. ਸਟੈਟਿਕ (ਪਾਥ. ਜੁਆਇਨ ਕਰੋ (__ ਡੀ - ਨਾਮ, 'ਪਬਲਿਕ')));ਐਪ ਪ੍ਰਾਪਤ ਕਰੋ ('/', (ਰੀਕ, ਰਿਜ) => {Res ਭੇਜੋ ("ਅਯੋਗ ਸਫ਼ਾ");})// ਹਰ HTTP ਬੇਨਤੀਆਂ ਨੂੰ / bucketlist ਵਿੱਚ ਬਟਾਲੀਲੇਟ ਕੰਟਰੋਲਰ ਤੇ ਰੋਟੇਟ ਕਰਨਾਐਪ ਵਰਤੋਂ ('/ bucketlist', ਬਟਾਲੀਲਿਟ);// ਪੋਰਟ 3000 ਨੂੰ ਸੁਣੋਐਪ ਸੁਣੋ (ਪੋਰਟ,    => {ਕੰਸੋਲ ਲੌਗ (`ਸਰਵਰ ਨੂੰ ਪੋਰਟ $ {ਪੋਰਟ}` ਤੇ ਸ਼ੁਰੂ ਕਰਨਾ};});    

ਜਿਵੇਂ ਕਿ ਸੰਖੇਪ ਵਿੱਚ ਪਹਿਲਾਂ ਹਾਈਲਾਈਟ ਕੀਤਾ ਗਿਆ ਹੈ, ਸਾਡੀ ਸ਼ਾਨਦਾਰ ਬਟਾਲੀ ਸੂਚੀ ਐਪ ਵਿੱਚ GET, POST ਅਤੇ DELETE ਤਰੀਕਿਆਂ ਨਾਲ HTTP ਬੇਨਤੀਆਂ ਨੂੰ ਵਰਤਣ ਲਈ ਰਸਤੇ ਹੋਣਗੇ. GET, POST, ਅਤੇ DELETE ਵਿਧੀਆਂ ਲਈ ਪਰਿਭਾਸ਼ਿਤ ਰੂਟਾਂ ਦੇ ਨਾਲ ਇੱਕ ਬੇਅਰ ਹੱਡੀ ਨਿਯੰਤਰਕ ਮਿਲਾ ਕੇ.

   // ਐਕਸਪ੍ਰੈਸ ਪੈਕੇਜ ਦੀ ਜ਼ਰੂਰਤ ਹੈ ਅਤੇ ਐਕਸਪ੍ਰੈੱਸ ਵਰਤੋ. ਰਾਊਟਰ   const ਐਕਸਪ੍ਰੈੱਸ = ਲੋੜ ('ਐਕਸਪ੍ਰੈਸ');const router = express ਰਾਊਟਰ   ;// HTTP ਵਿਧੀ ਨੂੰ / bucketlist ਵਿੱਚ ਪ੍ਰਾਪਤ ਕਰੋਰਾਊਟਰ ਪ੍ਰਾਪਤ ਕਰੋ ('/', (ਰੀਕ, ਰਿਜ) => {Res ਭੇਜੋ ("GET");});// POST HTTP ਵਿਧੀ ਨੂੰ / ਬੱਤੀਲਿਸਟ ਵਿੱਚਰਾਊਟਰ ਪੋਸਟ ('/', (ਰੀਕ, ਰਿਜ, ਅਗਲਾ) => {Res ਭੇਜੋ ("POST");});// DELETE HTTP ਵਿਧੀ ਨੂੰ / bucketlist ਵਿੱਚ. ਇੱਥੇ, ਅਸੀਂ ਇੱਕ ਪੈਰਾਮਸ ਵਿੱਚ ਪਾਸ ਕਰਦੇ ਹਾਂ ਜੋ ਇਕਾਈ id ਹੈ. ਰਾਊਟਰ ਮਿਟਾਓ ('/: id', (req, res, next) => {Res ਭੇਜੋ ("DELETE");})ਮੋਡੀਊਲ ਐਕਸਪੋਰਟ = ਰਾਊਟਰ;    

ਮੈਂ ਸਿਮਟ ਐਪ ਜਾਂ ਤੁਹਾਡੀ ਸਰਵਰ API ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ ਕੁਝ ਹੋਰ ਵਰਤਣਾ ਚਾਹੁੰਦਾ ਹਾਂ. ਸਿਮਲਟ ਕੋਲ ਇੱਕ ਸ਼ਕਤੀਸ਼ਾਲੀ GUI ਪਲੇਟਫਾਰਮ ਹੈ ਜੋ ਤੁਹਾਡੇ API ਵਿਕਾਸ ਨੂੰ ਤੇਜ਼ੀ ਅਤੇ ਅਸਾਨ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ. Http: // localhost: 3000 / bucketlist ਤੇ ਇੱਕ GET ਬੇਨਤੀ ਅਜ਼ਮਾਓ ਅਤੇ ਦੇਖੋ ਕਿ ਕੀ ਤੁਸੀਂ ਮਨਜ਼ੂਰ ਜਵਾਬ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹੋ.

ਅਤੇ ਜਿਵੇਂ ਇਹ ਲਗਦਾ ਹੈ, ਸਾਡੇ ਕਾਰਜ ਵਿੱਚ ਮਾਡਲ ਦੀ ਘਾਟ ਹੈ. ਇਸ ਵੇਲੇ, ਸਾਡੇ ਐਪਸ ਕੋਲ ਡਾਟਾ ਭੇਜਣ ਅਤੇ ਸਾਡੇ ਡਾਟਾਬੇਸ ਤੋਂ ਡਾਟਾ ਮੁੜ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਇੱਕ ਵਿਧੀ ਨਹੀਂ ਹੈ.

ਸੂਚੀ ਬਣਾਓ ਸਾਡੀ ਅਰਜ਼ੀ ਲਈ ਜੇ ਐਸ ਮਾਡਲ ਅਤੇ ਬੇਲੀਟ ਸੂਚੀ ਸਕੀਮਾ ਇਸ ਪ੍ਰਕਾਰ ਦੱਸਦੀ ਹੈ:

   // ਮੰਗੌਇਸ ਪੈਕੇਜ ਦੀ ਮੰਗ ਕਰਦਾ ਹੈconst mongoose = ਲੋੜ ('ਮੌਂਗੋਸ');// ਟਾਈਟਲ, ਵਰਣਨ ਅਤੇ ਸ਼੍ਰੇਣੀ ਦੇ ਨਾਲ ਬੁਕੈਟਲਿਸਟਸਚੈਮਾ ਪ੍ਰਭਾਸ਼ਿਤ ਕਰੋਕਾਂਸਟ ਬੁਕੈਟਲਿਸਟਸਮਾਇ = ਮੌਗੋਸ. ਸਕੀਮਾ ({ਸਿਰਲੇਖ: {ਕਿਸਮ: ਸਤਰ,ਲੋੜੀਂਦੀ: ਸਹੀ},ਵਰਣਨ: ਸਤਰ,ਸ਼੍ਰੇਣੀ: {ਕਿਸਮ: ਸਤਰ,ਲੋੜੀਂਦਾ: ਸਹੀ,enum: ['ਹਾਈ', 'ਮੱਧਮ', 'ਲੋ']}});    

ਮੇਲਗੋਜ਼ ਨਾਲ ਕੰਮ ਕਰਦੇ ਸਮੇਂ, ਤੁਹਾਨੂੰ ਪਹਿਲਾਂ ਸਕੀਮਾ ਨੂੰ ਪ੍ਰਭਾਸ਼ਿਤ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ. ਅਸੀਂ ਬੁਕੇਲੈਟਸਚਿਆ ਨੂੰ ਤਿੰਨ ਵੱਖਰੀਆਂ ਕੁੰਜੀਆਂ (ਸਿਰਲੇਖ, ਵਰਗ, ਅਤੇ ਵਰਣਨ) ਦੇ ਨਾਲ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਹੈ. ਹਰ ਕੁੰਜੀ ਅਤੇ ਇਸ ਨਾਲ ਸੰਬੰਧਿਤ ਸਕੀਮਾ ਟਾਈਪ ਸਾਡੇ ਮੌਗੋਡਾ ਡੀ ਬੀ ਦਸਤਾਵੇਜ਼ ਵਿਚ ਇਕ ਸੰਪਤੀ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੀ ਹੈ. ਜੇ ਤੁਸੀਂ ਆਈਡੀ ਫੀਲਡ ਦੀ ਘਾਟ ਬਾਰੇ ਸੋਚ ਰਹੇ ਹੋ, ਤਾਂ ਇਹ ਇਸ ਲਈ ਹੈ ਕਿਉਂਕਿ ਅਸੀਂ ਡਿਫਾਲਟ _id ਦਾ ਇਸਤੇਮਾਲ ਕਰਾਂਗੇ ਜੋ ਕਿ ਮੌਂਗੋ ਦੁਆਰਾ ਬਣਾਇਆ ਜਾਵੇਗਾ.

ਮਗਊਜ਼ ਤੁਹਾਡੇ ਹਰੇਕ ਸਕੀਮਾਂ ਨੂੰ ਇੱਕ _id ਫੀਲਡ ਨੂੰ ਡਿਫਾਲਟ ਰੂਪ ਵਿੱਚ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ ਜੇਕਰ ਕਿਸੇ ਨੂੰ ਸਕੀਮਾ ਕੰਸਟਰਟਰ ਵਿੱਚ ਨਹੀਂ ਭੇਜਿਆ ਗਿਆ ਹੈ. ਨਿਰਧਾਰਤ ਕੀਤੀ ਗਈ ਕਿਸਮ ਮੌਂਗੋ ਡੀ ਬੀ ਦੇ ਮੂਲ ਵਿਵਹਾਰ ਨਾਲ ਮੇਲ ਖਾਂਦੀ ਇੱਕ ਆਬਜੈਕਟ ਆਈਡੀ ਹੈ. ਬਰਾਮਦ ਮੇਲਗੋਜ਼ ਦੀ ਪਹਿਲੀ ਦਲੀਲ ਮਾਡਲ ਉਹ ਸੰਗ੍ਰਹਿ ਦਾ ਨਾਂ ਹੈ ਜੋ ਮੌਂਗੋਡੀਬੀ ਵਿਚ ਡੇਟਾ ਨੂੰ ਸਟੋਰ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਵੇਗਾ.

   ਕਾਂਸਟ ਬੁਕਲਿਸਟ = ਮੋਡੀਊਲ ਨਿਰਯਾਤ = ਮੌਂਗੋਸ. ਮਾਡਲ ('ਬੁਕੇਲਿਸਟ', ਬੁਕਲਿਟਸਚੈਮਾ);    

ਸਕੀਮਾ ਤੋਂ ਇਲਾਵਾ, ਅਸੀਂ ਸਾਡੇ ਸਮਾਲ ਮਾੱਡਲ ਦੇ ਅੰਦਰ ਡੇਟਾਬੇਸ ਸਵਾਲਾਂ ਦੀ ਵੀ ਮੇਜ਼ਬਾਨੀ ਕਰ ਸਕਦੇ ਹਾਂ ਅਤੇ ਇਹਨਾਂ ਨੂੰ ਵਿਧੀਆਂ ਵਜੋਂ ਐਕਸਪੋਰਟ ਕਰ ਸਕਦੇ ਹਾਂ.

   // ਬਟਕੇਲਿਸਟ find    ਸਾਰੀਆਂ ਸੂਚੀਆਂ ਵਾਪਸ ਕਰਦਾ ਹੈਮੋਡੀਊਲ ਬਰਾਮਦ getAllLists = (ਕਾਲਬੈਕ) => {ਬਕਿਟ ਲਿਸਟ. ਲੱਭੋ (ਕਾਲਬੈਕ);}    

ਇੱਥੇ ਅਸੀਂ ਬਾਲਕੇ ਸੂਚੀ ਨੂੰ ਸ਼ਾਮਲ ਕਰਦੇ ਹਾਂ. ਲੱਭੋ ਢੰਗ ਜੋ ਡਾਟਾਬੇਸ ਨੂੰ ਪੁੱਛਦਾ ਹੈ ਅਤੇ ਬੁਕੇਲਿਸਟ ਸੰਗ੍ਰਹਿ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ. ਇੱਕ ਕਾਲਬੈਕ ਫੰਕਸ਼ਨ ਵਰਤੀ ਜਾਣ ਤੋਂ ਬਾਅਦ, ਨਤੀਜਾ ਕਾਲਬੈਕ ਤੇ ਦਿੱਤਾ ਜਾਵੇਗਾ

ਸੈਮਟ ਗੇਟ ਵਿਧੀ ਨਾਲ ਜੁੜੇ ਮਿਡਲਵੇਅਰ ਨੂੰ ਭਰਨ ਲਈ ਇਹ ਦੇਖਣ ਲਈ ਕਿ ਇਹ ਕਿਵੇਂ ਇੱਕਠੇ ਹੋ ਰਿਹਾ ਹੈ.

   const ਬੈਟਲਿਸਟ = ਲੋੜ ('. / ਮਾਡਲ / ਸੂਚੀ');// HTTP ਵਿਧੀ ਨੂੰ / bucketlist ਵਿੱਚ ਪ੍ਰਾਪਤ ਕਰੋਰਾਊਟਰ ਪ੍ਰਾਪਤ ਕਰੋ ('/', (ਰੀਕ, ਰਿਜ) => {ਬਕਿਟ ਲਿਸਟ. getAllLists ((ਇਰੀ, ਸੂਚੀਆਂ) => {ਜੇ (ਗ਼ਲਤੀ ਕਰੋ) {Res json ({ਸਫਲਤਾ: ਝੂਠ, ਸੁਨੇਹਾ: `ਸਾਰੀਆਂ ਸੂਚੀਆਂ ਨੂੰ ਲੋਡ ਕਰਨ ਵਿੱਚ ਅਸਫਲ. ਗਲਤੀ: $ {err}`});}ਹੋਰ {Res ਲਿਖੋ (ਜੇਸਨ. ਸਟੀਵ ({ਸਫਲਤਾ: ਸੱਚੀ, ਸੂਚੀਆਂ: ਸੂਚੀਆਂ}, ਨੱਲੀ, 2));Res ਅੰਤ   ;}});});    

ਅਸੀਂ getAllLists ਵਿਧੀ ਅਪਣਾ ਲਈ ਹੈ ਅਤੇ ਕਾਲਬੈਕ ਦੋ ਆਰਗੂਮਿੰਟ, ਤਰੁਟੀ ਅਤੇ ਨਤੀਜਾ ਲੈਂਦੇ ਹਨ.

ਸੈਮਵਲ ਵਿਚਲੇ ਸਾਰੇ ਕਾਲਬੈਕ ਪੈਟਰਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ: ਕਾਲਬੈਕ (ਗਲਤੀ, ਨਤੀਜਾ). ਜੇ ਕੋਈ ਪੁੱਛਗਿੱਛ ਨੂੰ ਲਾਗੂ ਕਰਦੇ ਹੋਏ ਕੋਈ ਗਲਤੀ ਆਉਂਦੀ ਹੈ, ਤਾਂ ਗਲਤੀ ਪੈਰਾਮੀਟਰ ਵਿੱਚ ਇੱਕ ਗਲਤੀ ਦਸਤਾਵੇਜ਼ ਸ਼ਾਮਲ ਹੋਵੇਗਾ, ਅਤੇ ਨਤੀਜਾ ਬੇਕਾਰ ਹੋਵੇਗਾ. ਜੇਕਰ ਪੁੱਛਗਿੱਛ ਸਫਲ ਹੋ ਜਾਂਦੀ ਹੈ, ਤਾਂ ਗਲਤੀ ਪੈਰਾਮੀਟਰ ਬੇਅਰਲੇ ਹੋ ਜਾਵੇਗਾ, ਅਤੇ ਨਤੀਜਾ ਕਿਊਰੀ ਦੇ ਨਤੀਜਿਆਂ ਨਾਲ ਭਰਿਆ ਜਾਵੇਗਾ.

- ਮੌਗੋ ਡੀ.ਬੀ. ਡੌਕੂਮੈਂਟ

ਸਿਮਟਲ, ਆਉ ਇੱਕ ਨਵ ਸੂਚੀ ਪਾਉਂਣ ਅਤੇ ਸਾਡੇ ਮਾਡਲ ਤੋਂ ਮੌਜੂਦਾ ਸੂਚੀ ਨੂੰ ਮਿਟਾਉਣ ਦੇ ਤਰੀਕਿਆਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰੀਏ.

   // ਨਵੇਂ ਲਿਸਟ ਬਚਾਓ ਦੀ ਵਰਤੋਂ ਮੌਂਗੋਡੀਬੀ ਵਿਚ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਸੰਮਿਲਿਤ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈਮੋਡੀਊਲ ਬਰਾਮਦ addList = (ਨਵਾਂਆਸਟ, ਕਾਲਬੈਕ) => {newList ਸੇਵ (ਕਾਲਬੈਕ);}// ਇੱਥੇ ਸਾਨੂੰ BUcketList ਨੂੰ ਇੱਕ id ਪੈਰਾਮੀਟਰ ਦੇਣ ਦੀ ਲੋੜ ਹੈ ਹਟਾਓਮੋਡੀਊਲ ਬਰਾਮਦ deleteListById = (id, ਕਾਲਬੈਕ) => {ਸਵਾਲ = {_id: id};ਬਕਿਟ ਲਿਸਟ. ਹਟਾਓ (ਕਿਊਰੀ, ਕਾਲਬੈਕ);}    

ਹੁਣ ਸਾਨੂੰ ਆਪਣੇ ਨਿਯੰਤਰਕ ਦੇ ਮਿਡਲਵੇਅਰ ਨੂੰ POST ਦੇ ਲਈ ਅੱਪਡੇਟ ਕਰਨ ਦੀ ਲੋੜ ਹੈ ਅਤੇ ਇਸ ਨੂੰ ਵੀ ਮਿਟਾਓ.

   // ਪੋਸਟ HTTP ਵਿਧੀ ਨੂੰ / bucketlistਰਾਊਟਰ ਪੋਸਟ ('/', (ਰੀਕ, ਰਿਜ, ਅਗਲਾ) => {newList = ਨਵੀਂ ਬੈਲਟਲਿਸਟ ({ਸਿਰਲੇਖ: REQ ਸਰੀਰ. ਸਿਰਲੇਖ,ਵਰਣਨ: REQ ਸਰੀਰ. ਵਰਣਨ,ਸ਼੍ਰੇਣੀ: ਰੇਕ ਸਰੀਰ. ਸ਼੍ਰੇਣੀ});ਬਕਿਟ ਲਿਸਟ. addList (ਨਵੀਆਂ ਸੂਚੀਆਂ, (err, list) => {ਜੇ (ਗ਼ਲਤੀ ਕਰੋ) {Res ਜੇਸਨ ({ਸਫਲਤਾ: ਝੂਠ, ਸੰਦੇਸ਼: 'ਨਵੀਂ ਸੂਚੀ ਬਣਾਉਣ ਵਿੱਚ ਅਸਫਲ. ਗਲਤੀ: $ {err} `});}ਦੂਜਾRes ਜੇਸਨ ({ਸਫਲਤਾ: ਸੱਚੀ, ਸੁਨੇਹਾ: "ਸਫਲਤਾਪੂਰਵਕ ਜੋੜੀ ਗਈ."});});});// DELETE HTTP ਵਿਧੀ ਨੂੰ / bucketlist ਵਿੱਚ. ਇੱਥੇ, ਅਸੀ ਇੱਕ ਪਰਮਰ ਤੇ ਪਾਸ ਕਰਦੇ ਹਾਂ ਜੋ ਕਿ ਇਕਾਈ id ਹੈ. ਰਾਊਟਰ ਮਿਟਾਓ ('/: id', (req, res, next) => {// ਪੈਰਾਮੀਟਰ ਨੂੰ ਐਕਸੈਸ ਕਰੋ ਜਿਹੜਾ ਕਿ ਡਿਲੀਟ ਕਰਨ ਵਾਲੀ ਆਈਟਮ ਦਾ id ਹੈid = req ਦਿਉ ਪੈਰਾਮਾ id;// ਮਾਡਲ ਵਿਧੀ deleteListById ਨੂੰ ਕਾਲ ਕਰੋਬਕਿਟ ਲਿਸਟ. deleteListById (id, (err, list) => {ਜੇ (ਗ਼ਲਤੀ ਕਰੋ) {Res ਜੇਸਨ ({ਸਫਲਤਾ: ਝੂਠ, ਸੁਨੇਹਾ: `ਸੂਚੀ ਮਿਟਾਉਣ ਵਿੱਚ ਅਸਫਲ. ਗਲਤੀ: $ {err}`});}ਦੂਸਰਾ ਜੇ (ਸੂਚੀ) {Res ਜੇਸਨ ({ਸਫਲਤਾ: ਸੱਚੀ, ਸੁਨੇਹਾ: "ਸਫਲਤਾਪੂਰਵਕ ਹਟਾਇਆ ਗਿਆ"});}ਦੂਜਾRes ਜੇਸਨ ({ਸਫਲਤਾ: ਗਲਤ});})});    

ਇਸ ਦੇ ਨਾਲ, ਸਾਡੇ ਕੋਲ ਇੱਕ ਵਰਕਿੰਗ ਸਰਵਰ API ਹੈ ਜੋ ਸਾਨੂੰ ਬਾਤ ਸੂਚੀ ਬਣਾਉਣ, ਵੇਖਣ ਅਤੇ ਮਿਟਾਉਣ ਦਿੰਦਾ ਹੈ. ਤੁਸੀਂ ਪੁਸ਼ਟੀ ਕਰ ਸਕਦੇ ਹੋ ਕਿ ਹਰ ਚੀਜ਼ ਪੋਸਟਮੈਨ ਦੀ ਵਰਤੋਂ ਦੇ ਮਕਸਦ ਤੇ ਕੰਮ ਕਰ ਰਹੀ ਹੈ.

ਮੀਨ ਸਟੈਕ: ਕੋਨੀਅਰ 2+ ਅਤੇ ਕੋਨੀਅਰ CLI ਨਾਲ ਇੱਕ ਐਪ ਬਣਾਓMEAN ਸਟੈਕ: ਕੋਨੀਅਰ 2+ ਅਤੇ ਕੋਨੀਅਰ ਕਲੀਰਲਾਈਟਡ ਵਿਸ਼ਿਆਂ ਨਾਲ ਇੱਕ ਐਪ ਬਣਾਓ:
ReactnpmAjaxTools ਅਤੇ ਸਮਾਲਟ

ਹੁਣ ਅਸੀਂ ਕੋਨੁਲਰ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਅਰਜ਼ੀ ਦੇ ਅਗਲੇ ਪਾਸੇ ਜਾਵਾਂਗੇ. ਅਸੀਂ ਇਸਦਾ ਨਾਮ ਕੋਨੀਅਰ- src ਦੇ ਨਾਂ ਦੇਵਾਂਗੇ ਅਤੇ ਇਸਨੂੰ ਸ਼ਾਨਦਾਰ-ਬਾਲਟਿਲਿਸਟ ਡਾਇਰੈਕਟਰੀ ਦੇ ਅਧੀਨ ਰੱਖਾਂਗੇ.

     ਨਗਨ ਕੋਨਾਰ- src    

ਸਾਡੇ ਕੋਲ ਸਾਡੇ ਸ਼ਾਨਦਾਰ-ਬਾਲਟੀਲਿਸਟ ਡਾਇਰੈਕਟਰੀ ਦੇ ਅੰਦਰ ਪੂਰੇ ਕੋਨੀਅਰ 2 ਸਟ੍ਰੈੱਸ਼ਰ ਹਨ. ਸਿਰ ਉੱਤੇ ਅੱਗੇ. ਕੋਣੀ json ਅਤੇ 'outdir' ਨੂੰ ਬਦਲ ਕੇ ". / ਜਨਤਕ ".

ਅਗਲੀ ਵਾਰ ਜਦੋਂ ਤੁਸੀਂ ਐਂਜ ਬਿਲ ਚਲਾਓਗੇ- ਅਸੀਂ ਇਸ ਟਿਊਟੋਰਿਅਲ ਦੇ ਅੰਤ ਵਿਚ ਕੀ ਕਰਾਂਗੇ - ਕੋਨੀਅਰ ਸਾਡੇ ਸਾਰੇ ਫਰੰਟ ਐਂਡ ਕੰਪਾਇਲ ਕਰੇਗਾ ਅਤੇ ਇਸ ਨੂੰ ਜਨਤਕ ਡਾਇਰੈਕਟਰੀ ਵਿਚ ਰੱਖੇਗਾ. ਇਸ ਤਰ੍ਹਾਂ, ਤੁਹਾਡੇ ਕੋਲ ਐਕਸਪ੍ਰੈਸ ਸਰਵਰ ਅਤੇ ਉਸੇ ਬੰਦਰਗਾਹ ਤੇ ਚੱਲ ਰਹੇ ਮੋਰੀ ਦੇ ਅੰਤ ਹੋਣਗੇ.

ਪਰ ਪਲ ਲਈ, ਐਨਜੀ ਸਰਵਿਸ ਉਹ ਹੈ ਜਿਸਦੀ ਸਾਨੂੰ ਲੋੜ ਹੈ. ਤੁਸੀਂ http: // localhost: 4200 ਤੇ ਬੋਇਲਰਪਲੇਟ ਕੋਨੇਰ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਚੈੱਕ ਕਰ ਸਕਦੇ ਹੋ.

ਸਾਡੇ ਕੋਨੀਅਰ ਐਪਲੀਕੇਸ਼ਨ ਦਾ ਡਾਇਰੈਕਟਰੀ ਢਾਂਚਾ ਸਾਡੇ ਸਰਵਰ ਦੀ ਡਾਇਰੈਕਟਰੀ ਢਾਂਚੇ ਨਾਲੋਂ ਕੁਝ ਜ਼ਿਆਦਾ ਗੁੰਝਲਦਾਰ ਜਾਪਦਾ ਹੈ. ਹਾਲਾਂਕਿ, 90% ਸਮਾਂ ਅਸੀਂ src / app / ਡਾਇਰੈਕਟਰੀ ਦੇ ਅੰਦਰ ਕੰਮ ਕਰਾਂਗੇ. ਇਹ ਸਾਡੀ ਕੰਮ ਥਾਂ ਹੋਵੇਗੀ, ਅਤੇ ਸਾਡੇ ਸਾਰੇ ਭਾਗ, ਮਾਡਲ ਅਤੇ ਸੇਵਾਵਾਂ ਇਸ ਡਾਇਰੈਕਟਰੀ ਦੇ ਅੰਦਰ ਰੱਖੇ ਜਾਣਗੇ. ਆਓ ਇਹ ਵੇਖੀਏ ਕਿ ਇਸ ਟਿਊਟੋਰਿਯਲ ਦੇ ਅੰਤ ਵਿੱਚ ਕਿਵੇਂ ਸਾਡਾ ਫਰੰਟ ਐਂਡ ਬਣ ਜਾਵੇਗਾ.

ਮੀਨ ਸਟੈਕ: ਕੋਨੀਅਰ 2+ ਅਤੇ ਕੋਨੀਅਰ CLI ਨਾਲ ਇੱਕ ਐਪ ਬਣਾਓMEAN ਸਟੈਕ: ਕੋਨੀਅਰ 2+ ਅਤੇ ਕੋਨੀਅਰ ਕਲੀਰਲਾਈਟਡ ਵਿਸ਼ਿਆਂ ਨਾਲ ਇੱਕ ਐਪ ਬਣਾਓ:
ReactnpmAjaxTools ਅਤੇ ਸਮਾਲਟ

ਕੰਪੋਨੈਂਟਸ, ਮਾਡਲ ਅਤੇ ਸਰਵਿਸ

ਬਣਾਉਣਾ

ਆਉ ਅਸੀਂ ਆਪਣਾ ਸਾਮਟਾਲ ਐਪਲੀਕੇਸ਼ਨ ਕੋਡਿੰਗ ਕਰਨ ਲਈ ਇੱਕ ਕਦਮ-ਦਰ-ਕਦਮ ਪਹੁੰਚ ਕਰੀਏ. ਸਾਨੂੰ ਇਹ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ:

  1. ਕਹਿੰਦੇ ਹਨ ਦੋ ਨਵੇਂ ਭਾਗ ਬਣਾਓ ViewListComponent ਅਤੇ AddListComponent
  2. ਸਾਡੀ ਸੂਚੀ ਲਈ ਇੱਕ ਮਾਡਲ ਬਣਾਉ, ਜੋ ਸਾਡੇ ਕੰਪੋਨੈਂਟਸ ਅਤੇ ਸੇਵਾਵਾਂ
  3. ਵਿੱਚ ਆਯਾਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ
  4. ਅਜਿਹੀ ਸੇਵਾ ਤਿਆਰ ਕਰਦੀ ਹੈ ਜੋ ਸਾਰੇ HTTP ਬੇਨਤੀਆਂ ਨੂੰ ਸਰਵਰ
  5. ਸਾਡੇ ਕੰਪੋਨੈਂਟਸ, ਸੇਵਾ ਅਤੇ ਹੋਰ ਮੌਡਿਊਲ ਜੋ ਇਸ ਐਪਲੀਕੇਸ਼ਨ ਲਈ ਜ਼ਰੂਰੀ ਹੋ ਸਕਦੀਆਂ ਹਨ AppModule ਨੂੰ ਅਪਡੇਟ ਕਰਦੇ ਹਨ.

ਤੁਸੀਂ ਨੰਬਰਾਂ ਬਣਾਉਣ ਵਾਲੇ ਭਾਗ ਕਮਾਂਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਭਾਗ ਬਣਾ ਸਕਦੇ ਹੋ.

     ਐਨਜੀ ਪੀ ਐੱਡ ਐਲਿਸਟng ਉਤਰਾਅ ViewList    

ਤੁਹਾਨੂੰ ਹੁਣ src / app ਫੋਲਡਰ ਦੇ ਹੇਠਾਂ ਦੋ ਨਵੀਆਂ ਡਾਇਰੈਕਟਰੀਆਂ ਵੇਖਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ, ਸਾਡੇ ਨਵੇਂ ਬਣਾਏ ਗਏ ਭਾਗਾਂ ਲਈ ਇੱਕ ਇੱਕ. ਅੱਗੇ, ਸਾਨੂੰ ਸੂਚੀ ਲਈ ਇੱਕ ਸੇਵਾ ਤਿਆਰ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ.

     ਐਂਜੀ ਜੀਜ ਸਰਵਿਸ ਲਿਸਟ ਬਣਾਉਂਦੇ ਹਨ    

ਮੈਂ ਆਪਣੀਆਂ ਸੇਵਾਵਾਂ ਨਵੀਂ ਡਾਇਰੈਕਟਰੀ ਦੇ ਅੰਦਰ ਰੱਖਣਾ ਚਾਹੁੰਦਾ ਹਾਂ (ਅੰਦਰ src / app / ).

     mkdir ਸੇਵਾਵਾਂmv ਸੂਚੀ ਸੇਵਾ ts ਸੇਵਾਵਾਂ /    

ਕਿਉਂਕਿ ਅਸੀਂ ਸੂਚੀ ਦੀ ਸਥਿਤੀ ਬਦਲ ਲਈ ਹੈ. ਸੇਵਾ ts , ਸਾਨੂੰ ਇਸ ਨੂੰ AppModule ਵਿੱਚ ਅਪਡੇਟ ਕਰਨ ਦੀ ਲੋੜ ਹੈ. ਸੰਖੇਪ ਰੂਪ ਵਿੱਚ, AppModule ਉਹ ਸਥਾਨ ਹੈ ਜਿੱਥੇ ਅਸੀਂ ਆਪਣੇ ਸਾਰੇ ਭਾਗ, ਸੇਵਾਵਾਂ, ਅਤੇ ਹੋਰ ਮੌਡਿਊਲ ਘੋਸ਼ਣਾ ਕਰਾਂਗੇ.

ਜਨਮਾਂਕ ਕਮਾਂਟ ਨੇ ਪਹਿਲਾਂ ਹੀ ਸਾਡੇ ਹਿੱਸੇ ਨੂੰ ਐਪੀਐਮਡੀਡੀਯੂ ਵਿਚ ਜੋੜ ਦਿੱਤਾ ਹੈ. ਅੱਗੇ ਜਾਓ ਅਤੇ ਆਯਾਤ ਕਰੋ ਸੂਚੀ ਸੇਵਾ ਅਤੇ ਇਸ ਨੂੰ ਪ੍ਰਦਾਤਾਵਾਂ ਐਰੇ ਵਿੱਚ ਜੋੜੋ. ਸਾਨੂੰ ਫਾਰਮ ਮੈਡਿਊਲ ਅਤੇ HTTPModule ਨੂੰ ਆਯਾਤ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ ਅਤੇ ਉਨ੍ਹਾਂ ਨੂੰ ਆਯਾਤ ਦੇ ਰੂਪ ਵਿੱਚ ਐਲਾਨ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ. ਸਾਡੀ ਅਰਜ਼ੀ ਲਈ ਫਾਰਮ ਬਣਾਉਣ ਲਈ ਫਾਰਮਸ ਮੈਡੀਊਲ ਦੀ ਲੋੜ ਹੈ ਅਤੇ HTTPModule ਸਰਵਰ ਨੂੰ HTTP ਬੇਨਤੀਆਂ ਭੇਜਣ ਲਈ.

   'ਇਲੈਕਟ੍ਰੌਨਿਕ ਬ੍ਰਾਉਜ਼ਰ' ਤੋਂ 'ਬ੍ਰਾਉਜ਼ਰ';'@ ਕੋਨੀਅਰ / ਕੋਰ' ਤੋਂ ਆਯਾਤ {NgModule};ਇੰਪੋਰਟ {HttpModule} '@ ਕੋਨੀਅਰ / http' ਤੋਂ;'@ ਕੋਨੀਅਰ / ਫਾਰਮ' ਤੋਂ ਆਯਾਤ ਕਰੋ {ਫਾਰਮਸ ਮੈਡੀਊਲ};import {AppComponent} ਤੋਂ '. / ਐਪ ਭਾਗ ';ਇੰਪੋਰਟ ਕਰੋ {AddListComponent} 'ਤੋਂ. / ਐਡ-ਲਿਸਟ / ਐਡ-ਲਿਸਟ ਭਾਗ ';ਇੰਪੋਰਟ ਕਰੋ {ViewListComponent} 'ਤੋਂ. / ਵਿਊ-ਲਿਸਟ / ਵਿਊ-ਲਿਸਟ ਭਾਗ ';import {ListService} ਤੋਂ '. / ਸੇਵਾਵਾਂ / ਸੂਚੀ. ਕੰਪੋਨੈਂਟ ਇਕ ਕੋਨਾਰੂਅਲ 2 ਐਪਲੀਕੇਸ਼ਨ ਦੇ ਬਿਲਡਿੰਗ ਬਲਾਕ ਹਨ.    AppComponent    ਕੋਨਾਰੀਰ ਦੁਆਰਾ ਬਣਾਇਆ ਮੂਲ ਕੰਪੋਨੈਂਟ ਹੈ. ਹਰ ਇਕ ਹਿੱਸੇ ਵਿਚ ਇਹ ਚੀਜ਼ਾਂ ਸ਼ਾਮਿਲ ਹਨ:  

  • ਇੱਕ ਟਾਈਪਸਕ੍ਰਿਪ ਕਲਾਸ ਜਿਸ ਵਿੱਚ ਕੰਪੋਨੈਂਟ ਲਾਜ਼ਿਕ
  • ਇੱਕ HTML ਫਾਈਲ ਅਤੇ ਇੱਕ ਸਟਾਈਲਸ਼ੀਟ ਜੋ ਕੰਪੋਨੈਂਟ UI
  • ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ
  • ਇੱਕ @ ਕੰਪੋਨੈਂਟ ਡੈਕੋਰੇਟਰ, ਜੋ ਕਿ ਕੰਪੋਨੈਂਟ ਦੇ ਮੈਟਾਡੇਟਾ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ.

ਅਸੀ ਆਪਣੇ AppComponent ਨੂੰ ਜ਼ਿਆਦਾਤਰ ਹਿੱਸੇ ਲਈ ਅਣਛੇਦ ਰੱਖਾਂਗੇ. ਇਸਦੇ ਬਜਾਏ, ਅਸੀਂ ਆਪਣੇ ਨਵੇਂ ਬਣਾਏ ਗਏ ਭਾਗਾਂ, ਐਡ ਐਲਿਸਟ ਅਤੇ ਵਿਯੂਅਲਿਸਟ ਦਾ ਇਸਤੇਮਾਲ ਕਰਾਂਗੇ, ਜੋ ਸਾਡੇ ਤਰਕ ਨੂੰ ਬਣਾਉਣ ਲਈ ਹੈ. ਅਸੀਂ ਉਨ੍ਹਾਂ AppComponent ਦੇ ਅੰਦਰ ਉਨ੍ਹਾਂ ਦੇ ਅੰਦਰ ਘੇਰਾ ਪਾਵਾਂਗੇ ਜਿਵੇਂ ਕਿ ਤਸਵੀਰ ਵਿਚ ਦਰਸਾਇਆ ਗਿਆ ਹੈ.

ਮੀਨ ਸਟੈਕ: ਕੋਨੀਅਰ 2+ ਅਤੇ ਕੋਨੀਅਰ CLI ਨਾਲ ਇੱਕ ਐਪ ਬਣਾਓMEAN ਸਟੈਕ: ਕੋਨੀਅਰ 2+ ਅਤੇ ਕੋਨੀਅਰ ਕਲੀਰਲਾਈਟਡ ਵਿਸ਼ਿਆਂ ਨਾਲ ਇੱਕ ਐਪ ਬਣਾਓ:
ReactnpmAjaxTools ਅਤੇ ਸਮਾਲਟ

ਹੁਣ ਸਾਡੇ ਕੋਲ ਕੰਪੋਨੈਂਟਸ ਦੀ ਦਰਜਾਬੰਦੀ ਹੈ- AppComponent ਸਿਖਰ 'ਤੇ, ਉਸ ਤੋਂ ਬਾਅਦ ਵਿਊਅਲਿਸਟ ਕੰਨਪੇਂਨਟ ਅਤੇ ਫਿਰ ਐਡ ਐਲਿਸਟ ਕਮਯੂਨੈਂਟ .

     / * ਐਪ ਭਾਗ html * /

{{ਸਿਰਲੇਖ}}!<ਐਪ-ਵਿਊ-ਲਿਸਟ>

     / * ਵਿਊ-ਲਿਸਟ ਭਾਗ html * /       

ਨਾਮ ਦੀ ਇੱਕ ਫਾਇਲ ਬਣਾਓ ਸੂਚੀ. ts ਮਾਡਲ ਡਾਇਰੈਕਟਰੀ ਦੇ ਤਹਿਤ. ਇਹ ਉਹ ਥਾਂ ਹੈ ਜਿੱਥੇ ਅਸੀਂ ਆਪਣੇ ਸੂਚੀ ਲਈ ਮਾਡਲ ਨੂੰ ਸਟੋਰ ਕਰਾਂਗੇ.

   / * ਸੂਚੀ ts * /ਨਿਰਯਾਤ ਇੰਟਰਫੇਸ ਸੂਚੀ {_id ?: ਸਤਰ;ਸਿਰਲੇਖ: ਸਤਰ;ਵਰਣਨ: ਸਤਰ;ਸ਼੍ਰੇਣੀ: ਸਤਰ;}    

ਵੇਖੋ-ਸੂਚੀ ਕੰਪੋਨੈਂਟ

ਵਿਊਅਲਿਸਟ ਕੰਟੈਂਟ 'ਕੰਪੋਨੈਂਟ ਦੇ ਤਰਕ ਵਿੱਚ ਸ਼ਾਮਲ ਹਨ:

  1. ਸੂਚੀਆਂ ਸੰਪੱਤੀ ਜੋ ਕਿ ਸੂਚੀ ਦੀ ਇੱਕ ਲੜੀ ਹੈ. ਇਹ ਸਰਵਰ ਤੋਂ ਲਏ ਸੂਚੀਆਂ ਦੀ ਇੱਕ ਕਾਪੀ ਰੱਖਦਾ ਹੈ ਕੋਨੀਅਰ ਦੀਆਂ ਬਾਈਡਿੰਗ ਤਕਨੀਕਜ਼ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ, ਕੰਪੋਨੈਂਟ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਟੈਪਲੇਟ ਦੇ ਅੰਦਰ ਪਹੁੰਚਯੋਗ ਹੁੰਦੀਆਂ ਹਨ.
  2. loadLists ਸਰਵਰ ਤੋਂ ਸਾਰੀਆਂ ਸੂਚੀਆਂ ਨੂੰ ਲੋਡ ਕਰਦਾ ਹੈ ਇੱਥੇ, ਅਸੀਂ ਇਸਨੂੰ ਬੁਲਾਉਂਦੇ ਹਾਂ ਲਿਸਟਸਵ GetAllLists ਵਿਧੀ ਅਤੇ ਇਸ ਨੂੰ ਕਰਨ ਲਈ subscribe . getAllLists ਇੱਕ ਸੇਵਾ ਢੰਗ ਹੈ (ਅਸੀਂ ਇਸਨੂੰ ਅਜੇ ਪ੍ਰਭਾਸ਼ਿਤ ਨਹੀਂ ਕੀਤਾ ਹੈ) ਜੋ ਕਿ ਅਸਲ http ਪ੍ਰਾਪਤ ਕਰੋ ਬੇਨਤੀ ਅਤੇ ਸੂਚੀ ਵਾਪਸ ਕਰਦਾ ਹੈ; loadLists ਫਿਰ ਕੰਪੋਨੈਂਟ ਦੀ ਸੂਚੀ ਵਿਸ਼ੇਸ਼ਤਾ ਵਿੱਚ ਲੋਡ ਕਰਦਾ ਹੈ.
  3. ਮਿਟਾਓਲਿਸਟ (ਸੂਚੀ) ਮਿਟਾਉਣ ਦੀ ਪ੍ਰਕਿਰਿਆ ਦਾ ਪ੍ਰਬੰਧ ਕਰਦਾ ਹੈ ਜਦੋਂ ਉਪਭੋਗਤਾ ਮਿਟਾਓ ਬਟਨ ਤੇ ਕਲਿਕ ਕਰਦਾ ਹੈ. ਅਸੀਂ ਲਿਸਟ ਸੇਵਾ ਦੀ ਮਿਟਾਓਲਿਸਟ ਵਿਧੀ ਨਾਲ id ਨੂੰ ਦਲੀਲ ਦੇ ਤੌਰ ਤੇ ਕਾਲ ਕਰਾਂਗੇ. ਜਦੋਂ ਸਰਵਰ ਜਵਾਬ ਦਿੰਦਾ ਹੈ ਕਿ ਮਿਟਾਉਣਾ ਸਫ਼ਲ ਰਿਹਾ ਹੈ, ਤਾਂ ਅਸੀਂ ਲੋਡ ਸੂਚੀ ਵਿਧੀ ਨੂੰ ਸਾਡੇ ਦ੍ਰਿਸ਼ ਨੂੰ ਅਪਡੇਟ ਕਰਨ ਲਈ ਕਹਿੰਦੇ ਹਾਂ.
   / * ਵਿਊ-ਲਿਸਟ ਭਾਗ ts * /ਇੰਪੋਰਟ ਕਰੋ {ਕੰਪੋਨੈਂਟ, ਓਨਇਨਿਟ} 'ਕੋਨੀਰ / ਕੋਰ' ਤੋਂ;import {ListService} ਤੋਂ '. / ਸੇਵਾਵਾਂ / ਸੂਚੀ ਸੇਵਾ ';ਇੰਪੋਰਟ ਕਰੋ {ਸੂਚੀ} ਤੋਂ '. / ਮਾਡਲ / ਸੂਚੀ '@ ਕੰਪੋਨੈਂਟ ({ਚੋਣਕਾਰ: 'ਐਪ-ਵਿਊ-ਲਿਸਟ',templateUrl: '. / ਦ੍ਰਿਸ਼-ਸੂਚੀ ਭਾਗ html ',styleUrls: ['. / ਦ੍ਰਿਸ਼-ਸੂਚੀ ਭਾਗ css ']})ਨਿਰਯਾਤ ਕਲਾਸ ViewListComponent ਔਨਿਏਮੈਂਟ ਔਨਇੰਟ {// ਲਿਸਟ ਪ੍ਰਪੋਟਾਈ, ਜੋ ਸੂਚੀ ਦੀ ਕਿਸਮ ਦੀ ਲੜੀ ਹੈਪ੍ਰਾਈਵੇਟ ਸੂਚੀਆਂ: ਸੂਚੀ [] = [];ਕੰਸਟਰਕਟਰ (ਪ੍ਰਾਈਵੇਟ ਲਿਸਟਸਰਵਰ: ਲਿਸਟਸਿਸ) {}ngOnInit    {// init ਤੇ ਸਭ ਸੂਚੀ ਲੋਡ ਕਰੋਇਹ. loadLists   ;}ਪਬਲਿਕ ਲੋਡ ਸੂਚੀ    {// ਸਰਵਰ ਦੀਆਂ ਸਾਰੀਆਂ ਸੂਚੀਆਂ ਪ੍ਰਾਪਤ ਕਰੋ ਅਤੇ ਸੂਚੀਆਂ ਦੀ ਜਾਇਦਾਦ ਨੂੰ ਅਪਡੇਟ ਕਰੋਇਹ. listServ getAllLists    ਮੈਂਬਰ ਬਣੋਜਵਾਬ => ਇਹ. ਸੂਚੀਆਂ = ਜਵਾਬ,)}// ਮਿਟਾਓਲਿਸਟ ਮਿਟਾਏ ਗਏ ਸੂਚੀ ਨੂੰ ਇਹਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਫਿਲਟਰ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੈ. ਫਿਲਟਰ ਢੰਗਜਨਤਕ ਹਟਾਉਣ ਲਿਸਟ (ਸੂਚੀ: ਸੂਚੀ) {ਇਹ. listServ deleteList (ਸੂਚੀ. _id). ਮੈਂਬਰ ਬਣੋਜਵਾਬ => ਇਹ. ਸੂਚੀ = ਇਹ. ਸੂਚੀਆਂ ਫਿਲਟਰ (ਸੂਚੀਆਂ => ਸੂਚੀਆਂ! == ਸੂਚੀ),)}}    

ਟੈਪਲੇਟ ( ਵਿਊ-ਲਿਸਟ. ਸ਼੍ਰੇਣੀ}} {{ਸੂਚੀ. ਟਾਈਟਲ}} {{ਸੂਚੀ. ਵਰਣਨ}} <ਬਟਨ ਟਾਈਪ = "ਬਟਨ" (ਕਲਿੱਕ ਕਰੋ) = "ਮਿਟਾਓਲਿਸਟ (ਸੂਚੀ); $ ਇਵੈਂਟ. stopPropagation ;"> ਮਿਟਾਓ

ਅਸੀਂ ਆਪਣੀਆਂ ਸੂਚੀਆਂ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਸਾਰਣੀ ਤਿਆਰ ਕੀਤੀ ਹੈ. ਸਟੈਂਡਰਡ HTML ਦਾ ਕੋਈ ਹਿੱਸਾ ਨਹੀਂ ਹੈ, ਇੱਥੇ ਇੱਕ ਅਸਧਾਰਨ ਕੋਡ ਹੈ ਸ਼ਮਲਾਟ ਵਿੱਚ ਇੱਕ ਅਮੀਰ ਟੈਪਲੇਟ ਸਿੰਟੈਕਸ ਹੁੰਦਾ ਹੈ ਜੋ ਤੁਹਾਡੀ ਹੋਰ ਸਾਧਾਰਣ HTML ਫਾਈਲਾਂ ਵਿੱਚ ਥੋੜਾ ਚਿੜਦਾ ਹੈ. ਹੇਠਾਂ ਸਾਮਾਲਟ ਟੈਪਲੇਟ ਸੰਟੈਕਸ ਦਾ ਹਿੱਸਾ ਹੈ.

  • * ngFor ਡਾਇਰੈਕਟਿਵ ਤੁਹਾਨੂੰ ਸੂਚੀ ਸੰਪਤੀ ਦੇ ਮਾਧਿਅਮ ਤੋਂ ਲੂਪ ਦੀ ਸਹੂਲਤ ਦਿੰਦਾ ਹੈ.
  • ਇੱਥੇ ਸੂਚੀ ਇੱਕ ਟੈਂਪਲੇਟ ਵੇਰੀਬਲ ਹੈ ਜਦਕਿ ਸੂਚੀਆਂ ਕੰਪੋਨੈਂਟ ਪ੍ਰਾਪਰਟੀ ਹਨ.
  • ਫਿਰ ਅਸੀਂ ਸਾਡੇ ਟੈਪਲੇਟ ਨਾਲ ਕੰਪੋਨੈਂਟ ਦੀ ਜਾਇਦਾਦ ਨੂੰ ਜੋੜਨ ਲਈ ਕੋਨੁਲਰ ਦੇ ਇੰਟਰਪੋਲੇਸ਼ਨ ਸੈਂਟੈਕਸ {{}} ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਹੈ.
  • ਈਵੈਂਟ ਬਾਈਡਿੰਗ ਸਿੰਟੈਕਸ ਨੂੰ ਡਿਲੀਲੇਟ ਵਿਧੀ ਨਾਲ ਕਲਿਕ ਇਵੈਂਟ ਨੂੰ ਜੋੜਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ.

ਅਸੀਂ ਕੰਮ ਕਰਨ ਵਾਲੀ ਬਾਲਟ ਸੂਚੀ ਐਪਲੀਕੇਸ਼ਨ ਦੇ ਨੇੜੇ ਹਾਂ. ਵਰਤਮਾਨ ਵਿੱਚ, ਸਾਡੀ ਸੂਚੀ ਵਿੱਚ. ਸੇਵਾ ts ਖਾਲੀ ਹੈ ਅਤੇ ਸਾਨੂੰ ਇਸ ਨੂੰ ਭਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ ਤਾਂ ਕਿ ਸਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਦਾ ਕੰਮ ਪੂਰਾ ਕੀਤਾ ਜਾ ਸਕੇ. ਜਿਵੇਂ ਪਹਿਲਾਂ ਹਾਈਲਾਈਟ ਕੀਤਾ ਗਿਆ, ਸੇਵਾਵਾਂ ਵਿੱਚ ਉਹ ਢੰਗ ਹਨ ਜੋ ਸਰਵਰ ਨਾਲ ਸੰਚਾਰ ਕਰਦੇ ਹਨ.

   / * ਸੂਚੀ ਸੇਵਾ ts * /'@ ਕੋਨੀਅਰ / ਕੋਰ' ਤੋਂ ਆਯਾਤ {ਇੰਜੈਕਟੇਬਲ};ਇੰਪੋਰਟ ਕਰੋ {Http, Headers} '@ ਕੋਨੀਅਰ / http' ਤੋਂ;'rxjs / observable' ਤੋਂ ਆਯਾਤ {Observable};ਇੰਪੋਰਟ ਕਰੋ {ਸੂਚੀ} ਤੋਂ '. / ਮਾਡਲ / ਸੂਚੀ 'ਇੰਪੋਰਟ 'rxjs / ਜੋੜ / ਓਪਰੇਟਰ / ਨਕਸ਼ਾ';@ ਇੰਜੈਕਟੇਬਲ   ਨਿਰਯਾਤ ਸ਼੍ਰੇਣੀ ਸੂਚੀ ਸੇਵਾ {ਕੰਸਟ੍ਰੈਕਟਰ (ਪ੍ਰਾਈਵੇਟ http: Http) {}ਪ੍ਰਾਈਵੇਟ ਸਰਵਰ ਐਪੀ = 'http: // ਲੋਕਲਹੋਸਟ: 3000';public getAllLists   : ਅਬਜ਼ਰਵੇਬਲ <ਸੂਚੀ []> {URI = `$ {this serverApi} / bucketlist / `;ਇਸ ਨੂੰ ਵਾਪਸ ਕਰੋ http. ਪ੍ਰਾਪਤ ਕਰੋ (URI) ਮੈਪ (ਰੇਜ਼ => ਰਿਜਸਟਰਾ. json   ). ਮੈਪ (ਰੇਜ਼ => <ਸੂਚੀ []> ਰਿਜ਼ਰਵ ਸੂਚੀਆਂ);}ਜਨਤਕ ਹਟਾਉਣ ਲਿਸਟ (ਸੂਚੀ: ਸਤਰ) {URI = `$ {this serverApi} / bucketlist / $ {listId} `;ਹੈਡਰ = ਨਵੇਂ ਸਿਰਲੇਖ;ਸਿਰਲੇਖ ਜੋੜ ('ਸਮੱਗਰੀ-ਕਿਸਮ', 'ਐਪਲੀਕੇਸ                                                           

March 1, 2018