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.
Related
I'm learning Angular on Plural Sight and the first lesson gives an example of how to use the ng-app directive.
Here's a link to the Plunker editor
http://plnkr.co/edit/HIDCS8A9CR1jnAIDR0Zb?p=preview
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="2.0.0"
src="https://code.angularjs.org/2.0.0-snapshot/angular2.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app>
<h1>Hello Plunker!</h1>
{{ 843 /42 }}
</body>
</html>
The example that was given uses the expression {{ 843 / 42 }} to demonstrate how angular would render the quotient on a webpage.
I've copied the lesson script several times over and can't figure out what I'm doing wrong and why its rendering as text.
This is my first post on stackoverflow, and I'm happy to join the community!
Thanks Again.
Shamus
Your Angular is throwing an error when its running.
You need to import the system library.
See in the dev console.
Checkout this link to get yourself setup
Thanks so much for your answers! I was able to figure out that when plunker adds the angular package, the default url is pointing to Angular 2.x. instead of 1.x as mentioned by "developer033" I went to the angular site and directly borrowed the CDN link from their setup page:
https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js
And now it seems to work just fine. When you're getting started its always a bit frustrating when you spend the most time on the tiniest issues, but I'm glad I found stackoverflow to eliminate most of that guess work.
Thanks again!
Shamus
I know it is a little bit noob question, but I just wanted to ask, that is it a good or a bad practice if I have too many controllers. Let's say I have a web app, that has around 12 views. Each view has it's own controller (and i didn't talk about the modals controllers I have too). I'm using the ng-view directive for "templating". I just to get some advice, that is it good or just really bad way to make it.
index.html
<html ng-app="myApp">
<head>
.... <!-- Styles and others -->
</head>
<body>
<div ng-view="true">
</div>
<script src="angular/angula.min.js">
<script src="app.js">
<script src="controllers/firstController.js">
<script src="controllers/secondController.js">
<script src="controllers/thirdController.js">
.
.
<script src="controllers/eleventhController.js">
<script src="factory/mainFactory.js">
</body>
</html>
My app.js has the routing functions (Routeproviders etc.).
Thank you very much!
Breaking things down in to small components is good, but you need a way of combining things for production deployment - see for example https://egghead.io/series/angular-automation-with-gulp
As there isn't much information about Aurelia framework I got stuck with these 2 questions.
Is it possible to create multiple Aurelia apps on single page and
how this can be achieved?
Alternatively is there a way to call out single application templates in 2 different places outside the main app container?
For example I want to use Aurelia SPA in CMS system and call it out in different elements like header, main container and aside container.
Yep, just add two elements to the page with an aurelia-app attribute.
Here's an example: https://gist.run?id=2d310abbbea337fb5f6d110ec807f7d2
<!doctype html>
<html>
<head>
<title>Aurelia</title>
</head>
<body>
<div aurelia-app="main1">
<h1>Loading...</h1>
</div>
<div aurelia-app="main2">
<h1>Loading...</h1>
</div>
...
</body>
</html>
I have been experimenting with the Tizen SDK for Wearables and mixing that with AngularJS. We have had good results, great performance and not many complaints with it. Though we do have an issue with the template system in Angular not mixing with how Tizen likes its formats.
We created a template called home.html, using UI Router we gave it a state and everything. Works great and displays.
<div class="ui-content">
<div id="hsectionchangerPage">
<div id="changer">
<div>
<section>
Section 1
</section>
<section>
Section 2
</section>
</div>
</div>
<script src="/assets/js/lib/section.js"></script>
</div>
</div>
Now here is the issue, in Angular (without jQuery) you cannot have that script tag. It will ignore it and not even bother loading it with the templates. So I tried adding jQuery and it does not seem to want to add page listeners to the mix either. It freaks out and does not know what to do with the page for some reason. Has anyone else experienced this issue? Or attempted to do something like this? Please let me know!
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.