Sorry this will obviously be a beginner question. I have Angular up and running fine within a Grails application. Now I have defined a directive that is effectively a control needed. This directive uses 'templateUrl' - that also works fine.
However, this is the simple part that I just don't know. Where would I put includes to javascript libraries that are only needed by the directive? That is, statements like:
<link href="css/bootstrap.css" rel="stylesheet" />
<script src="js/bootstrap.js"></script>
I have put them in the main page for now, but that doesn't seem quite 'right'. These are dependencies of the directive, not of the page. From a maintenance perspective, if that directive were ever removed due to changes, how would anyone know to remove the other links?
Note: my directive is already in an open statement - if that matters.
This is a larger question of dependency management. There really are 3 routes for doing this:
Include it in the main index.html (like you did) and declare it as a dependency in your docs. Feel ugly? Sure. But it is how a lot of stuff is done.
Use requirejs http://requirejs.org It is a module loader, and so at least the code itself can explicitly declare its dependencies.
Use browserify http://browserify.org It is also a module loader, but following UMD/CommonJS, exactly like in node.
I started with #1, then #2 for a while, but recently shifted to #3. The files are cleaner, and using npm makes managing the dependencies far easier.
Loading all external resources inside index.html is the common approach (SPA load all its resources once), but its not a must.
Inorder to achieve your goal you need to use external tool, we use RequireJS (Browserify is good as well) this way you can control the sources you load into the page.
Checkout this:
RequireJS official site
Using RequireJS in Angular Applications
Related
I need to migrate an site from one framework to another because I need to use Angular JS.
I found zurb-foundation very interesting. It happens that it seems to use jQuery.
According to this website https://scotch.io/tutorials/how-to-correctly-use-bootstrapjs-and-angularjs-together
When building out Angular projects, you should not add on the full jQuery library. jQlite is already included in Angular and this should be all the jQuery that is necessary.
I had a bad experience running Bootstrap and Angular together and I don't want to repeat the same mistake.
It happens that I found the following line at zurb-foundation index.html
<script src="js/vendor/jquery.js"></script>
A quick search has shown that it seems to be a "simplified" version of jQuery (am I wrong?).
I've seem many people questioning things related to Angular in Foundation apps.
My question is: Is Angular compatible with Foundation?
While you'll read in many places that you should stay away from jQuery when using Angular, you'll also notice a subtle "at first" here and there. Angular is quite opinionated, and employs a declarative way of doing things, whereas jQuery is imperative. Check this out for more on the topic.
To answer your question:
Scotch.io's tutorial about Angular and Bootstrap involves UI Bootstrap, a library of directives written in Angular to be able to integrate common Bootstrap functionalities easier.
The equivalent of UI Bootstrap for Foundation is Angular Foundation. I recommend giving this thread a look-over as well, as it contains information that may be relevant to your use case.
So yes, Angular is compatible with Foundation. Happy hacking :)
a quick answer is of course they are compitable with each other. check this out from Zurb. However if you do not want to use JQuery, then the easiest way is to use pineconellc for foundation 5. foundation 6 does not have a port yet as far as I know.
I'm developing several AngularJS applications and I'm looking for best practices how I can share code, especially directives, between these projects. The biggest problem I'm facing is the following:
Most of my directives contain at least one js file and a html template. The js file often contains a reference to the template. When I include the same js file from two different projects, what's the best way to handle the different paths?
There may be better ways to handle this situation I can't even think of. So, I would like to know if someone has experiences with this situation and how this is handled. Thanks!
I find it helpful to use compiled HTML templates using a build tool like https://www.npmjs.com/package/grunt-angular-templates . There are plenty of Gulp/Grunt alternatives if that one doesn't suite your needs.
Then you will need to keep your templates in namespaced directories so that your consumer applications don't collide.
Then you when you just need to consume a single compiled JS file. The templates are compiled into it. If you need to override the templates in your applicatons, just use the template namespace convention to provide the overrides.
Maybe you can write your code in nodejs style (with CommonJS), locate your files in different folders and such, and then use browserify to combine your js code into one piece. HTML templates can be also easily transpilled into js files using angular template cache and some tool like this one for gulp or maybe some similiar for grunt.
Basically what I want is a scaffolding tool (without bower and other stuff that it comes with) and controller, service/factory generators.
Yeoman is great but I was wondering if there's anything minimalist cli out there for angular.
Well, if all you want is a base angular app structure, that is called a boilerplate. There are a few available:
https://github.com/angular/angular-seed
https://github.com/ngbp/ngbp
https://github.com/angular-app/angular-app
However, you seem to also want a controller, service/factory generator. This will always require:
some kind of task runner (like Grunt)
or an IDE that supports templates.
Since you don't seem to like grunt (grunt IS AWESOME), these IDEs might help you...
Eclipse supports template, you can find some here
IntelliJ's PHPStorm or WebStorm have a feature called Live Templates which, IMHO, are far better than eclipse. You can find some premade templates here, but is easy to roll your own, as explained in this tutorial.
If you want a command line interface but not Yeoman's, you might want to have a look at the "Generation" section of this collection. As of today, it has one option that uses Lineman and two that made their own CLI, but they use bower. Anyway, if what you're looking for exists, it should be in there somewhere.
I'm following angular docs about animations and the approach is like that:
html
<div ngview class="animate">
css
.animate.ng-enter{
...
}
.animate.ng-leave{
...
}
But following this page, the aproach for the same case is something like that:
html
<div ngview ng-animate="'animate'">
css
.animate-enter{
...
}
.animate-leave{
...
}
I would to know the difference about these two approaches, about "best practice", performance and everything...
From what I understand the second page you have listed is just a wrapper for ngAnimation into a directive. I am not even sure if this is official and if is kept up to date with latest angular releases (especially 1.2).
Update: ngAnimate reading through the page on yearofmoo I found this that I think answers your question:
> One of the major reasons why the ngAnimate directive was removed was
because it was difficult to integrate 3rd-party CSS animation
libraries into your code. A good example is with the animate.css
library, which, to make it work with ngAnimate, you would have to
hardcode the combination of CSS classes into the ngAnimate attribute
for each event that takes place. This would be much easier with a
driver or module that you load into your application and boom things
are working.
I think you should be more concerned on where you would like to write your animations (eg CSS3 vs JS) and go with the mainstream way.
You can find a good up to date guide on yearofmoo explaining the different approaches.
You can also watch egghead.io lessons 48-50
Using the directive ng-animate is deprecated: the best practice is that all animations are done by adding classes to elements, as in your first example and link to the Angular docs. A fairly comprehensive guide is available at Year of Moo.
One point to make is that you can still use this to use custom animations defined in javascript. See the Year of Moo article for more information, but they start off as:
myApp.animation('.animate',....
This would be used in cases where you need to support older IE (that doesn't support various CSS transitions/animations), you might want to use a transition from an existing Javascript library, or you might have something very simple Javascript behaviour that still should be treated like an animation (say, adding a class for a few seconds, and then removing it). It's actually a fairly powerful method that allows you to (ab)use Javascript for visual niceties, but keeps it extremely separate from any other logic.
There are three approaches to create animation, css transition, keyframe and JS animation. each has their own pros and cons. You can read this nice article for a comprehensive understandings.
Remastered Animation in AngularJS 1.2 - yearofmoo.com : http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html
I'm looking for a way to organise my js and css libraries in CakePHP 2.4.1, but I cannot seem to find the best way to do it.
In my layout.ctp is a section where all js and css libraries are included. However all libraries are loaded on every page while only some should be loaded per page.
I could define the required libraries in the corresponding controller, but I don't think this is a good MVC practice.
Hope to hear some good advice.
You can load scripts and css on demand directly in the view file.
That way, you will only load in your layout the scripts and/or css needed for your view.
As described here in the documentation : using blocks for scripts and css files
It depends on how much js / css you have. If it's not a huge amount, you should concatenate / minify all your js / css into a single file, and just include that on every page. I use Codekit for this. Mark Story's asset compress plugin is apparently also good, though I haven't used it.
Minified JS / CSS is pretty small.