I am loading an HTML file through JS, this file is containing AngularJS content which doesn't work.
<div ng-app="MyApp.firstElement" ng-controller="ControllerOne" id="firstElement">
AngularJS content
</div>
<div ng-app="MyApp.secondElement" ng-controller="ControllerTwo">
AngularJS content
</div>
<script src="loadContent.js"></script>
loadContent.js:
$(document).ready(function() {
$("#firstElement").load("includedContent.html");
})
includedContent.html:
<md-sidenav>
<md-content>
...
</md-content>
</md-sidenav>
As you can see, I have a ng-app in each div. The angular scripts & css are included in the page. But the loaded angular content isn't working.
The only way I found to make it work, is to directly paste the code from includedContent.html into the main HTML:
<div ng-app="MyApp.firstElement" ng-controller="ControllerOne" id="firstElement">
<md-sidenav>
<md-content>
...
</md-content>
</md-sidenav>
</div>
<div ng-app="MyApp.secondElement" ng-controller="ControllerTwo">
AngularJS content
</div>
<script src="loadContent.js"></script>
It does not work that way.
1/ You just need one ng-app attribute (ideally on your html element)
2/ If you want to load a template you should use directive and not load it using external .js file.
3/ Try not to use Jquery and stick to Angular. What's the point in having Angular when you want to mainpulate DOM using Jquery
Have a look at https://docs.angularjs.org/guide/directive and https://docs.angularjs.org/guide/bootstrap.
When reading about directives have a look at 'directive definition object' properties ex. template/templateUrl (that's where you can get you template) and compile post funnction (aka. link function) that will allow you to interact with your element which is a Jquery object (or JqLite object if you don't have your Jquery loaded before angular).
No need to load HTML using JS. HTML can be loaded in angular way using "ng-include='PATH_TO_FILE'" built in angular directive
<div ng-app="MyApp.firstElement" ng-controller="ControllerOne" id="firstElement" ng-include="'includedContent.html'">
AngularJS content
</div>
Related
Am a Starter in angularjs. Having 5 more pages controlled over uiview to get the pages.
I need to change the style from container to container-fluid where i used uiview in index page.
In html,
<div class="container" ui-view> </div>
For only one page i need to change the class to container-fluid.
I tried like this.
In html,
<div ng-class="{container-fluid: clearance}" ui-view> </div>
In controller i mentioned,
$scope.clearance= true;
It does not renders the ngclass. Can anyone please help on this.
An object property name can't have a - in it without quoting that whole name
Try
<div ng-class="{'container-fluid': clearance}" ui-view> </div>
Also depends which controller you are referring to. If it is the controller referenced in the routing config, then it will only have scope inside the ui-view
I'm a newbie in Angular JS(I'm using #1.5.8)and I'm following the docs.angularjs.org/tutorial tutorials.
I've the html
<div class="jumbotron">
<h1>{{application_name | uppercase }}</h1>
<p class="lead" >
</div>
where is set in main.js
$scope.application_name='app';
everything is going well, but every time I reload manually(refresh localhost page) or with gulp, the page renders earlier the html,the user sees application_name printed in big and after is rendered with the wanted value.
My question is :
is there a way to avoid showing Angular js expressions when rendering the page for first time?
I want that when I go to the localhost page, the page shows app and not
application_name
You can avoid it by not using brackets...
<div class="jumbotron">
<h1 ng-bind="application_name | uppercase"></h1>
<p class="lead" >
</div>
As Stephen C commented above you can also use ngcloak..
<div class="jumbotron" ng-cloak>
<h1>{{ application_name | uppercase }}</h1>
<p class="lead" >
</div>
Here is a great link about the difference between cloak and bind. Differences between ng-bind and ng-cloak in angularjs
In summary, directly from that link:
ngBind
The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and
to update the text content when the value of that expression changes.
ngCloak
The ngCloak directive is used to prevent the Angular html template
from being briefly displayed by the browser in its raw (uncompiled)
form while your application is loading. Use this directive to avoid
the undesirable flicker effect caused by the html template display.
Use ng-bind , this will show only value after parsing.
<div class="jumbotron">
<h1 ng-bind="application_name | uppercase"></h1>
<p class="lead" >
</div>
You can use ngCloak directive.
The ngCloak directive is used to prevent the Angular html template
from being briefly displayed by the browser in its raw (uncompiled)
form while your application is loading. Use this directive to avoid
the undesirable flicker effect caused by the html template display.
<div class="jumbotron">
<h1 ng-cloak>{{application_name | uppercase }}</h1>
<p class="lead" >
</div>
You should use ng-bind when you can => When you dont need a two-way binding but a one-way only.
The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.
You can also use ng-cloack
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
I took example from angularjs.org:
<script type="text/ng-template" id="/tpl.html">
Content of the template.
</script>
<a ng-click="currentTpl='/tpl.html'" id="tpl-link">Load inlined template</a>
<div id="tpl-content" ng-include src="currentTpl"></div>
but by click i can add only one template.
How can i append several templates to div id="tpl-content" and how to append first, last, before etc. like with Jquery?
Help please
I have an AngularJS application that has a list of contents on the menu. When the user clicks on an item on the menu, the content loads on the main view. There are multiple content types:
When "1" is clicked, a video is loaded. When "2" is clicked, a PDF document is loaded, and so on. Content types may repeat and be complex.
Now, I am setting $scope.content when an item is clicked and, depending on its contentType, I'm calling a different directive:
<div class="content" ng-switch on="content.contentType">
<div ng-switch-when="video">
<videoplayer-directive video="content"></videoplayer-directive>
</div>
<div ng-switch-when="pdf">
<pdfreader-directive pdf="content"></pdfreader-directive>
</div>
<div ng-switch-when="...">
<...-directive content="content"></...-directive>
</div>
</div>
Now I have two problems:
When the page is loaded, all the directive templates are automatically loaded. Even if I don't have a PDF in the menu, the pdf template and scripts will be loaded.
Searching for it, I learned that directives should be tiny, not entire modules of my app.
How do I rewrite the switch above so I can comply with the best practices and load the templates and scripts only when needed?
This is exactly what UI-Router is for: Angular UI Router
Decent tutorial on scotch.io
An easier drop-in replacement for your code may be to simply use ng-if. Ng-if won't instantiate the directive until it's called. Just make sure that your directives aren't transcluding the outer div- if that's the case, shut transclusion off, or add another div to wrap them.
<div class="content">
<div ng-if="content.contentType=='video'">
<videoplayer-directive video="content"></videoplayer-directive>
</div>
<div ng-if="content.contentType=='pdf'">
<pdfreader-directive pdf="content"></pdfreader-directive>
</div>
<div ng-if="content.contentType=='...'">
<...-directive content="content"></...-directive>
</div>
</div>
I have a html template that is being used for multiple projects. In that template I have two places where I can set the content.
The layout is something similar to this:
<body>
<div>Navbar from TEMPLATE</div>
<div>
<div>other TEMPLATE stuff</div>
<div id="content1">CONTENT can be set here</div>
</div>
<div id="content2">CONTENT can also be set here</div>
</body>
My question is is it possible to use the same angular app in both #content1 and #content2? Can the ng-app="main" be used twice?
If something like this isn't possible to do I can add an ng-app attribute to the template but would rather not have to do this as, as I said, the template is used for multiple projects a lot of which won't be using angular.
Edit:
Just to clarify, I'm using a tal template from zope. In that template I have two fill slots, I would like to use the same angular app in both fill slots without having to change the original tal template if possible.