I am working on angularjs project that I generated using yeoman angular generator.
I have a jQuery function that I need to use in most of my html views.
A possible solution is to add this function to a script.js file for example, and add this file as reference in the html views that require this function. However, I don't think this solution is good.
When yeoman generates an angularjs project, in its index.html file, it adds a section
<!-- build:js({.tmp,app}) scripts/scripts.js -->
within this section, the different script files are added since as I think, on build, those files will be unified in a single scripts/scripts.js file.
I tried to do the same by adding the function to a script file, and added the reference of the this script file to this section. The problem is that the function is not working when I try to call it from any view.
What can I do to solve it?
DOM manipulation is done with directives in angularjs you will need to check out the docs: https://docs.angularjs.org/guide/directive
If you are not manipulating the DOM you can create a service that can be injected into any controller.
Services documentation: https://docs.angularjs.org/guide/services
from there you can assign a function in the controller to the scope that can be accessed in the view. e.g.
$scope.MyFunction = function(){
// Code goes here
}
you can call the function in the html as
<div ng-click="MyFunction()"></div>
Related
I have a project which is not using any method for including angular code other then loading them directly into our html page (and won't get permission to include any tool for awhile from my manager).
Currently if I want to use a provided javascript/angular/bootstrap element I would simply include it in my index.html, something like:
<script type="text/javascript" src="../lib/angular/angular-file.js"/>
I am now writing a directive. In the html template I want to use an already written third party angular directive to provide a tree view. I thus would want to include this script within my directives html template to insure it's loaded, rather then trusting this to the index.html has already loaded the script.
However, I don't want to use a relative path, or at least am afraid doing so will cause my directive to break later. the html template for my directive is buried under a tree structure, something like " portal/modules/simulation/templates/whatever" I don't want to have to place "../../../../../lib" in the template because it's ugly, but also because there is a chance that we may move the angular files around and I don't wan that to break my directive.
Is there a cleaner way of including the library without making a presumption about multuple layers of file structure, some way to work relative to the 'top layer' of my file structure etc?
is it considered clean for my directive to have it's own lib directory that contains the third party angular directive, rather then being part of shared lib directory? For that mater I believe that the third party tree view directive I'm using is dependent on other angular and jquery code, so I don't know if I may accidentally be dependent on something in the top level index.html file loading some angular/jquery code my directive uses without realizing it. Am I over worrying about making my directive stand alone when I shouldn't?
Generally I pack up templates using grunt and grunt-angular-templates. If you use something like this, you can reference your template as myModule/fileNameOfTemplate, and since the template is already in memory (using the $templateCache) you don't make any extra requests and the code doesn't care at all about the path to the actual file.
Without adding extra modules, build steps, etc...
foo.js
var fooModule = angular.module('foo', []);
fooModule.run(['$templateCache', function ($templateCache) {
$templateCache.put("foo/mytemplate.hmtl", "Really" +
"really" +
"long" +
"string");
}])
fooModule.directive('bar', function () {
return {
templateUrl: 'foo/mytemplate.html'
}
});
Now it doesn't matter where you store the module - you're just pulling the file out of the template cache.
Alternatively, templateUrl can accept a function - you could write a function to determine the path of the module or something.. but that's going to be super brittle.
I am trying to include a search box provided in this local source: http://dnauck.github.io/angular-advanced-searchbox/
I went through all the steps, but I can't figure out how to properly complete this last step:
The angular-advanced-searchbox directive uses an external template stored in angular-advanced-searchbox.html. Host it in a place accessible to your page and set the template-url attribute. Note that the url param can be a scope variable as well as a hard-coded string.
Any help would be great. Thanks
It basically mean that you can create your own template (With your own style and structure) instead of the default. How?
This is the default template the module is using: https://github.com/dnauck/angular-advanced-searchbox/blob/master/src/angular-advanced-searchbox.html
You can use change this template structure (But you should keep the directives that the module need to run) and use it instead of the default template, by wrapping it with <script type="text/ng-template" id="myNewTemplateName.html"></script>:
<script type="text/ng-template" id="myNewTemplateName.html">
<!-- PUT HERE YOUR NEW TEMPLATE -->
</script>
And then you need to introduce your template to the module:
<nit-advanced-searchbox
ng-model="searchParams"
parameters="availableSearchParams"
template-url="myNewTemplateName.html" <!-- NOTE THE TEMPLATE DECLARATION -->
placeholder="Search...">
</nit-advanced-searchbox>
There are additional ways to include and reuse templates in your app - see $templateCache documentation to learn more. There is also this tutorial about templates.
If you look at the source file on the github page, you can see what he means. You can set the template url by the string 'angular-advanced-searchbox.html' which is a relative path to the html file in the same folder, or you can set it by the attribute templateUrl by referring to attr.templateUrl. This would be a string set when you call the directive in your html file as in <nit-advanced-searchbox template-url="templatUrlString'/>
I am currently using 1.5.3 AngularJS Version & ng-include="'file.html'" is not working
<!DOCTYPE html>
<html lang="en-US" ng-app="myApp">
<head>
<!-- Include AngularJS Files -->
<script src="vendor/AngularJS/angular.min.js"></script>
<title>Website Title</title>
</head>
<body>
<!-- Include Content.html to index.html -->
<header ng-include="'content.html'"></header>
</body>
</html>
When i run this code it doesnt show anything on index.php
content.html exists with:
<h1>Hello, this is my website.</h1>
It will just not work.
my plunker code to see how i am doing it
plnkr.co/edit/OagoGf8AavIRxFgGVZSl
You have to have to use angular.module to have angular bootstrap your application to the dom. This is how angular starts.
The format is
angular to call angular,
.module to specify to angular which module you are looking for,
('myapp' the name of the module
, []) to specify any dependencies your app has. You can attach all sorts of stuff to your app which is extremely useful.
altogether, that's angular.module('myApp', [])
Note, you can hook into your app without re-bootstrapping at anytime with angular.module('myApp') without the array of dependencies. This will retrieve your application without instantiating it. Then you can chain controllers, factories, whatever to it like this:
angular.module('myApp').controller('MyCtrl', function($scope) {})
It looks like you're coming from PHP, so you're in for a real treat once you start using angular. Good luck with your app!
Here, I edited your plunker: http://plnkr.co/edit/fQnngC49d5QsHAzti7Nc
just take a look at console errors?
Plunker says that there is no module "myApp". So, you didn't include any .js files in plunker.
Actually I didn't know, is angular work right way without any js, but in normal case you should define the main app module and controllers for each page
Angular isn't actually running on that page. Just including angular in your <head> isn't quite enough.
Here's what you've done so far:
Define an HTML file that pulls in the angular library.
Write HTML that tells the page that it should be using the angular module myApp.
What you need to do now is simply create that module. To so this, just create a javascript file with one line:
angular.module('myApp', []);
This creates an angular app called myApp on the global scope. Then add a <script> tag to include the new .js file in your index.html. That's it! Now Angular will look at you HTML file, see that you want the app myApp to run on the HTML, and it will find that app in your new JS file.
Here's your plunkr updated
Hope this helps.
In C programs, it is easy to add a header file containing a set of library functions.
#include "ownlib.h";
In node.js, it is just as easy.
require('./ownlib.js');
I am trying to do the same for a AngularJS controller but there seems no easy to do it. What I do now is to add functions like those below at the bottom of my Angularjs controller controllers.js. Unfortunately, this make the controller file grow huge over time.
function convertXXXToJson(obj) {
...
return output;
}
function convertYYYToJson(obj) {
...
return output;
}
How to conveniently add an external library file to an angularjs controller?
It will be a nightmare if I have to create a module and do dependency injectancy for each external library file.
You can just add the new functions in a separate file or multiple files and include them through script tag in your html file and you are done.
<script href="controllers-part1.js"></script>
<script href="controllers-part2.js"></script>
Now coming to the order in which you need to include the script tags in your html file. The order matters if you are executing something in your controllers.js immediately, and it uses some functions defined in controllers-part<x>.js. Then in that you need to include controller-part<x>.js files before controllers.js. Otherwise you can include them in any order.
When $compile-ing an angular HTML template string I'm trying to put additional controllers and directives inside a <script> tag and use those in the HTML template.
This way I'm essentially trying to implement some sort of plug-in-mechanism, so that I can load external files that augment my app's functionality.
The <script> tag does actually get evaluated, but my problem is, that the HTML template compilation takes place before the evaluation of the JavaScript. So the compiler complains about missing controllers.
Example:
http://plnkr.co/edit/8oZYhRHAjP84ecnl6hG3?p=preview
This example throws an error: Error: Argument 'Controller' is not a function, got undefined
If you delete lines 15-18 (the HTML that references the created conroller) in app.js, you can see in the console that creating a controller this way does actually work.
I finally managed to do it based on the solution in Loading an AngularJS controller dynamically.
Thx #JoseM, #MaximShoustin and #JussiKosunen for your hints and help.
http://plnkr.co/edit/fzmEZlP6bGBJqTOkfApH?p=preview