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/
Related
I am trying to define my page specific Javascript in my blade file by defining a separate section for it in the file. I can add the same jQuery code in the app.js file and it works without issue, but when I put it in the blade file I get an error of
Uncaught ReferenceError: $ is not defined
Layout file - app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<script src="{{ asset('js/app.js') }}" defer></script>
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body class="fixed-nav sticky-footer bg-dark" id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<!-- Nav Stuff -->
</nav>
<!-- End Navigation -->
<!-- Body -->
<div class="content-wrapper">
<div class="container-fluid">
#yield('content')
</div>
<footer class="sticky-footer">
<!-- footer stuff -->
</footer>
</div>
#yield('script')
</body>
</html>
Content Page - page1.blade.php
#extends('layouts.app')
#section('content')
<div class="container">
<!-- Page Stuff -->
</div>
#endsection
#section('script')
<script>
$(document).ready(function()
{
alert('hello world');
});
</script>
#endsection
I would prefer not to put all of my Javascript in the single app.js file, I would like to be able to use this section fine. Straight Javascript works fine here, but the jQuery does not.
edit:
Here is the app.js file that includes the jQuery library.
require('jquery');
require('./bootstrap');
require('jquery-easing');
// Administration Controller - Add System Type -> This code works just fine.
var numSysDataRows = 5;
$('#add-customer-information').click(function()
{
$('#system-customer-information').append('<div class="form-group"><label for="col'+numSysDataRows+'">System Data:</label><input type="text" name="col[]" id="col'+numSysDataRows+'" class="form-control" /></div>');
numSysDataRows++;
});
If I look at the source code and check the app.js file from the web server, I do see that jQuery is loaded into the app.js file.
Laravel loads jQuery by default, so it will be there unless you removed it from your complied app.js (running an npm commands to compile from your assets). The issue is that you are deferring this script. jQuery is being loaded after the page JavaScript is run.
Try removing the defer command.
If that doesn't work, see if jQuery is in your app.js file. If not, use a cdn or copy it to your public folder.
You don't need to remove "defer" from <script src="{{ asset('js/app.js') }}" defer></script>.
Paste jquery script tags below app.js then,
install npm
remove vue template in resouces/js/app.js
type "npm run dev" and hit enter
repeat #3 2 times
Then no Uncaught ReferenceError: $ is not defined will appear
NPM
Yes, I added jquery script tags
Jquery script tags
Remember that in the case that you are using the jquery CDN, you can try to put it in your head tag, I had that same problem and I have been able to solve it this way
I don't see you add file bootstrap and jquery. Have you added jQuery and Bootstrap file yet?
If not you can see in here : jquery Bootstap
Time ago we purchased this template and we have used it in an angularJS application without any problem.
Now for another project we have switch to Angular 2 and we want use the same theme but we got this weird behaviour: sometimes works as expected but most of the times isn't working.
We have inspected the code using the firefox console and this is the result when is working:
And this is the output console when is not working:
For an (mine) unknown reason sometimes materialize.min.js is not listening for events.
Unfortunately due to copyright issue I can't post the materialize.min.js source code but I can post mine:
index.html
<html>
<head>
<base href="/">
<title>Angular QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
<link href="css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection">
<link href="css/style.min.css" type="text/css" rel="stylesheet" media="screen,projection">
<link href="css/layouts/style-fullscreen.css" type="text/css" rel="stylesheet" media="screen,projection">
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
<!--materialize js-->
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: `
<header-navbar></header-navbar>
<div id="main">
<!-- START WRAPPER -->
<div class="wrapper">
<navbar></navbar>
<section id="content">
<div class="container">
<router-outlet></router-outlet>
</div>
</section>
</div>
</div>
`
})
export class AppComponent { }
EDIT
Even if I use a local copy of jQuery is not working properly.
Provided your materialize.min.js relies on jQuery, I would suspect the reason it works sometimes and not others is that your CDN link is not always loading correctly. I might suggest downloading a copy of jQuery and loading it from a local source that you control.
Edit: When you say "not working" when loaded from a local source, do you mean it is still working sometimes but not consistently? Or do you mean not working at all?
the following is my app.html - template where i will be injecting my other partial views as to come,
<html ng-app="billApp">
<head>
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<!-- load angular via CDN -->
<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="script.js"></script>
</head>
<!-- define angular controller -->
<body ng-controller="mainController">
...
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
{{ message }}
<!-- angular templating -->
<!-- this is where content will be injected -->
</div>
</body>
</html>
And this is the script.js file which is the controller for the application,
// script.js
// create the module and name it scotchApp
var billApp = angular.module('billApp', []);
// create the controller and inject Angular's $scope
billApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see!';
});
while i try to run the script.js file using my commandline
change directory to nodejs directory
type in 'node path-of-the-project-file\script.js'
which throws the following error,
var billApp = angular.module('billApp', []);
Reference error angular not defined.
I m somehow missing out on some basic detail. It would be great if someone could give me some directions here
Replace
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-resource.min.js"></script>
line with
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-resource.min.js"></script>
Because its not getting library which is required by ngResource.
AND
Include this line in the beggining
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
you need to incude jquery before the angular script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
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.
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