I now, use angularJS, requireJS, bootstrap to structure my project.Just like the title.Because of all router configured in app.js can make this file be so large and difficult to maintain in the future.So is existing some solution to solve it?Thanks.
Yes, definitely. We actually have a routing config file in each section of our site. It keeps it a lot more organized.
In the JS file you want to configure it you will just need to get a reference to your angular module and chain your config file off it. This is done by simply writing our your module as you would without the dependency brackets like this:
angular.module('myApp').config('configForThisRoute',function($stateProvider){
//define your states as usual
}
You can add your angularjs configuration in any .js file or you can give any name of file, but this file must be included first in html.
Related
I want to do some conditional operations inside my angularjs application for different versions of my app. How do I import the version property of my bower/package.json file from my Angular app locally.
I seem to get module not founderror when trying to import the json file (actually anything that's not .ts file). I am not planning to use $http.get(..) to read the json file asynchronously nor installing node/express packages to use require module.
I want to simply use the ES6 or SystemJS module loader for doing this task. Thank you :)
Solution in AngularJS Controller:
var appVersion = require('electron').remote.app.getVersion();
I am trying to develop a desktop application using Electron. I am also using AngularJS.
The problem I am running into is that when I create a custom directive, and load a templateUrl, the view doesn't load and the console says it doesn't exist. Yes, the path is correct, I am sure of it.
The problem is that the application is already running index.html, so it can't load the second file. Needless to say, I am not experienced enough to solve this problem on my own.
I know that Electron uses node on the backend, so I suppose setting routes and/or setting a path to my static files might resolve the problem, but I don't know how to do it.
I have searched the whole web for a solution, but I couldn't find a clear answer.
One way you could easily do it, is by adding your template as an inline template on the angular side, for example in your index.html:
<script type="text/ng-template" id="temp1.html">
....
</script>
Then you can reference it from your directive, like templateUrl: temp1.html.
Otherwise, you could also use a module bundler. Webpack has a ng-template loader which does that for you. Gulp and Grunt also have equivalents
Another thing to try, if you need to reference paths from the js side, is to use __dirname nodejs variable. Here an example
I am reading how to write a clean code as I am learning the basics of this framework.
If I understand correctly, it is preferred to have one Controller per file, and one module per file but that will end up making my index.html head tag so long if I have to link to all those controllers.js files in the head.
Please look at the image below.
Am I missing something? Thanks
Why don't you use any build tools (e.g gulp, grunt, webpack, etc.)? They can actually combine all your js into one bundle and include it in index.html automagically.
I have created a directive that uses angular-translate and it is working fine with this configuration :
$translateProvider.useSanitizeValueStrategy('escape');
$translateProvider.useStaticFilesLoader({
prefix: 'i18n/messages_',
suffix: '.json'
});
$translateProvider.preferredLanguage('fr');
$translateProvider.fallbackLanguage('fr');
$translateProvider.useLocalStorage();
and two files in i18n folders :
* messages_en.json
* messages_fr.json
Now I want this directive to be usable in another angular application so I use it as a bower dependency of my new application with all necessary .js and .html needed but the json files in a single .js file using templateCache.
The directive is working in my new application, however my new application is trying to load the json file from http://localhost:9000/i18n/messages_fr.json ans gives a 404 error.
This error is normal as I do not include the json files in my dependency, however I do not not know where and how I should. If I include them in my bower depdency or add it in templateCache, it is not working.
An easy solution is to copy the file in a i18n/ folder of my application but it is not what I want, I want to reuse the files defined with my directive. I tried modifying the useStatidFilesLoader attributes but without success so far.
EDIT
I figured the real problem was I intended to use two configurations of the translateProvider :
- one with common messages file in my dependency config
- another one with another message file name in my new application config.
But as it is a provider, hence a singleton, only one configuration gets executed. So it is not possible to load messages from two different files or I missed something in ngtranslate configuration.
What I did is including the common messages file in my bower dependency and add a grunt task in my new application that merge this message file with my new application message file. To do this I use grunt-merge-json.
I had the same question and here is your answer. All you need is
$translateProvider.useLoaderCache('$templateCache');
Would it be possible to support the $templateCache?
I'm using generator-ionic from link, and It made well, but I want to know how to add angular controllers or directives files.
It's not like app when I made with 'yo angular'
there is no views folder and files neither.
'yo angular:directive myDirective' not work.
do I have to make all files and folders by myself?
I found that the Angular Generator works fine with a project created by yo ionic. You are correct that the folder structure is different, but that may not a problem for you. You could always start with a completely blank ionic template, and then start adding the pieces you need. Your app.js and index.html files will be where the Angular Generator expects them to be.