Setting up Angular phonecat application on node - javascript

Im newbie to Angular and trying to setup angular phonecat application.
I have downloaded the code from here
https://docs.angularjs.org/tutorial/
and installed a nodejs.
Now, I'm not sure how to map the angular application to run with nodejs.
From other links, I see everyone run a webserver.js file but I don't see anything under the scripts directory.
scripts]$ tree .
.
├── private
│   ├── old
│   │   ├── format-json.sh
│   │   ├── goto_step.bat
│   │   ├── goto_step.sh
│   │   ├── README.md
│   │   ├── ScrapeData.js
│   │   └── snapshot.sh
│   ├── push-to-github.sh
│   ├── README.md
│   ├── retag.sh
│   ├── test-all.sh
│   └── update-gh-pages.sh
└── update-repo.sh
How can I run the application in nodejs.

If you look at the page you linked, you are supposed to run npm start in the main directory after installing NPM dependencies with npm install.
EDIT: After checking their package.json, you can actually just run npm start. It will also run dependency installation.

Related

Spring boot does not serve assets in resources folder when started with IntelliJ

I am doing pretty much this tutorial. Basically you have a pom which controls two modules, the frontend module and the backend module.
Environment: IDE: Intellij, spring-boot, Vue.js
I initialized the frontent module using vue init webpack frontend. I added the pom to the backend module which copies the assets into the backend module asset/public folder. After mvn clean install all the content is in the ressources/public folder, but when I view the browsers sources it does not show any of them.
The resources folder looks like this:
└── resources
├── application.properties
└── public
├── index.html
└── static
├── css
│   ├── app.30790115300ab27614ce176899523b62.css
│   └── app.30790115300ab27614ce176899523b62.css.map
└── js
├── app.b22ce679862c47a75225.js
├── app.b22ce679862c47a75225.js.map
├── manifest.2ae2e69a05c33dfc65f8.js
├── manifest.2ae2e69a05c33dfc65f8.js.map
├── vendor.42fc6c515ccdfe89bd76.js
└── vendor.42fc6c515ccdfe89bd76.js.map
I just noticed that running java -jar backend/target/backend-0.0.1-SNAPSHOT.jar solves the problem. But when I start the application using intellij it does not work out.
Full tree (directories only):
├── fileconverter
│   ├── backend
│   │   ├── src
│   │   └── target
│   ├── frontend
│   │   ├── build
│   │   ├── config
│   │   ├── node
│   │   ├── node_modules
│   │   ├── src
│   │   ├── static
│   │   ├── target
│   │   └── test
│   └── target
│   ├── classes
│   └── test-classes
Okay, as I am having two modules IntelliJ used the classpath of the whole project instead of the backend module.
After changing the path in the configuration to: Use classpath of module: backend everything works fine.

How and when are the esm5 and esm2015 directories of a "ng build"-generated lib folder used?

In the folder generated by ng build simple-lib, I see a more complex structure than my other node modules. Instead of an index.js exporting and importing other members, I see a bundles, esm2015, esm5, and public_api.d.ts.
I see the compiled versions of simple-lib in both the esm5 and esm2015 folders. I'm wondering how the esm .js files are used and when esm2015 would be used instead of esm5. From what I understand, esm2015 allows for smaller bundles and tree-shaking, but I'm not sure when the choice is made about which module to use. I'm hoping to generate a lib that I can use in a node project and any help to understand if and how that would be possible would be appreciated. Thanks.
$ tree simple-lib/
simple-lib/
├── bundles
│   ├── simple-lib.umd.js
│   ├── simple-lib.umd.js.map
│   ├── simple-lib.umd.min.js
│   └── simple-lib.umd.min.js.map
├── esm2015
│   ├── lib
│   │   ├── simple-lib.component.js
│   │   ├── simple-lib.module.js
│   │   └── simple-lib.service.js
│   ├── public_api.js
│   └── simple-lib.js
├── esm5
│   ├── lib
│   │   ├── simple-lib.component.js
│   │   ├── simple-lib.module.js
│   │   └── simple-lib.service.js
│   ├── public_api.js
│   └── simple-lib.js
├── fesm2015
│   ├── simple-lib.js
│   └── simple-lib.js.map
├── fesm5
│   ├── simple-lib.js
│   └── simple-lib.js.map
├── lib
│   ├── simple-lib.component.d.ts
│   ├── simple-lib.module.d.ts
│   └── simple-lib.service.d.ts
├── package.json
├── public_api.d.ts
├── simple-lib.d.ts
└── simple-lib.metadata.json
While updating my angular version, I think I may have found the answer. The library that will be used is dependent on the browser requesting the application - The esm5 build will be used for older browsers that require more polyfills and the esm2015 libraries will be used for newer browsers that require fewer polyfills
"The CLI's build command now automatically creates a modern ES2015 build with minimal polyfills and a compatible ES5 build for older browsers, and loads the appropriate file based on the browser. You may opt-out of this change by setting your target back to es5 in your tsconfig.json. Learn more on angular.io."
From https://update.angular.io/#7.1:9.0
As per the "Angular Package Format" specs -
In today’s JavaScript landscape, developers will consume packages in
many different ways. For example, some may use SystemJS, others could
use Webpack. Still, others might consume packages in Node or maybe in
the browser as a UMD bundle or through global variable access.
Read more from this link - https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview

Versioning of Angular node modules for publishing

While trying to publish Angular components on npm, I am not quite sure which folders and files should be included in the versioning process and which should be in the .gitignore.
I use the Angular CLI for publishing. The main code is in ./projects/nls-ngx-module/src/** and for transpiling I use the native angular command ng build --prod from inside the project folder. Inside dist/ a new folder arrives with the project title. Fine.
After transpiling, another node_modules folder is added to the project folder, which is not ignored by default. It only contains a .cache folder with subfolders and files. And that irritates me, because in other sample projects they do not appear, but they have not been ignored manually in the .gitignore either.
Folder structure
├── ...
├── projects
│   └── nls-ngx-module
│   ├── karma.conf.js
│   ├── ng-package.json
│   ├── ng-package.prod.json
│   ├── package.json
│   ├── src
│   │   ├── lib
│   │   │   ├── ...
│   │   ├── public_api.ts
│   │   └── test.ts
│   ├── tsconfig.lib.json
│   ├── tsconfig.spec.json
│   └── tslint.json
├── src
│   ├── app
│   │   ├── ...
│   ├── assets
│   ├── browserslist
│   ├── environments
│   │   ├── ...
│   ├── ...
├── ...
.gitignore
# See http://help.github.com/ignore-files/ for more about ignoring files.
# compiled output
/dist
/tmp
/out-tsc
# dependencies
/node_modules
# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
# misc
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
yarn-error.log
testem.log
/typings
package-lock.json
# System Files
.DS_Store
Thumbs.db
Examples taken from:
mrsan22/NgxMatTypeahead
faxemaxe/ngx-cli-lib-demo
No, no modification of the .gitignore file has to be done. The ng build command was executed in the wrong directory.
Do not run ng build --prod or any similiar ng build command outside the root directory of the application. The node_modules folder is only created inside the projects directory when you run the ng build command inside the subfolders of the projects diretory.
Note
The ng build command distributes all necessary dependencies listed inside the package.json. Therefore there has to be a node_modules folder to bundle the built library correctly.

How to append the version of dependencies to filenames when `bower install`

When I use bower install to install the dependencies, they will be downloaded into bower_components, like:
├── jquery
│   ├── AUTHORS.txt
│   ├── CONTRIBUTING.md
│   ├── MIT-LICENSE.txt
│   ├── README.md
│   ├── build
│   │   ├── release-notes.js
│   │   ├── release-notes.txt
│   │   └── release.js
│   ├── component.json
│   ├── composer.json
│   ├── grunt.js
│   ├── jquery.js
│   ├── jquery.min.js
│   ├── package.json
You can see there is no version in the file names.
Is there any way to make bower add the versions to the file name or path automatically, so that I don't need to worry about the browser-cache if I include them directly in the web server?
I want it like this:
├── jquery-1.9.1
│   ├── AUTHORS.txt
│   ├── CONTRIBUTING.md
│   ├── MIT-LICENSE.txt
│    ├── README.md
│   ├── build
You can do like this :
bower install jquery-1.9.1=jquery#1.9.1

Adding Express 4 to a modularized Angular ui-router app

I am at the point where I have to add Express 4 to my modularized AngularJS ui-router app. Previously I used this tutorial to modularize my Angular app. I currently have all the modules for my AngularJS app in the src/app/ directory like so:
$ tree -I 'node_modules|bower_components|assets|scss|test' -L 4
.
├── awsS3.js
├── bower.json
├── Gruntfile.js
├── karma.conf.js
├── karma-e2e.conf.js
├── package.json
├── README.md
├── server.js
└── src
├── app
│   ├── app.module.js
│   ├── auth
│   │   ├── auth.ctrl.js
│   │   ├── auth.module.js
│   │   └── auth.serv.js
│   ├── image
│   │   ├── image.module.js
│   │   ├── images.ctrl.js
│   │   ├── image.serv.js
│   │   ├── images.tpl.html
│   │   ├── imageview.ctrl.js
│   │   └── imageview.tpl.html
│   ├── nav
│   │   ├── login.tpl.html
│   │   ├── nav.ctrl.js
│   │   ├── nav.module.js
│   │   ├── post-register.tpl.html
│   │   ├── register.tpl.html
│   │   └── url.fltr.js
│   └── security.json
├── index.html
└── robots.txt
Now I am wondering how I should break up the Express 4 code to fit in with my Angular modules. I really can't find any tutorials that focus on this. Any ideas?
When i develop client-server applications I tend to keep the server and client completely separate from each other. So I would suggest that you create a "server" folder and in there your layout could look something like this:
server
--app.js
--server.js
--config.js
--controllers
----firstController.js
--routes
----firstRoute.js
--models
----firstModel.js
I would recommend this website: https://scotch.io

Categories