Mixing global/static views with dynamic views in an Angular JS application - angularjs

I have a Yeoman scaffolded Angular-JS+Twitter Bootstrap seed project. I use the Bootstrap navbar on every page of the site for, you guessed it, navigation.
What is the best way to include this in an Angular project... directly within index.html, as a view? Ideally I ought to encapsulate the entire navbar div as a template and simply call it out, just not sure exactly how to do so.

If it should be included on every 'page', include it in your index.html with ng-include.
You would have something like:
<body>
<div ng-include='"path/to/partials/navbar.html"'></div>
...
</body>

Related

Insert header & footer to template index.html from external file

I have multiple small create-react-app applications and they all have the same header/footer content. At the moment these header/footer are inside each template in public/index.html file.
The problem is that every time I need to update the header/footer content, I'd have to update them all manually in every application.
I was wondering if there is simple way where I could have the header/footer hosted outside of the application and somehow include them in the template at build time.
html
<body>
<%- include http://example.com/header.html %>
<div id="root"></div>
<%- include http://example.com/footer.html %>
</body>
html
header content
<div id="root"></div>
<footer>footer content</footer>
Seems you are new to reactjs. You should learn to use components and it is also a key concept in reactjs. Actually components can define as the building blocks of any React application. A React Component is basically a Javascript class (or a function) which can accept properties(props) as inputs and return a React element which can describe how a User Interface block should appear. React Components help you to split your UI (HTML blocks) into independent and reusable pieces, therefore Components will definitely help you in your case. Please refer to following documentation provided by reactjs.org.
https://reactjs.org/docs/components-and-props.html

Angular JS app in View

How should I proceed when inserting app in a view.
I have a template document the has one app already to control page content. I want to insert other apps in the view. My first app is getting called in the html tag and it is controlling different sections of the page except the view.
Views are another html document that is loaded into a section. Can this other html file contain another app?
I have been trying with include but the app isn't working.
Exemple of code:
<!DOCTYPE html>
<html ng-app="mid" lang="fr">
<nav ng-controller="navCtrl"></nav>
<main><ng-view><ng-view></main>
<footer ng-controller="navCtrl"></footer>
My view would contain :
<div ng-app="my-second-app" ></div>
<div ng-controller="second-app-Ctrl"></div>
Would that work?
When you include your 'My view' to your example code you are nesting AngularJS applications. You can't include another app as view. AngularJS applications cannot be nested within each other.
take look here, and here
It is possible if you use the manual angular bootstrap function, but I find it hard to believe that this is what you want. You don't need to specify another ngapp in the injected view to let him know he is within angular context, he already knows that, anything below the original ng-app you specified is automatically in angular context.
Using another angular app within an angular app should only make things complicated and probably unnecessary especially if you are new to angular.
Any way keep it simple , try using the developers guide in http://angular.org , they should give you a sense of how to start.

Where to place ng-app in Blade

I've just started the process of learning Angular and I'm a bit stumped. Currently, I have a master blade template that I use site wide in my Laravel app. Here is the pertinent piece.
<body>
#include('navbar')
#yield('content')
#yield('content2')
</body>
In order to use AngularJS, I have to place the tag ng-app in the body line. If I have several pages that use different pieces of AngularJS code, how can I change the tag?
I'm hoping that someone has an idea. Help.
Thanks in advance.
ng-app can be placed anywhere, on any element.
So, if you have one app for navbar, simply add ng-app="navbarApp" to the top most element of your navbar template.
As an aside, I would recommend reconsidering using separate apps, and instead focus on one app with several controls for various portions of your application. This way the body element is your ng-app element, and the top most element of your navbar template is simply a ng-controller element.
Then you set a <div ng-view> element under your navbar and you can either assign each of your content includes it's own controller and still load as a single page, or you simply load the page with only the navbar portion and dynamically load views into this portion by performing simple controller routing.
This simplifies the views structure on the server side since you no longer have to worry about creating layout templates for every potential combination of components. Just create the components and let the front-end load the components where needed.
Note: This is assuming you are building an application that doesn't require SEO capabilities.

angular-route not working with nested controllers

I have an angular page with the following structure:
<div ng-controller="MainCtrl">
<div ng-controller="HeaderCtrl">
<div ng-view>
The problem is, any links located within MainCtrl div and outside HeaderCtrl div work well, but the links inside HeaderCtrl, for some reason, cause a full page reload, instead of being intercepted and handled by Angular client side router.
What am I doing wrong? how do I prevent this?
Thank you.
I must add I am using html5mode.
EDIT: OK it was some crappy hiden non-angular JS changing the onclick attribute.
You should look at the ui-router to handle nested controllers. The basic ng-router handle it not gracefully and cause bugs likes yours.
ui-router API is very close from ng-router making it simple to switch to it. It will fix your bug and allow you to use nested templates / controllers inside your routes.
OK it was some crappy hiden non-angular JS changing the onclick attribute.

AngularJS Having multiple views alternative

I am currently having one
<div ng-view></div>
inside my AngularJS application index.html, where I load different templates based on different routes and I was wondering if it is possible to have something like components/ mutltiple views or whatever in index.html so that I can load more than one templates in the same page. For example (Login, newsletter...etc). Thanks
I already know that you can only have one ng-view so I am looking for alternative solutions

Resources