ng-include causes angular issues - javascript

I am having some problems using ng-include. At first I was trying to use it in my project but it caused all the content to repeat indefinitely. Figuring it was something with the way I wired the project I started over. I haven't really added anything except for the angular file and one include and it keeps causing Angular to throw "WARNING: Tried to load angular more than once." and then it times out. No idea what is causing this.
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Website</title>
<!-- FOR ANGULAR ROUTING -->
<base href="/">
<!-- CSS Files-->
<!-- Vendor CSS-->
<link rel="stylesheet" type="text/css" href="../libs/bootstrap/dist/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="../libs/font-awesome/css/font-awesome.css"/>
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<div ng-include src="'navigation.html'"></div>
<!-- JS Files -->
<!-- Vendor JS-->
<script type="text/javascript" src="../libs/angular/angular.js"></script>
</body>
</html>
Ultimately what I want is something like this:
<html ng-app="app">
<head>
</head>
<body>
<div ng-include src="'navigation.html'"></div>
<div ng-include src="'header.html'"></div>
<div ui-view></div>
<div ng-include src="'header.html'"></div>
<script src="../libs/angular/angular.js"></script>
</body>
</html>
Plunker:
http://plnkr.co/edit/kFXFKC0VR5OIxwcpZFue?p=info

While not a true answer, after looking back at this, it is way easier to accomplish this with directives.
even just
.directive('myDirective', function() {
return {
template: '<h1> Hello World</h1>'
};
});
then
<my-directive></my-directive>

Related

Bootstrap CDN not applying

So I'm not sure if it's just because I'm a noob at this or what, but I can't get the bootstrap CDN to work. I copied the CDN from their website and pasted it into the code I was working on, and then a fresh page, as shown below and it's not applying on either. The weird thing is that the CDN from freecodecamp on their bootstrap portion works. What am I doing wrong?
Heres the code
<!doctype HTML>
<html>
<head>
<title>Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<div class="navbar navbar-default">
</div>
</body>
</html>
You need to import jQuery as well (bootstrap uses it) and its best to load it just before your closing tag so that it doesn't block other loading and is then called with a $(document).ready() wrapper.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</body>
</html>

How to load scripts from templates in angularjs

I have index.html with all the source Javascripts and ui-view defined in it.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />
<title>Projects</title>
<link rel="stylesheet" href="resources/css/style.css">
<link rel="stylesheet" href="resources/css/external/c3.min.css">
<link href="resources/css/external/colorpicker.css" rel="stylesheet">
<link href="resources/css/external/googlechart.css" rel="stylesheet">
<script type="text/javascript" src="scripts/dndTree.js"></script>
<!-- Controllers -->
<!-- Controllers for dashboard -->
<script type="text/javascript" src="app/shared/headercontroller.js"></script>
<script type="text/javascript" src="app/views/homepage/project/projectcontroller.js"></script>
<script type="text/javascript" src="app/views/homepage/conceptmodel/cmdboardcontroller.js"></script>
<script type="text/javascript" src="app/views/homepage/repository/repositorycontroller.js"></script>
<script type="text/javascript" src="app/views/homepage/ontology/ontdboardcontroller.js"></script>
<script type="text/javascript" src="app/views/overview/section/component/componentmanager.js"></script>
<script type="text/javascript" src="app/views/overview/section/component/componenttemplate.js"></script>
<!-- document viewer js -->
<script type="text/javascript" src="app/views/analysis/docviewer/manager/docviewermanager.js"></script>
<script type="text/javascript" src="app/views/analysis/docviewer/model/solrdocument.js"></script>
<script type="text/javascript" src="app/views/analysis/docviewer/controller/docviewercontroller.js"></script>
</head>
<body id="db" class="homepage" ng-app="ipaApp">
<ui-view></ui-view>
</body>
</html>
I have around 150 such js files and currently all files are loaded when the webapp loads, resulting in increased loading time. I want to minify all these files and load files related to dashboard in index.html and others in the children templates for better user experience. I tried to move those script in templates but didn't work out. Is it possible to do so? What could be the best way to solve this?
A common approach is to move script tags to the end of the body tag, so this way, the content (html) is loaded and the scripts are loaded the last, so the user experience is better.
Despite the first time it could take some time to completely load all the resources, after that, you'll see the results, since you won't have to load any other resource again the user experience is so much better than if you load some scripts every time in a different template. That would be distribute the initial time in many portions (for every template). Not to mention that you might switch from one template to another more than once (and this way you load again the same resources). This is kind of a matter of perspective and what your final goal is: invest some time at the beginning and not after that, or just divide that time in minor portions, for every template you load.
With the first approach it would be something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />
<title>Projects</title>
<link rel="stylesheet" href="resources/css/style.css">
<link rel="stylesheet" href="resources/css/external/c3.min.css">
<link href="resources/css/external/colorpicker.css" rel="stylesheet">
<link href="resources/css/external/googlechart.css" rel="stylesheet">
</head>
<body id="db" class="homepage" ng-app="ipaApp">
<ui-view></ui-view>
<script type="text/javascript" src="scripts/dndTree.js"></script>
<!-- Controllers -->
<!-- Controllers for dashboard -->
<script type="text/javascript" src="app/shared/headercontroller.js"></script>
<!-- ... -->
<!-- document viewer js -->
<script type="text/javascript" src="app/views/analysis/docviewer/manager/docviewermanager.js"></script>
<!-- ... -->
</body>
</html>
Hope this help :)

Displaying AngularJS content within Views

When I use the following static HTML with views, everything works as I expect it would, shown here:
https://embed.plnkr.co/MJYSP01mz5hMZHlNo2HC/
Now what I am asking, is how do I properly get this angular-ui accordion working properly within the ng-view?
See the accordion I am trying to use here:
http://plnkr.co/edit/1ZWBsbO6sQRnZ7CpPrdz?p=info
And my test plunker here, showing that the HTML shows up in the view, but it lacks JS functionality:
https://plnkr.co/edit/I3myvfH5KUkpfV1aWh72?p=info
<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs#1.5.7" data-semver="1.5.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script data-require="angular-route#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-app="Test">
<div ng-include='"header.html"'></div>
<div ng-view></div>
<div ng-include='"footer.html"'></div>
</body>
</html>
You have to define a controller with the name(PageCtrl) you defined.
app.controller('PageCtrl', [function(){
// Your business logic
alert("In am controller");
}])

Loading AngularJS combined directive templates with NgInclude

I want to include all of my directive templates within a single file to reduce the number of HTTP requests required to load a directive heavy page.
I have this directive
angular.module('bwDirectives', [])
.directive('bwInfoCard', function () {
return {
restrict: 'E',
transclude: false,
replace: true,
scope: { title: '=' },
templateUrl: "one-template",
};
})
If I specify the templates in-line like this then it loads the directive template properly:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Directive Test Fixture</title>
<link rel="stylesheet" href="../Style.css" type="text/css" />
<script src="../../../Libraries/angular.min.js"></script>
<script src="../Widget.js"></script>
<script src="./Fixture.js"></script>
</head>
<body ng-app="BaseWidgetFixtures">
<h1>Base Info Card</h1>
<script type="text/ng-template" id="one-template">
<div>This is first template</div>
</script>
<script type="text/ng-template" id="two-template">
<div>This is second template</div>
</script>
<div ng-controller="InfoCardFixture">
<bw-info-card title="title"></bw-info-card>
</div>
</body>
</html>
If I try to include the templates via NgInclude it however fails. I guess it tries to load the template for the directives before doing NgInclude (even though it is earlier in the file). The correct script tags are getting included on the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Directive Test Fixture</title>
<link rel="stylesheet" href="../Style.css" type="text/css" />
<script src="../../../Libraries/angular.min.js"></script>
<script src="../Widget.js"></script>
<script src="./Fixture.js"></script>
</head>
<body ng-app="BaseWidgetFixtures">
<h1>Base Info Card</h1>
<div ng-include src="'templates.html'"></div>
<div ng-controller="InfoCardFixture">
<bw-info-card title="title"></bw-info-card>
</div>
</body>
</html>
Is there something that I am missing or can you not NgInclude templates for use with directives?
Thanks.
Take a look at this discussing where Pete Bacon Darwin explains the order that directives are linked/compiled. https://groups.google.com/forum/#!topic/angular/3HsNz4ncnYA/discussion. You could probably rearange your html to get this working but this is not really what ng-include was meant to do. I'd recommend using something like angular-templatecache if you don't want to load your templates with AJAX.

Two modules on single page not working in angular js

I am new to angular js . I have two modules first2a,first22. Each modules have one controller model1 and model2.
Below is my Html code
<!DOCTYPE html>
<html >
<head>
<link rel="icon" type="image/png" href="globe/images/correct.png"/>
<link rel="stylesheet" type="text/css" href="globe/css/style.css"/>
<script type="text/javascript" src="globe/script/jquery.js"></script>
<script type="text/javascript" src="globe/script/angular.js"></script>
<script type="text/javascript" src="globe/script/mainscope1.js"></script>
<script type="text/javascript" src="globe/script/angular-route.js"></script>
<title>
Html5 All in One
</title>
</head>
<body >
<!-- MAin page -->
<div ng-app="first22" id="maincontainer" >
<div ng-controller="model1">{{message}}</div>
</div>
<!-- MAin page End-->
<!-- Interactivity page -->
<div id="Interactive_content" ng-app="firsta" >
<div ng-controller="model2">{{message}}</div>
</div>
<!-- Interactivity page End-->
</body>
</html>
mainscope1.js
var first2 = angular.module('first22', []);
first2.controller('model1',function($scope)
{
$scope.message="aaaaaaa";
})
var first2a=angular.module('firsta',[]);
first2a.controller('model2',function($scope)
{
$scope.message="aaaaaaa1";
})
Can anyone explain why firsta module is not working here. Thanks in advance
Try using angular boostrap , to happen when the document is ready:
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('maincontainer'), ['first22']);
angular.bootstrap(document.getElementById('Interactive_content'), ['firsta']);
});
Check this fiddle
You can only use ng-app once per page. Are you trying to create two separate web applications side by side on this page, or are you only trying to have two controllers within a single application?
If you really want them to be a single application (which is what you normally would want), you set ng-app so that both ng-controller directives are inside it. For example, you can set ng-app on the html-tag, the body-tag or a div that wraps it.
<!DOCTYPE html>
<html >
<head>
<link rel="icon" type="image/png" href="globe/images/correct.png"/>
<link rel="stylesheet" type="text/css" href="globe/css/style.css"/>
<script type="text/javascript" src="globe/script/jquery.js"></script>
<script type="text/javascript" src="globe/script/angular.js"></script>
<script type="text/javascript" src="globe/script/mainscope1.js"></script>
<script type="text/javascript" src="globe/script/angular-route.js"></script>
<title>
Html5 All in One
</title>
</head>
<body ng-app="myAngularApplication">
<!-- MAin page -->
<div id="maincontainer" >
<div ng-controller="model1">{{message}}</div>
</div>
<!-- MAin page End-->
<!-- Interactivity page -->
<div id="Interactive_content" >
<div ng-controller="model2">{{message}}</div>
</div>
<!-- Interactivity page End-->
</body>
</html>
And the javascript would be:
var first2 = angular.module('myAngularApplication', []);
first2.controller('model1',function($scope)
{
$scope.message="aaaaaaa";
});
first2.controller('model2',function($scope)
{
$scope.message="aaaaaaa1";
});
OR, if you want to create two fully separated applications on the same page, you need to bootstrap them manually without using ng-app. Please see this SO question for details on how to do that.
Possible duplicate of this question:
https://stackoverflow.com/a/12864137/1177295
Only one AngularJS application can be auto-bootstrapped per HTML
document. The first ngApp found in the document will be used to define
the root element to auto-bootstrap as an application. To run multiple
applications in an HTML document you must manually bootstrap them
using angular.bootstrap instead. AngularJS applications cannot be
nested within each other. --
http://docs.angularjs.org/api/ng.directive:ngApp

Categories

Resources