Image that I have so many JavaScript models, libs or some other modules, I don't add any module name for these modules.
However, if I have merged these files into one, is there any methods to add the module name to every module depending on the location of the JavaScript file, so I can require it by its name.
---edit
if my app directory looks like below:
js
lib
jquery.js
backbone.js
...
core
models
m1.js
...
pages
template
header.js
footer.js
page.js
...
I want to merge all files(including JS Modules, client-side jade template, models, etc.) into one files, how can I do that?
thanks,
kz
Related
How can you package an angular module with its own translations stored in json files, without harming or needing extra config from the host app? This module should be able to exist as a bower dependency.
Basically I want the templates (directives) in my module to set the correct values, based on the $translate.use() of the main (ng-app) module. This without any concatenating of files or special config required by the main app. This would allow me to quickly add the module to various applications. You would just include the module in your app config angular.module('my-app', ['my-translated-module]); and it would be able to render the translations correctly as soon as you're starting to use the directive. The config of the translation is of course in the config section of 'my-translated-module'
For example: think of a login form with a "sign up" and "login" button. I want to have it this as a separate module/directive, so different applications could reuse that part, without having the duplicate the translations. If the module gets an update, i just need to do a bower update on my main app, rerun
I'm on angular 1.5 and using the angular-translate library by pascal precht - with the static file loader.
I'm currently working on an Angularjs based project.I am using RequireJs library to load dependencies asynchronously.
Following is my project structure :
index.html
vendors
angular.js
require.js
underscore.js
css
bootstrap.css
app.cs
images
App
app.js
signup
signup.controller.js
api.user.resource.js
user.service.js
templates
Login.html
profile
profile.controller.js
api.myprofile.resource.js
myprofile.resource.js
templates
profile.html
How can I combine all files inside of App folder into a single minifieds app.js file.Please help me to create a Grunt Task
Have a look at https://github.com/jrburke/almond. It is a minimal AMD API implementation designed for use with optimized builds.
For packaging require applications with Grunt use https://github.com/gruntjs/grunt-contrib-requirejs.
What is the best angular file structure for me? My project is going to be a SPA with a video feed on the main page, and pages to view specific posts. I want my users to be able to login, vote on the content and an admin section to add content.
You can see my file structure here - https://github.com/bliitzkrieg/TrailerFeed or below
/app
/assets
/css
main.css
main.min.css
/sass
main.scss
_variables.scss
/components
_header.scss
/components
/dashboard
/feed
_feed.html
feed.js
feedController.js
/header
_header.html
header.js
headerController.js
headerDirective.js
/spec
app.spec.js
app.js
index.html
routes.js
Your file structure looks fine. You have your files organized by component rather than type. I would suggest removing the underscore prefix from your templates as this is redundant. Every template in angular is a partial so they don't need to be indicated as such.
You may want to keep your unit tests in the components directory as well. headerDirective.spec.js can live with in your header component folder.
Controllers are classes and instantiated as individual instances (as apposed to services which are classes that are injected as a singleton). So controllers should be named in PascalCase rather than camelCase.
It would seem that your component SCSS should live with the rest of its component files as well. But there are very valid reasons not to do this.
I want to include a .js file only before a certain action. This .js contains a new module. I can't include that module in my app's module because it doesn't exist yet when page loads.
To be specific:
I'm loading asynchronously CKEditor and ng-ckeditor in a 'resolve' of a router. The editor file is huge and I don't need it for the entire app. ng-ckeditor defines a module. I want to include that module in my app after the .js files load.
Possible?
I am having an issue where the browser is caching the views specified in my angularjs app. The view paths are coded into the app.js file. Is there a way to use grunt usemin/rev on javascript files in order to update these references with a versioned files?