Using ng-template and the src attribute - angularjs

I am developing an Angular application that will be hosted within another third party applications' "html view". This application does not have a webserver behind the scenes; instead, it just serves the files locally.
This means that we cannot load partials the normal way (some restriction related to xhr loading files directly from the local file system, see this question I posted a while ago explaining the problem). I've had to make use of the ng-template directive, e.g.
<script type="text/ng-template" id="tpl-mytemplate">
<div> Hello, World!</div>
</script>
What I want to know is if it is possible to use the src attribute so that I do not need to inline all of my partials, resulting in a ridiculously large html page. e.g
<script type="text/ng-template" id="tpl-mytemplate" src="partials/mytemplate.html">
</script>

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.

talk about angularjs structure - how to reduce libs in index.html

As we know, angular is a good MVC framework to build your application with single page, but I'm afraid that if taking too much work in one page, will it be a problem to load lots of javascript libs in index.html? some issue like loading slowly or even performance/network issue.
As my demo below, there's lots of js libs, and about the 'test/restful/restful.js', I want to load it when my router goes to restful.html, but I need to declare the controller in router, in index.html, otherwise the 'RestfulCtrl' cannot be recognized by angular lifecycle, so how to separate resources to reduce the work of index.html, or it is the common defect of single page MVC
The size of your controller is tiny compared to the size of all the libraries (jquery, angular, etc.) you're already loading. Having one HTTP request for each and every controller or service JS file is obviously not a good idea, but you should simply concatenate and minify those at build time, and have a single JS file to load that contains your whole application. So
<script src="app.js"></script>
<script src="FirstCtrl.js"></script>
<script src="SecondCtrl.js"></script>
<script src="FirstService.js"></script>
<script src="SecondService.js"></script>
should become
<script src="myCompleteApp.min.js"></script>
You can also choose to concatenate all the libraries and your own minified application into a single big file if you prefer, which would allow loading a single big JS file containing everything, in a single HTTP request.
Grunt and Gulp are the two main tools used to do that.

How can I change angular-route.js from using Ajax to script-tag loading of partials?

I am making a mobile, AngularJS, cross-browser, offline spa with angular-route.js using no server at all. I feel changing browser defaults to allow Ajax loading of local files unacceptable for my situation. Ideally I would like an external-to-library code work-around that allows loading files via script-tag src attribute manipulation. But, I am willing to explore modifying or extending an open source library file such as angular-route.js if I knew the best version + file + line to start with.
It seems that you need to use $templateCache, you can specify the templates directly in your html using a <script> tag.
<script type="text/ng-template" id"path/to/template.html">...</script>
Of course you will probably want to have each partial in a separate file, in which case you will have to add a task that will make the partials available to $templateCache. There are plugins that will do this for you, take a look at grunt-ng-template.

AngularJS layout management of header

How can I manage my header layouts in AngularJS? Say I have a master layout as such:
<html ng-app>
<header>
<!-- My header Files -->
</header>
<body>
<!-- My content -->
</body>
</html>
Different pages have different javascript/css files that need to run. How can I manage this with AngularJS route? With Laravel blade, layout/templates/partials is really simple. Is there something like that for angular was well?
I am not familar with Laravel Blade. But you should be able to achieve what you need by simple using the ng-view directive.
This is official guide provides details with how to use $routeProvider combined with ngView

Resources