setup angular js application index.html page to include only singe controller - javascript

I have written a angular application (MEAN) using nodejs in back-end. There are multiple modules in the application so have multiple controller.
We have to include all the controllers in the index.html file and new one as well if we added in any module.
I have checked the other application which are running on the same stack (MEAN) but in there source code i haven't found all the controllers.
So please help me around the same to optimize my application.

Well then I'd suggest looking into Gulp as it allows you to concatenate and, if you want to, minify your codebase and place it into one file. That single file can then be referenced in your index.html
// Example - Concate the js files together and place them in the dist folder
gulp.task('js', function(){
var src = ['../../file-name.js'];
return gulp.src(src)
.pipe(concat('main.js').on('error', gutil.log))
.pipe(gulp.dest('dist/js').on('error', gutil.log))
});
This is an example of what I used when I worked with Angular1. Gulp places all my target files into the dist folder and into the main.js file which I reference in the index.html file.
<script type="text/javascript" src="js/main.js"></script>

Related

Including bundled webpack file in webpack build

I have a webpack bundled widget that I pack into a single file using webpack, and can use as follows:
<script type="text/javascript" src="my-bundle.js"></script>
<script type="text/javascript">
(function() {
MyBundle.render();
}) ();
</script>
This works fine, but I want to use this widget in my main Rails app. So I've copied the my-bundle.js file into my main project directory and required it.
When I run webpack on my main app, I can see that the code in my-bundle is being included in the resulting js file, but I cannot access the code. i.e. calling MyBundle gives a not defined error.
How can I access it?
EDIT - it looks like I can just use script-loader to run the my-bundle.js file once (which defines a MyBundle function). This doesn't feel like the best way to do it though

Laravel 5.4 - Write and use multiple scripts

I want to know where I should write my js files in Laravel 5.4 for compiling after this files.
Example:
I want to create a test.js file with a console.log('Hello World). Where I create this file ? Have I put it in the resources/assets/js/app.js folder ?
My example code:
Folder resources/assets/js/app.js :
require('./bootstrap');
require('./normalscripts/test');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app'
});
In resources/assets/js/normalscripts/test I put console.log('WORKS');
And in the view I loaded app.js from public folder
Other question I have is, if I want to load some differents scripts depending of the html view that I am using, how can I can configure them in the app.js for this ?
Example:
I have test1.js and test2.js. I want to load in the view1.html the test1.js and in the view2.html the test2.js. How could I do this ?
Thanks
The Documentation answers your question:
By default, the Laravel webpack.mix.js file compiles your SASS and the resources/assets/js/app.js file. Within the app.js file you may register your Vue components or, if you prefer a different framework, configure your own JavaScript application. Your compiled JavaScript will typically be placed in the public/js directory.
As docs says: https://laravel.com/docs/5.4/structure
The Public Directory
The public directory contains the index.php file, which is the entry
point for all requests entering your application. This directory also
houses your assets such as images, JavaScript, and CSS.
Javascript files must be stored on the public directory, after knowing this, one of the possible correct path would be:
app/public/js/compiled/app.js
And you can include to the JavaScript file on your views like this:
<script type="text/javascript" src="{{ asset('js/compiled/app.js') }}"></script>
Laravel 5.4 is prepared to work with Vue.js, by default you need to have your js files on your assets folder, after compiling them they will be outputted at the public folder.
In case you are using another JS framework you need to indicate the path for the compiled JS files, it should be pointing to the public folder.

Angular JS links from directories above

I've just found this weird looking issue. I run my angular app from the local server and gave my index.html file links from directories one level above it and program was unable to find them. My relative path looked like this:
<script src="../scripts/angular.min.js"></script>
Also when I run my app not from a server, just like a regular HTML file paths were correct. Is this a angular rule that files from directories above cannot be linked to the app. Or just I did something wrong?

serving static content in code structure generated by yeoman for angular fullstack

I am following the code structure generated by yeoman for angular fullstack.
I want to include a script called core.js in file called app.html.
<script src="core.js"></script>
I do not see express.static anywhere in this for serving static files.
I tried using it but it did not help.
It can not locate it and gives 404.
How do I get around this ?
It had happened before as well but I could get around it by using express.static and serving files from location pointed by it.
It did not help this time though.
Update:
I have app.html in folder called Music. In same folder, I have a sub folder called js where I have placed my core.js file that is to be included in app.html. I tried to access it using absolute as well as relative path but did not help and still gives 404.
In angular, the scripts go in the relevant subfolder of /scripts. Either in /controllers, /services/, /directives, etc. You then reference them in your html as such:
<script src="scripts/controllers/core.js"></script>
As for express.static, express is a NodeJS wrapper for HTTP. So that will be the service you create that lives on some Node server remotely. express.static allows the Node server to deliver static content files from the file set at the remote server. It does not go in your angular application.

Managing Modules in Angular JS

I am using Angular js for my client side application.
Que:1
My folder structure is like :
Main
--Client
----app.js
----index.html
----Modules
------Module Name
--------module_name.js
--Server
I want to access Module Name.
I have tried using Main/Client/Module Name but I didn't get anything.
Which is proper way to get this?
Que:2
How can I add all js of Modules in index.html
I have to add all js of modules and its controllers in index.html manually.
Is there any way to add js automatically when module is called?
for question 1: you should better use absolute paths, /Main/Client/Module_Name
and for question 2: you should use grunt or a similar task manager to arrange those stuff for you. you can write a merge command that will merge all js files under Module to a single js file and add that file in index.html

Categories

Resources