Is there a way to make the AngularJS partial views a complete HTML files, so they will be easier to edit
and have Angular strip them to their body content (much like what the RequireJS text plugin does with the strip option)
I will clarify my question since the answer and comments show that it was not clear enough:
currently the content of the partial file is:
<p>{{value}}</p>
i want it to be:
<!doctype html>
<html><head><!-- with all things in the head to make it work stand alone HTML of Angular app --></head>
<body>
<p>{{value}}</p>
</body>
</html>
So that i will be able to work on the partial as a stand alone app
Yes, you can use the ng-view in your template HTML file, something like:
<html ng-app="myApp">
<head>
...
<head>
<body ng-view>
</body>
</html>
Then in your $routeProvider you can use templateURL:, like:
$routeProvider.when('/register', {templateUrl: 'partials/register.html', controller: 'RegisterCtrl'});
The file partials/register.html is a complete HTML file.
So far the only answer i did found for this, is to actually use Angular with require.js - then I can leverage the text plugin and have my partials real apps.
The way to do it is to configure your app to load all templates using the text plugin of require with the strip option, then your views can have html with head and body that are ignored - so you can provide the necessary require.js files (it can share the same require.js configuration as the normal app if it is located at the same level as the normal app - i decided to place them in adjacent folders. but they do need different require.js main - so the main needs to reference the configuration)
Setting this up takes some effort, but it helps me develop large views with a lot of logic in them separately, and then just link them into my app as a view (while maintain the ability to access them separately, mostly for debugging)
Related
Maybe a trivial question here (new to Angular) - however can't seem to find any definitive answer.
Am trying a simple script within it and it doesn't seem to work, is a <script> within the ng-view html allowed?
So in my index.html i have the usual:
<ng-view></ng-view>
And in my ng-view (set by /when) - the page shows "Here is my ng-view content" so i know the ng-view works. Just the script isn't working.
<script>
alert('its working')
</script>
Here is my ng-view content
Thanks.
No <script> tags are not read in the view because that's the way jqLite in angular works. If you want scripts in templates to be evaluated, include jQuery before AngularJS. If jQuery is included, the script will be evaluated. Try removing jQuery, and you see the originally observed behavior.
Working Plunker
You will see that if you comment the jQuery script the alert won't work.
Angular jQlite Docs
You can also include the custom JavaScript files in the index page.
I use $routeProvider and load views HTML via <div ng-view></div>.
In loaded file HTML there is HTML:
<script src="/public/js/tags/tokenize/jquery.tokenize.js"></script>
<link href="/public/js/tags/tokenize/jquery.tokenize.css" rel="stylesheet" type="text/css">
But these files are not connected in page. Also JS does not exicute on ng-view
This is because Angular thinks your <script> is the directive script. You have two possible solutions:
create a directive
include your code out of the app.
If you need to dinamically load your resources use a service, as suggested in this question.
Also, for reference, take a look to this question too
I am working on a little interface built around AngularJS. I have an index.html file and I built a route to a base.html file (using ng-view) which contains several elements including a Morris chart.
However, when I launch my index.html everything from the base.html is displayed... except the chart. And I have the following error in the console :
Error: Graph container element not found
So I tried, to move my scripts morris.js (and 2 others) to the base.html juste after my element (that will contain the chart) is created but it doesn't work neither.
index.html
<!DOCTYPE html>
<div ng-app="pistApp" ng-controller="MainController" id="wrapper">
<div ng-view id="page-wrapper">
</div>
</div>
base.html
<!-- other elements who works but I simplify -->
<div id="morris-area-chart"></div>
Problem solved thanks to Angularjs does not load scripts within ng-view
I just had to include jQuery before angular script.
Include in your project-'raphael/raphael.js','morris.js/morris.js', 'angular-morris-chart/src/angular-morris-chart.js','morris.js/morris.css'
These files will be in your bower_components after the bower install angular-morris-chart.
Try examples in https://angular-morris-chart.stpa.co/
it will work.
In my angular project, I am planning to have a separate .js file for each page and a separate .js file for each service.
However, as I begin to code, I realized that I have a lot of import statement in my index.html. This would cause user having to load all the .js file even if they might not need it.
An example of the .js for my index.html
<!-- JS -->
<script src="js/vendor/angular.js"></script>
<script src="js/app/app.js" ></script>
<!-- controllers -->
<script src="js/app/controllers/roomController.js"></script>
<script src="js/app/controllers/dashBoardController.js"></script>
<!-- services -->
<script src="js/app/services/dashBoardService.js"></script>
<script src="js/app/services/roomService.js"></script>
<script src="js/app/services/chatService.js"></script>
<script src="js/app/services/videoService.js"></script>
Is there any solution to this?
It's really a best practice to have each controller, each service, each directive… in a separate file, so you're doing it in the right way.
However, as you notice, it's better for the user (and for the server!) to download a minimal number of files. Your index.html is fine for development, but in production, you must compress all your files in in one, typically with a tool like UglifyJS or YUI Compressor.
This is a known issue, especially with large projects. A viable solution is using RequireJs . You can find plenty of resources on the web about that, for instance you can try this.
I had exactly the same problem so decided to use RequireJS to allow on-demand loading of my angularJS scripts. I created a wrapper called angularAMD that hopefully can help you integrate RequireJS and AngularJS:
http://marcoslin.github.io/angularAMD/
I have been working on an angular.js app that is growing wit many controllers,
all of the files are included in the index.html file, even if the current view does not use one of them, this apply to providers and other modules too.
how do i call only the controller that is needed depending on the routes, in the index.html?
i have an index.html file with the many script tags:
<script src="controller1.js"></script>
<script src="controller2.js"></script>
<script src="controller3.js"></script>
Update:
A better explanation of the question + answer.
http://weblogs.asp.net/dwahlin/archive/2013/05/22/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs.aspx
What you are looking for is asynchronous modules and a loader that can pull them from the server. RequireJS is the first one that springs to mind. A seed project with examples of how to marry RequireJS and AngularJS can be found here.
You should let angular handle it for you, based on the route or url. you best option is to look at the routeProvider, the documentation is here.
usage looks like this:
$routeProvider.when('/Book/:bookId/ch/:chapterId', {
templateUrl: 'chapter.html',
controller: ChapterCntl
});
Another option would be using Ui router, which is an extension of the routeprovider. here is the project page.