Is there a way to use the bundle functionality of ASP.NET MVC4 and the JavaScript module dependency feature of require.js
I want to load all my modules with ASP.NET MVC4 bundle features and use require.js to organize the relationships between them.
The problem is that require.js doesn't find the needed dependencies while all the modules are loaded via bundles.
I don't want require.js to go and try to load files asynchronous I just want it to use already loaded modules via bundles.
What should the main file look like in this case.
I Have the following structure in _Layout.chtml
#Scripts.Render("~/bundles/jquery",
"~/bundles/jqueryval",
"~/bundles/jslibs",
"~/Scripts/require.js",
"~/bundles/tjProductivity",
"~/Scripts/tjpApp/main.js"
)
#RenderSection("scripts", required: false)
And then in each scripts section I want to load all modules that will be used for that page via Bundle.config but let require.js manage dependencies between them.
It's possible, use almond.js, from the creator of RequireJS.
The only shortcoming is that you have to always add the module names on your modules...
A good reference on integrating requirejs and mvc:
http://www.codeproject.com/Articles/614507/Modular-Javascript-Using-Require-Js
and
http://www.stefanprodan.eu/2012/09/intro-requirejs-for-asp-net-mvc/
- note that it doesn't using bundling.
This article shows you how to integrate RequireJS in a ASP.NET MVC 4
project and structure the JavaScript code in such a manner that any C#
programmer can understand and use it without advanced js programming
skills.
Related
I have MVC application and in the view I'm injecting angular 14 script bundle.
If user is from front office then we are injecting main.budle.js in view otherwise we are registering main.bo.js.
Now to customize output files we can use webpack. But is there any way we can handle this using angular cli only ? I don't want to use webpack due because we have to write a lot of custom code to configure the webpack.
Thanks a lot in advance.
I would like to ask what is the best approach to include and reuse Vue components that are written in .vue files (SFC), into existing web pages.
For example lets say there is already an SPA project and also an ASP Core project. I would like to reuse my ~/SPA Dir/components/*.vue into my Razor pages or just plain HTML pages. To be more specific the web pages are using Vue through the CDN js file.
In most Vue tutorials it is often mentioned how Vue is used to create SPAs or it can be used in already existing web pages. And there is also emphasis on the reusability of its' components. But it seems very frustrating and complex to follow those guidelines with often lacking and unclear guides.
From my research I realize that there must be an intermediate build process that will produce js files form the vue files. And also the need of tools like vue-loader and webpack. But still I could not find something straight to the point.
Is there a more straightforward approach or what is the most common approach to the above-mentioned scenario.
(Vue version: 3)
Thank you
Maybe try this SFC loader: https://github.com/FranckFreiburger/vue3-sfc-loader
I use it on my PHP server, where I have my .vue components and I need to compile them as .js.
I'd like to integrate VueJS through WebPack in one of my custom Odoo modules, and have it start up automatically when I launch Odoo-bin.
Does anyone have a solution?
Is it even possible?
I know you can include VueJS as a simple .JS file in the module's template, but that means I can't use the .vue components supported by WebPack.
I also read that Odoo has its own JS framework, but I couldn't find good tutorials/documentation for it.
EDIT: To anyone that might be wondering how I solved this, here's what I did:
I initialized a package.json file in the root of my Odoo folder using npm init. I added a start script to the package that launches webpack and bundles all vue components in myAddons folder (where I store my custom modules), then launches Odoo through the python odoo-bin ... command. All that's left is to use npm start to start it all up.
This way, the vue components get bundled into single JS files, that I then add to the templates of my modules. This has a small inconvenient in that the first bundle has to be done manually in order to know which JS files need to be imported to the templates. Also, i'm still trying to figure out how to bundle the components of every single module separately. Will update this once I find a proper way to do it. ...Hopefully.
By default, odoo frontend part is heavily built upon backbone, jquery, underscore. If you want to use any other JS library, you have to make sure the compatibility in between them. The odoo backend parts of JS functionalities are written under web module can be found in odoo/addons/web/static/src/js directory in odoo community codes. The ecommerce/website part is under website* modules.
Along with the fact that the Odoo JS API documentation is basically non-existent (as of the time I am posting this) .. I would add the fact that its going to be like working with a moving target compared to calling Odoo's JSON-RPC API directly since their JSON-RPC API changes very little over different versions of Odoo.
Moreover, making JSON-RPC API calls with Axios is extremely simple. So just go directly to the server's JSON-RPC API from your Vue project.
This is what I am doing with at odooinvue.org which is basically a Vue project that uses Odoo in the back-end. That project is designed specifically as a resource for Vue developers that are trying to use Odoo in the back-end but have difficulty because they are new to Odoo development.
I suggest trying #StartupGuy's odooinvue, which is really nice.
With Odoo 14 they created a new modern frontend framework: Owl framework.
I have not tried it myself.
Finally, I start to work with Aurelia. There is a starter kit available Here which facilitates initializing Aurelia. But it is a template which should be used within a Web Site template.
I have a pre-configured WebApi project and I want to use Aurelia in it. I've just added the starter kit files and folders to my project. But unfortunately it shows 27651 errors fo files in jspm_packages.
What am I doing wrong? Is there any Nuget bootstrapper for Aurelia available?
Start with the aspnetcore template from Here
You can use web api from the template.
You will be up and running in minutes.
If you are using Web API, starting from an MVC5 project might be faster.
The following link is an Aurelia starter kit with MVC5.
You will have to update it to the latest version of Aurelia, but I managed to make it work with web api 2 and oAuth authentication.
https://github.com/rmourato/Mvc5-Aurelia
A tutorial can be found here.
http://ruimourato.com/2016/01/26/running-aurelia-on-mvc5.html
Hope this helps.
Well you asked what the errors are from. First thing is that you should exclude the jspm_packages folder from VisualStudios solution explorer Right click on it and mark 'exclude from project'.
Next, setup your project on source control (git) if not already and add the following to your git .ignore file
jspm_packages/
node_modules/`
I would suggest creating a second project aside from your WebAPI project that can contain static html, css and js files and do your Aurelia application there separate from your Web API project but in the same solution.
I could possibly give you a solution that is already setup, that shows how to use web api along with aurelia. But it would take some time for me to setup.
For all of my projects using Aurelia, I use the aurelia-cli which you get through npm and I would also recommend this approach.
You can be up and running with hello world in under 5 minutes.
You will then be able to build all the appropriate bits and pieces to talk to your api.
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/the-aurelia-cli/1
I've read this post Mvc4 bundling, minification and AngularJS services
But it doesn't adress how to correctly minify AngularJS projects.
Should I minify everything except my viewmodels ?
Lets say my templates use code like this:
Hello <b>{{model.name}}</b>
if I minify the controller, the "model" property will be minified, right?
Thus breaking the above template.
I saw some video about AngularJS where they stated that you can apply minification but skip minification for properties.
That should solve the problem, minify the code but keep all property names on controller/models
How would I accomplish this with MVC4 bundles?
I believe you can minify everything. You model will be always be instantiated over $scope such as $scope.myModel and hence the model names would not get minified.
What little bit i know about minification, a minifier does not minify elements that it cannot ascertain about their usage scope. So minifier minifies private vars, functions etc.
We are using AngularJS with bundler in our MVC project and we have not face issues with AngularJS as such.