Maybe a trivial question here (new to Angular) - however can't seem to find any definitive answer.
Am trying a simple script within it and it doesn't seem to work, is a <script> within the ng-view html allowed?
So in my index.html i have the usual:
<ng-view></ng-view>
And in my ng-view (set by /when) - the page shows "Here is my ng-view content" so i know the ng-view works. Just the script isn't working.
<script>
alert('its working')
</script>
Here is my ng-view content
Thanks.
No <script> tags are not read in the view because that's the way jqLite in angular works. If you want scripts in templates to be evaluated, include jQuery before AngularJS. If jQuery is included, the script will be evaluated. Try removing jQuery, and you see the originally observed behavior.
Working Plunker
You will see that if you comment the jQuery script the alert won't work.
Angular jQlite Docs
You can also include the custom JavaScript files in the index page.
Related
Is it possible to create inline templates without a <script> tag?
My problem is that our widget framework removes <script> tags from content, before we can parse them as Angular. So when the app is bootstrapped, the inline templates are not found and ajax requests are made for them, returning 404.
I know most other directives can be used in tag or attribute form, but I have not had any luck trying <ng-template id="foo"> instead of <script type="text/ng-template" id="foo">
I am working with an existing application that I would like to add angular to. The application is using a custom proprietary SPA framework + dojo. The application is built with mainly dojo modules and heavily utilizes AMD modules.
I have imported angular in the head with
<script type="text/javascript" src="lib/angular/angular.js"></script>
I have also added
<html ng-app="myApp">
<script>
angular.module('myApp', [])
</script>
to my index.html.
I have also tried manually bootstrapping via
var app = angular.module('myApp', []);
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
but still
{{1+1}}
Does not evaluate. It remains as {{1+1}}
The only way I get get it to (sort of) work is in my partial view (rendered inside body of index.html) and I manually bootstrap the application via
var app = angular.module('myApp', []);
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
But as soon as I leave the page and come back, the bootstrapping is gone. {{1+1}} shows as {{1+1}} not 2. If I run the above code again, I get an error saying document is already bootstrapped.
No errors are thrown in console..
I am not sure what to try next. Any help? Thanks
Is the page content dynamic, are the other frameworks adding HTML to the page that has Angular syntax in then you are expecting to be evaluated? If so that is the issue.
Please note that Angular is a fully featured framework and that frameworks generally conflict with each other. For Angular to work you need to add Angular code to the page using Angular APIs, such as ng-include, other directives, or a controller and manually compile the HTML being added.
When is the partial view actually rendered?
Unless you actually pass the partial through Angular's $parse service (which happens automatically on bootstrap), Angular can't evaluate the expressions. So, if you are adding the partial to the DOM after the bootstrap, Angular will never process it.
using dojo, you would need to pass the content through the $parse service first, i.e.:
require(["dojo/html"], function(){
content = $parse(someAngularContent);
html.set(node, content);
});
I am using a Bootstrap 3 based template called Unify and implemented Angular JS with ui-routing. Most of it works fine. Just my whole navigation is in the header and I use ng-include to inject the header from a html template file. Them the hover dropdown js plugin does not work anymore. My Code looks something like this.
<header ng-include="'templates/header.html'"></header>
<!--=== Content Part ===-->
<div class="container">
<div class="row" >
<div ui-view autoscroll="false"></div>
</div>
<footer ng-include="'templates/footer.html'"></footer>
and the plugin is called before the tag with the rest of scripts needed.
It works fine when I use the files as is without the Angular JS it also works fine with Angular JS if I don't inject the code but leave it in the index.html as is but not as now.
Hopefully somebody can help me out because I have the same problem with the parallax slider with for convenience sake I just keep in the index.html for now.
Thanks,
Gerd
Thanks to the detailed answer Chris T gave me in another question I found it is a scope related issue. Now I am loading the hover dropdown js within the template file and it works fine.
I ran into the same issue, and tried loading the hover dropdown js in a script tag in the template. That resulted in an error (Like the one here: Can AngularJS ng-include load a Jinja2 processed html on FLASK?)
So instead of doing that, I got it to work by creating a controller for my template and inside the controller I added the drop down hover via:
$('.dropdown-toggle').dropdownHover(options);
Is there a way to make the AngularJS partial views a complete HTML files, so they will be easier to edit
and have Angular strip them to their body content (much like what the RequireJS text plugin does with the strip option)
I will clarify my question since the answer and comments show that it was not clear enough:
currently the content of the partial file is:
<p>{{value}}</p>
i want it to be:
<!doctype html>
<html><head><!-- with all things in the head to make it work stand alone HTML of Angular app --></head>
<body>
<p>{{value}}</p>
</body>
</html>
So that i will be able to work on the partial as a stand alone app
Yes, you can use the ng-view in your template HTML file, something like:
<html ng-app="myApp">
<head>
...
<head>
<body ng-view>
</body>
</html>
Then in your $routeProvider you can use templateURL:, like:
$routeProvider.when('/register', {templateUrl: 'partials/register.html', controller: 'RegisterCtrl'});
The file partials/register.html is a complete HTML file.
So far the only answer i did found for this, is to actually use Angular with require.js - then I can leverage the text plugin and have my partials real apps.
The way to do it is to configure your app to load all templates using the text plugin of require with the strip option, then your views can have html with head and body that are ignored - so you can provide the necessary require.js files (it can share the same require.js configuration as the normal app if it is located at the same level as the normal app - i decided to place them in adjacent folders. but they do need different require.js main - so the main needs to reference the configuration)
Setting this up takes some effort, but it helps me develop large views with a lot of logic in them separately, and then just link them into my app as a view (while maintain the ability to access them separately, mostly for debugging)
I have a simple setup of an angularjs application. The scripts are loaded with requirejs. When loading the application, I get Uncaught Error: No module: myapp in the console.
The scripts are loaded in order scripts.js (requirejs configuration), jquery, angular and then app.
Here is the Plunker.
You need to remove the ng-app directive from the html element. See the updated Plunker.
First, the directive is not necessary, because you already manual bootstrap AngularJS (and ng-app is simply the shortcut to do that).
Second, the reason AngularJS reports the error is because when it processes ng-app (upon document ready event), the module file (in app.js) has not been loaded by RequireJS (that's why you have to do manual bootstrap in the first place).