I have an Angular app. I am creating different widgets in HTML5 as follows.
<html ng-app>
<div ng-controller="widget1">
</div>
<div ng-controller="widget2">
</div>
</html>
How do I autoload widget1.js and widget2.js whenever they appear in the markup? I don't want to stuff <script> tags in the header for each widget. I am new to Angular. How is it actually handled?
Thanks!
Wouldn't a directive be a better option then? You could place the contents of widget1.js and widget2.js in the respective link functions. That way they will only be loaded if the directive is in the markup.
Or so I believe, someone please correct me if I'm wrong.
Related
I am Developing a static responsive HTML website using bootstrap.
There are 10 pages in the website. here i need a menu(navbar) to access all pages, the menu is in the separate html page.
what i need to do is, include that menu.html page into all pages in my website.
I've tried the following,
<div id="menuArea" ng-controller="menuAreaCtrl" ng-view ng-include src="'menu.html'" ></div>
but it is not worked.
I've already include the angular js as same as below:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script>
Thanks in advance...
According to angularjs docs you can use ngInclude
<div ng-include="menu.html"></div>
Don't use ng view
<div id="menuArea" ng-controller="menuAreaCtrl" ng-include src="'menu.html'" ></div>
You can also simply use , something like this :
<?php require("navigation.php"); ?>
I'm working with AngularJS.
One of the (technical) requirements is to fetch the "ng enabled" HTML content from the server, in response to a click event, and inject it into a <div ng-app> via JavaScript.
The problem is that the newly injected HTML is not wired, as Angular goes through the compile and link phases only when the page is loaded the first time.
Is there a way to trigger them manually?
Am I approaching this problem in the wrong way? Is there a more idiomatic way to accomplish what I described?
Thanks
There are multiple ways to inject dynamic content into the view in AngularJS. One of the way to inject dynamic content is to use ng-include directive. It can take an endpoint from where to get view.
You can combine it with ng-if to achieve load view on click. For example:
<span ng-if="clicked">
<div ng-include='pathToTheHtml'></div>
</span>
The clicked variable would be false first, on clicking on the button set it to true, this would trigger ng-include to get the content and inject it into html.
If you want finer control then you need to use the $compile service. The html that needs to be injected into the DOM needs to be compiled and linked to the scope using $compile service. This can be done in a directive.
element.append($compile(htmlFragment)(scope))
angular.bootstrap(element, [modules], [config]);
I tried this in my Angular app, but it does not work. So I tried inserting a custom tag(<mytag>) into the head and made the directive work with this by replacing "head" with "mytag".
This however is not really what I intended, because it adds <mytag> to the body instead of the <head>
Does anyone know how to make it work with the head-tag?
I had the same challenge. Make sure that your angular app is initialized on the html tag. Then this solution works out of the box.
However for us this was not an ideal solution. So I modified Zack Boman (tennisgent) https://github.com/tennisgent/angular-route-styles code, so that it could be used anywhere after app initialization.
Renamed the directive to: zbRouteStyles
Modified the restrict to include attributes: restrict: 'EA'
Changed the line: elem.append($compile(html)(scope));
to
angular.element('head').append($compile(html)(scope));
With these changes I was able to add the directive to any tag after my angular app was initialized even the tag that my app is initialized on.
e.g.:
<div ng-app="myApp" zb-Route-Styles>
<div>
I need to render a simple HTML page as partial within this div.It is a simple HTML5 application, not of MVC architecture hence Html.RenderPartial is not working.Any help??
<div id= "this_div_will_contain_partial">
</div>
Use jquery's load:
<script>
$(function(){
$('#this_div_will_contain_partial').load('http://www.urpartialurl.com');
});
</script>
I have noticed that you haven't included javascript tag but this is the only option to achieve this. Also the page you are trying to access needs to be on the same domain.
I had two different apps in angular. During integration to a single application I had to
nest ng-views.
For sample (index.html) is
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
One of my app view is (view2.html)
<div class="ng-view"></div>
<p>This is the partial for view 1.</p>
{{ 'Current version is v%VERSION%.' | interpolate }}
Now this application has different views once again inside it.
I tried but the page is not loading. Is there a possibility to nest ng-views?
If not Possible can it be explained?
Updated answer:
UI Router (which now sits here: https://angular-ui.github.io/ui-router/site/#/api/ui.router) is generally regarded as the best solution for complex routing in AngularJS.
Original answer:
Nesting views isn't natively possible, as of now, in AngularJS. In my last app, I used a solution derived from here: http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm
Allowing me to effectively nest views (and skipping the limited ng-view altogether)
After doing so, this other (simpler, better, I believe) solution appeared:
http://angular-ui.github.com/ (scroll down to "Route Checking")
Check it out!
I'd suggest that you have a look at the ui-router project by the AngularUI team. This project contains a new router based on states, which can also react to URLs, but allow way better handling of application state.
This includes the use of having multiple and / or nested views.
I had a similar question a while ago, so maybe its answers are going to help you as well: How do I setup nested views in AngularJS?
Moreover, you can expect ui-router to be integrated in AngularJS in a future version, so this will most probably be the way routing works in the future anyway. So no need to stick to other workarounds if you can already have what will be next today :-)
Take a look at this:
https://github.com/angular-ui/ui-router
http://angular-ui.github.io/ui-router/sample/#/
Looks like the thing you are looking for
There are many third party libraries for nested views and routing. ui-router is already mentioned here, I would also suggest to take a look at this one:
http://angular-route-segment.com
It has the nested views capabilities which you ask for exactly, and it is much simpler to use than ui-router. In your example:
index.html:
<div app-view-segment="0"></div>
view1.html:
<p>This is the partial for view 1.</p>
<div app-view-segment="1"></div>
deep-view.html:
<p>This is the partial for view inside view1.</p>
If you do not want to turn to yet another library to solve your problem (not that there's anything wrong with that), you should also look into using directives and ng-switch and ng-show.
This approach was given as an answer here :
angular complex nesting of partials
I sincerely doubt this is idiomatic Angular (and it's mentioned above that there is possible cross-browser issues), but my ng-include solution for having an "all" view with my other views nested inside something like an all.html:
<div class="all" ng-include src="'views/foo.html'" ng-controller="FooCtrl">
</div>
<div class="all" ng-include src="'views/bar.html'" ng-controller="BarCtrl">
</div>
<div class="all" ng-include src="'views/baz.html'" ng-controller="BazCtrl">
</div>
This worked for me but felt like it was going against the grain of the framework. I will personally be trying something like what Eamon links to on my next pass.