I'm almost new to angular and I'm working on an Angular2 project.
I want to add these following css files to brunch
What is the syntax?
Is it better to add it to brunch-config.js or index.html?
Files:
'/app/assets/css/bootstrap.css',
'/app/assets/css/custom.css',
'/app/assets/css/font-awesome.css',
'http://fonts.googleapis.com/css?family=Open+Sans'
brunch-config.js:
exports.config = {
// See http://brunch.io/#documentation for docs.
files: {
javascripts: {
joinTo: {
'vendor.js': /^node_modules/,
'main.js': /^app/
},
order: {
after: [/\.html$/, /\.css$/]
}
},
stylesheets: {
joinTo: 'app.css'
},
templates: {
joinTo: 'main.js'
}
},
plugins: {
inlineCss: {
html: true,
passthrough: [/^node_modules/, 'app/global.css']
}
}
};
You can import fonts using #import CSS at-rule or <link> HTML element, as usual. To add other files, put them to app/styles directory. The reason they are not used now is because they are in assets folder: please, place only static assets (e.g. templates) there. These files will be joined to app.css. Make sure you have linked stylesheet in HTML.
Also, you may find this skeleton useful for bootstrapping Angular 2 apps.
Related
I haven't found anything related to this topic.
I'd like to import pusher like normally is done with other js frameoworks:
npm install pusher-js
Then you just import the library:
import Pusher from 'pusher-js';
or
const Pusher = require('pusher-js');
Please share good practices to accomplish that in an ExtJS application.
The last resort would be to just include the min file in app.json:
...
"js": [
{
"path": "https://js.pusher.com/7.0/pusher.min.js",
"bundle": true,
"compress": false
}
], ...
Or even worse, put the include in the index.html file:
<script src="https://js.pusher.com/7.0/pusher.min.js"></script>
Any ideas?
Thanks.
if including it using app.json is not what you want you can load it at the time you need it.
Async (onLoad, onError are the promise)
Ext.Loader.loadScript({
url: 'pusher-js',
onLoad: successFn,
onError: errorFn,
scope: this
});
Sync (the code will continue, after the file has been loaded)
Ext.Loader.loadScriptsSync(url|[url]);
Optional Approach
If you add Ext.require ExtJS will try to load the file and you can use this in your controller.
Ext.define('MyApp.view.SomeViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.someview',
init() {
// Preload additional functionality
Ext.require('MyApp.libs.pusher-js');
// from folder ===> MyApp/app/libs/pusher-js
}
})
OR
Read this as a starting point.
Using app.json you can get it all prepared as:
"js": [
{
"path": "https://js.pusher.com/7.0/pusher.min.js",
"remote": true
}
],
...
Inside your initialization:
var pusher = new Pusher('APP_KEY', {
cluster: 'APP_CLUSTER'
});
This will load the file automatically and you do not have to import it in any way.
So far I've been able to bundle up all our controllers/directives/services into 1 script and I also bundled all the vendor scripts into another script file. Now I'm having trouble figuring out what the right way to load the AngularJS template files are. We are currently using Grunt and just copying the exact folder structure over to the dist folder but clearly this won't work in Webpack. Here is an example of our project structure(from the John Papa style guide)
My project inside the dist folder is currently rendered as follows:
Anybody have any input?
AngularJS templates are html files, so you need to add some loader for handling them.
You have multiple options, bundle those html files into the js bundle, using html-loader, pros of this approach is that your app won't make ajax call for the template, cons, your js bundle size will become large.
This will allow you to "require" your html template inside your controllers.
copy those raw files using copy-webpack-plugin, this way it will work the same way it works with Grunt (providing templateUrl path to the file that was copied).
In-order to be specific regarding lazy-loaded files you can attach .lazy.html suffix.
Then, enable file-loader on the .lazy.html files & assign it to templateUrl, and the regular once use with template: require('template.html').
As of best practice, I would "require" critical templates so they will be in the js bundle, and lazy load (via templateUrl) non-critical ones.
This is an example of webpack.config.js file:
module.exports = {
module: {
rules: [
{
test: /\.lazy\.html$/,
use: [
{
loader: 'file-loader',
options: {},
},
],
},
{
test: /\.html$/,
exclude: /\.lazy\.html$/
use: [
{
loader: 'html-loader',
options: {
minimize: true,
},
},
],
},
],
},
};
// critical.component.js
angular.
module('myApp').
component('greetUser', {
template: require('critical.html'),
controller: function GreetUserController() {
this.user = 'world';
}
});
// none-critical.component.js
angular.
module('myApp').
component('greetUser', {
templateUrl: require('non-critical.lazy.html'),
controller: function GreetUserController() {
this.user = 'world';
}
});
We have requirejs.
I have mentioned the paths and the shim in requirejs.
Here, when I load the controller in angularjs router, the files are loading separately.
require.config({
urlArgs: "bust=" + (new Date()).getTime(),
baseUrl: 'Folder',
waitSeconds: 200,
paths: {
// Jquery
'Angular': 'Angular path',
'FileA': 'FileA',
'FileB': 'FileB',
},
shim: {
'FileB'{
Deps:'FileA'
},
'FileA'{
Deps:'Angular'
},
}
When I require FileB, it will automatically retrieve fileA and angular file.
But in this case, I am requesting three http request for the three files.
Is there any solution that, based on requirejs structure bundling the files?
So that when I request the file, I will get the single file instead of multiple files
If there is any dependency between the files that you are trying to bundle then bundling them in separate files doesn't make any sense.
However if you are sure that dependencies would not be any problem you can use bundle a new feature from requirejs:
requirejs.config({
bundles: {
'shared': ['angular'],
'fileA': ['fileA'],
'fileB': ['fileB'],
// etc...
}
});
Also you can add your template to the bundle which is awesome. More info here.
I am trying to compile all angulara templates into a single js file.
Something like what ember does with ember-cli.
So I successfully managed to minify and concat all the javascript files.
I have just 2 files now vendor.js and application.js and whole lot of template files which I want to cram into templates.js.
How do I go about it? If some one could give step by step explanation, please. Any links would be appreciated too.
Surprisingly there is no information about this anywhere.
I am using mimosa as build tool, it seemed to me the easiest.
Here is my mimosa config:
exports.config = {
modules: [
"copy",
"stylus",
"minify-css",
"minify-js",
"combine",
"htmlclean",
"html-templates"
],
watch: {
sourceDir: "app",
compiledDir: "public",
javascriptDir: "js",
exclude: [/[/\\](\.|~)[^/\\]+$/]
},
vendor: {
javascripts: "vendor/js"
},
stylus: {
sourceMap: false
},
combine: {
folders: [
{
folder:"vendor/js",
output:"vendor.js",
order: [
"angular.js"
]
},
{
folder:"js",
output:"main.js",
order: [
"application/main.js"
]
}
]
},
htmlclean: {
extensions:["html"]
},
htmlTemplates: {
extensions: ["tpl"]
},
template: {
outputFileName: "templates"
}
}
It does generate templates.js file without any errors. But when I link it, angular spits a bunch of errors.
Once compiled, how do I actually call those templates from ng-include and from the route provider?
I assume that it is the same as I would call a script template using the id which in my case is derived from template original file name, right?
Maybe I am missing some important steps.
The build tool is not important here although desirable. If some one could show how to do it manually without a build tool I would figure out the rest.
Thanks.
I'm using Gulp as my build tool, and in that, there's a plugin gulp-angular-templatecache which pre-compiles and registers all templates for your module in the angular $templateCache - no changes are required to any of the calling code to use these. EDIT: The Angular documentation for $templateCache explains how the templateCache works.
It might be worth reading through the documentation for gulp-angular-templatecache to see how that pre-populates the $templateCache to see if you can crib something that would work with your build process.
Here's my gulp task that does the job:
var templateCache = require('gulp-angular-templatecache');
gulp.task('buildjstemplates', function () {
return gulp.src(['public/javascripts/app/**/*.html'])
.pipe(templateCache({module: 'app'}))
.pipe(gulp.dest('public/javascripts/app/'));
});
I'm just wondering if anyone has had experience using this plugin in a backbone project.
Instead of having all my script template tags in a single index file, I wanted to house my templates in the same directory as my views that required them.
So I was hoping i could use the node option to require the local template and render to it and then append to an #id on my index file (which I'll sort out laster).
So basically I have my handlebars template (template.hbs) and its compiled js (template.js) alongside my backbone view, index.coffee.
public
|_ coffee
|_views
|_card
|_list
index.coffee
template.hbs
template.js
Just as a reference, my grunt file looks like this:
handlebars: {
compile: {
options: {
namespace: 'MyApp.Templates',
node: true
},
files: {
"public/coffee/views/card/list/template.js": "public/coffee/views/card/list/template.hbs"
}
}
},
In my backbone view (index.coffee) I was hoping to require the handlebars template like so:
class CardList extends Backbone.View
template: require('./template')
…
do some other shiz
…
render: =>
template = Handlebars.compile($(this.template).html())
html = template
model: this.model
$(this.el).html(html)
Rendering this is spitting out this error in the inspector:
Uncaught [object Object]
> template = handlebars.compile($(this.template).html());
I obviously dont know what I'm doing, so I'm hoping someone could shed some light on how I can use this plugin properly.
I'm using grunt-contrib-handlebars v0.3.5
Any help is appreciated.
Thanks
You might be able to achieve that by building the files object dynamically.
Maybe something like this, although I'm not sure if cwd supports globbing patterns. I'm also not sure if dest is relative to cwd. If this is not the case, this will not work, but it's worth a shot.
handlebars: {
dist: {
options: {
namespace: 'MyApp.Templates',
node: true
},
// Glob for a directory of files, builds the files object, then map each
// one to a new destination file.
expand: true,
cwd: './public/coffee/views/*',
src: '**/*.hbs',
dest: './',
ext: '.js'
}
},
Look inside your template.js file that you're including. grunt-comtrib-handlbars should have precompiled it into a Javascript function for you, so there's no need to call Handlebars.compile anymore. You could just remove that template = Handlebars.compile line.