I have the index.html with ng-view inside. I have imported respective .js file to the index.html but those .js not getting applied on injected view.
index.html
<!DOCTYPE html>
<html class="no-js css-menubar" lang="en" >
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<title>gg</title>
<!-- Scripts -->
<script src="js/userdat.js"></script>
</head>
<body class="dashboard site-menubar-push" ng-app="app">
<h1>Header</h1>
<ng-view></ng-view>
<script src="assets/js/jquery-1.9.1.js"></script>
<script src="assets/js/jquery.mobile-1.4.2.js"></script>
<!-- AngularJS Angular-route -->
<!--Angular linking -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-route.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-resource.js">
</script>
</body>
</html>
The line <script src="js/userdat.js"></script> has jQuery stuff and it loads perfectly but the logic return in it not working on ng-view injected ui elements.if i import it in partials it works fine but not stable, Do you know How can I import it properly.
partials.html
<script src="js/userdat.js"></script>
<div class="jumbotron text-center">
<h1>Home Page 4 Life</h1>
<p>hi</p>
</div>
Either place all the CDN includes (jquery, angular, ...) in the <head> element or place the the userdat.js at the bottom of the <body>.
Note that you if you're accessing DOM elements with JQuery that are injected into the ng-view, you'll need to listen to $routeChangeSuccess events because the html is modified after an angular digest.
The best way to do this would be using RequireJS, but it's going to be pretty tough if your project is already big.
With RequireJS you could even add a resolve to the route:
resolve: {
userdat: function($q) {
var deferred = $q.defer();
require(['./js/userdat.js'], function(userdat) {
deferred.resolve(userdat);
});
return deferred;
}
}
If implementing RequireJS is too hard, I would just hardcode the code into the view.
Related
I have a navbar I am trying to inject into a main page. I ran the page and checked F12 > Network which showed that the directive's templateURL (navbar.html) was either not called or not injected. There are no errors. Anyone have any idea what might be wrong with my code?
The directory structure is:
landingpage.html
js
controllers
NavController.js
directives
navappDirective.js
app.js
templates
navbar.html
Below is the code:
landingpage.html
<html>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--<link href="../css/landingpage.css" rel="stylesheet">-->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<script type="text/javascript">
alert("this works");
</script>-->
<body>
<div>
<navbar ></navbar>
</div>
<!-- Insert navbar-->
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/NavController.js"></script>
<!-- Directives -->
<script src="js/directives/navappDirective.js"></script>
</body>
navappDirective.js
navapp.directive('navbar', function() {
return {
restrict: 'E',
scope: {
},
/*template: '<p>Hi</p>'*/
templateUrl: 'templates/navbar.html'
};
});
navbar.html just has a paragraph currently for testing purposes.
Thanks
ng-app is missing in landingpage.html
In you landingpage.html, please update it as below
<body ng-app="myapp">
In app.js, you probably should have
angular.module('myapp',[]);
Thank You everyone!
I had ng-app called in navbar because that is where I was using the controller information and thought that would work.
The problem was solved with the following steps:
Changed the templateURL to ../../templates/navbar.html
Called the ng-app directive on the landingpage.html This allows the page to call the app. The still have the ng-controller directive in navbar for encapsulation purposes.
After the above steps I still got a cross referencing error since you cannot call a html file from a file system. So I ran a python server using python -m http.server (for Python 3) after cd'ing to the directory holding my project. Then I could run my project using localhost:8000/
I have a <script src=""> outside my ng-view, the script itself is a jQuery function that changes the content inside the ng-view, but it is not working unless I put the <script src=""> inside the html page I am rendering. This is fairly annoying and breaking the DRY rule (Don't repeat yourself) because I have to put said script in all of my html files now, since putting it at the bottom of my index.html is not working.
Here's my index.html
<!DOCTYPE html>
<html ng-app="enitoniApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Stylesheets -->
<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="pages/css/home.css">
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300italic,300,100italic,100,400italic,500,500italic,700,700italic,900italic,900' rel='stylesheet' type='text/css'>
</head>
<body ng-controller="mainController">
...
<!-- Angular -->
<div class="wrap">
<div ng-view></div>
...
</body>
<!-- Javascripts -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="js/angular_script.js"></script>
<!--- Global Script -->
<script src="js/global.js"></script>
<!--- Content -->
<script src="js/contentinject.js"></script>
</html>
Note: "..." represents code that was too big and had to be taken out for this to be readable.
Now inside contentinject.js we have:
/** Content Injection **/
function isValid() {
$.getJSON("/js/content.json", function (d) {
console.log("json parsing of 'content.json' performed successfully.");
}).fail(function (d, textStatus, error) {
errorCall("Fatal error", "json", "Something went wrong and the site may not properly display, if the problem persists contact the website administrator.<br/><br/>Sorry about that.","<b>Couldn't parse 'content.json'</b><br/><br/>" + error)
});
}
setTimeout(isValid, 2000)
$.getJSON("/js/content.json", function (data) {
$(".lander .title").text(data.lTitle);
$(".lander .subtitle").text(data.lSubtitle);
$(".lander .text").html(data.lText.split('\n').join('<br />'));
});
Which modifies the DOM of:
home.html (What gets injected into ng-view, also our example partial)
<body>
<div class="lander">
<div class="w-ctrl">
<div class="container">
<div class="title-con">
<div class="title"></div>
<div class="subtitle"></div>
</div>
<div class="text-con">
<div class="text"></div>
</div>
</div>
</div>
</div>
</body>
Now as you can see, the script is CLEARLY at the bottom of the document, and also under angular.js, so it should load and inject the stuff into partial, but it isn't. If I put contentinject.js inside home.html, it works.
Is there any way around this?
If you have assigned a certain controller to your view, than your controller will be invoked everytime your view loads. in that case, you can execute some code in your controller as soon as it is invoked..
Something like this :
<ion-nav-view ng-controller="indexController" name="other"></ion-nav-view>
and in your controller :
app.controller('indexController', function($scope) {
/*
Write some code directly over here
without any function, and it will be executed every time your view loads.
Something like this:
*/
$scope.xyz = 1;
});
You can find more details in this answer..
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.
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
i have this files under my project and i'm encountring some trouble loading them with ajax and applying angular , here is the plunk :
http://plnkr.co/MxXzlenAuGcDy8iljKYX
the problem is that the content of sidebar.html get loaded and the controller gets executed correctly but for products.html the content only gets loaded and the controller doesn't get executed.
i am using this under chrome and i don't get any errors in my localhost console
I put together a modified version of your plnkr to show how I would approach this in general with Angular and dropped out jQuery since it wasn't necessary here:
http://plnkr.co/edit/QgPUk1JMP1vaWtwgXGbw
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.14/angular.js" data-semver="1.2.14"></script>
<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.14/angular-route.js" data-semver="1.2.14"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="category.js"></script>
<script type="text/javascript" src="products.js"></script>
</head>
<body ng-app="myApp">
<div ng-include="'sidebar.html'"></div>
<div ng-view></div>
</body>
</html>
JS
// Code goes here
var app = angular.module("myApp" , ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when("/products/:prodId",{templateUrl:"products.html"})
.when("/products",{templateUrl:"products.html"})
.when("/", {templateUrl:"home.html"})
.otherwise({redirectTo:"/"});
})