How can I get RequireJS to load .LESS? Until now it has been nothing more than a pain in the a.. to get it to run.
In my backbone config file i have:
require.config({
paths: {
jquery: 'lib/jquery/jquery',
backbone: 'lib/backbone/backbone',
handlebars: 'lib/handlebars/handlebars',
text : 'lib/requirejs-text/text',
less: 'lib/less/less',
lodash: 'lib/lodash/lodash.min'
}
});
and on my index page i have
<link href="<?php echo base_url('assets/css/style.less')?>" rel="stylesheet" />
<link href="<?php echo base_url('assets/css/admin.less')?>" rel="stylesheet" />
it seems they get loaded, but for example all my #border, #background-dark, #grey etc etc files don't work...
so, does anybody know whats wrong?
See this plugin for requirejs. It also works fine with r.js optimizer.
Related
I have created a working web page page.html, which loads page.css and page.js in the header:
<script src="page.js"></script>
<link href="page.css" rel="stylesheet" type="text/css" />
Prior to that, I had already a homepage. Now, I want to create a state of homepage that leads to subpage.html which should have exactly the same behaviour as page.html:
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('subpage', {
url: '/subpage',
templateUrl: '/subpage.html',
...
});
}])
However, it seems that, unlike page.html, subpage.html has NO header place to load page.css and page.js.
So, what is the best way to set the fields of the subpage state and write subpage.html, from page.html, page.css and page.js?
Would it work if I just load page.css and page.js in the header of the html of the home page? There is a risk to have conflicts with existing items in the home page, no?
Yes. I realise that, in the beginning of subpage.html, we could load directly js and css:
<script src="page.js"></script>
<link href="page.css" rel="stylesheet" type="text/css" />
One advantage of loading in subpage.html rather than in homepage is that we load these files only when we need them (i.e., opening the subpage).
In terms of "conflicts" with the home page. I guess, it is more or less similar to having js and css later in the homepage or never (when we don't open the subpage).
notify({
classes: 'alert-danger',
message: response.data.errors[e]
});
I use this https://github.com/cgross/angular-notify
My notify still show blue color.
How to implement this classes?
I had this problem and was able to resolve it by changing the order of the css files in the main index.html file of my angularjs app. Apparently you have to list the angular-notify.css before the bootstrap.css file. This resolved the issue for me.
<link rel="stylesheet" href="bower_components/angular-notify/dist/angular-notify.css" />
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
Once I switched the order of the CSS styles, the bootstrap classes apply properly using your code above.
Working with angularjs, I am trying Angular Treeview plugin.
But when i try it on my local environment, it doesn't work. I don't know how to fix it.
<div ng-app="myApp">
<div ng-controller="myController">
<div>
<input type="button" value="TREE MODEL 1" data-ng-click="roleList = roleList1" /> <input type="button" value="TREE MODEL 2" data-ng-click="roleList = roleList2" />
</div>
<div style="margin:10px 0 30px 0; padding:10px; background-color:#EEEEEE; border-radius:5px; font:12px Tahoma;">
<span><b>Selected Node</b> : {{currentNode.roleName}}</span>
</div>
<div
data-angular-treeview="true"
data-tree-model="roleList"
data-node-id="roleId"
data-node-label="roleName"
data-node-children="children" >
</div>
</div>
</div>
And Called the angular.treeview.js script & angular.treeview.css file..
I am getting this error in my local dev console:
CONSOLE has ReferenceError: angular is not defined })( angular );
Your issue is how you are loading this script - I recommend following the treeviews suggest installation method. So load all the scripts - in this case you would have copies of their css and js files locally - and replace the angular reference with however you are loading it (CDN or locally or whatever).
This is probably in your header -
<script type="text/javascript" src="YourAngularScript.js"></script>
<script type="text/javascript" src="/angular.treeview.js"></script>
<link rel="stylesheet" type="text/css" href="css/angular.treeview.css">
Notice angular is loaded first. Then when you create your angular app module (or whatever module is using this as a dependency), add it as a dependency to that app module like so:
angular.module('myApp', ['angularTreeview']);
Just make sure you replace the script references I used here with references to the real scripts/css files.
Your error CONSOLE has ReferenceError: angular is not defined })( angular ); is the treeview script does not have a reference to angular yet.
How could i include the custom css & JavaScript for particular module in DotnetNuke?
I understand that it is not like normal ASP.Net page.
If your module has a file named module.css in the root of the module folder, it will automatically get included on the page with the module.
For other CSS and for JavaScript, you should use the Client Resource Management framework to include the resources you want. Something like this:
<%# Register TagPrefix="dnn"
Namespace="DotNetNuke.Web.Client.ClientResourceManagement"
Assembly="DotNetNuke.Web.Client" %>
<dnn:DnnCssInclude runat="server"
FilePath="~/DesktopModules/MyModule/css/the-style.css" />
<dnn:DnnJsInclude runat="server"
FilePath="~/DesktopModules/MyModule/js/the-script.js"
ForceProvider="DnnFormBottomProvider" />
You can also use this:
<link rel="stylesheet" type="text/css" href="<%= ControlPath %>/module.css" />
To add external JavaScript to a custom module:
string externaJs= "externaJs";
Type cstype = System.Reflection.MethodBase.GetCurrentMethod().GetType();
string cstext = "<script src=\"" +
ResolveUrl("~/DesktopModules/ModuleName/js/JsName.js") +
"\" type=\"text/javascript\"></script>";
if (!Page.ClientScript.IsClientScriptBlockRegistered(externaJs))
Page.ClientScript.RegisterClientScriptBlock(cstype, externaJs, cstext, false);
my application templates are working if they are declared within index.html file.
But, I want to keep all templates in different html file,
like,
-AppTmpl.html
<!-- SidebarView Template -->
<script id="sideBarTmpl" type="text/template">
<div class="inner_div"><img src="images/com_logo.png"></div>
<div class="inner_div"><img src="images/adv_index.png"></div>
</script>
<!-- HeaderView Template -->
<script id="folderDivTmpl" type="text/template">
<div id="div_<%= menu_sequence %>"></div>
</script>
I am using underscore templates.
But problem is that these templates are not accessible by underscore.
like,
this.template = _.template($("#headerTmpl").html(), this.model.toJSON());
So what i need to do like include "AppTmpl.html" file in index.html or something.
Any solutions?
Thanks in advance !
I use requireJS with the text plugin
Then you can just load it as you need with requireJS:
require(['text!templates/AppTmpl.html'],function(AppTemplate){
this.template = _.template(AppTemplate);
});