I have created a custom directive named myAddress. I shall be using it in another html page. The custom directive is only working if I give it a ng-app in the element as below.
<my-Address ng-app="customModule"> </my-Address>.
but not working if I write this
<my-Address > </my-Address>.
I should get it working without the ng-app in the element.
The following is the custom directive code.
var mainApp = angular.module("customModule", ['ngSanitize', 'schemaForm']);
mainApp.directive('myAddress', [function() {
var directive ={};
directive.restrict = 'E';
directive.templateUrl = 'customDirective.html';
directive.controller = 'myController';
//directive.module = 'customModule';
directive.compile = function($scope, element, attributes) {
}
return directive;
}]);
The html where the directive is added.
<!Doctype html>
<html >
<head>
<title>Angular JS Custom Directive</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h2> some heading </h2>
<my-Address ng-app="customModule"> </my-Address>
<link rel="stylesheet"
href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="customDirectiveScript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.js"></script>
<script src="tv4.js"></script>
<script src="ObjectPath.js"></script>
<script src="schema-form.js"></script>
<script src="bootstrap-decorator.js"></script>
</body>
</html>
Please help, thanks in advance.
try the following
<!Doctype html>
<html >
<head>
<title>Angular JS Custom Directive</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body ng-app="customModule">
<h2>NationWide Standardized </h2>
<my-Address > </my-Address>
<link rel="stylesheet"
href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="customDirectiveScript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.js"></script>
<script src="tv4.js"></script>
<script src="ObjectPath.js"></script>
<script src="schema-form.js"></script>
<script src="bootstrap-decorator.js"></script>
</body>
</html>
Take a good look at the ng-app on the body tag.
If you want to use it inside another ng application. you need to inject you customModule inside this application
see this example
angular.module('myApp',['customModule'])
the custom module you wrote will be injected inside another angular application which gives you access to you my-address directive
Your <html> needs a ng-app attribute, if you're not going to call angular.bootstrap() yourself (you might want to do that for reasons related to asynchrony).
You want to put that on your top-level tag (which should be html), because anything outside of that won't be picked up by angular (that means controllers, views, foreaches, etc, etc).
This is why your code doesn't work: Angular is not "enabled" outside of the ng-app-enabled element.
Related
I'm using Angular 5 and I want to include my script files .js
I'm using the script tag in the index.html
When I refresh the page everything works fine, but when i'm using SPA routing my js files does not included
Here's an exemple :
If I refreshed the page
When i'm using SPA navigation
Here's index.html where i include all my script whith script tag
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="/">
<title>Listeo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/colors/main.css" id="colors">
</head>
<body>
<app-base></app-base>
<script type="text/javascript" src="../assets/scripts/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="../assets/scripts/mmenu.min.js"></script>
<script type="text/javascript" src="../assets/scripts/chosen.min.js"></script>
<script type="text/javascript" src="../assets/scripts/slick.min.js"></script>
<script type="text/javascript" src="../assets/scripts/rangeslider.min.js"></script>
<script type="text/javascript" src="../assets/scripts/magnific-popup.min.js"></script>
<script type="text/javascript" src="../assets/scripts/waypoints.min.js"></script>
<script type="text/javascript" src="../assets/scripts/counterup.min.js"></script>
<script type="text/javascript" src="../assets/scripts/jquery-ui.min.js"></script>
<script type="text/javascript" src="../assets/scripts/tooltips.min.js"></script>
<script type="text/javascript" src="../assets/scripts/custom.js"></script>
<script type="text/javascript" src="../assets/scripts/switcher.js"></script>
</body>
</html>
and here's the navigation bar :
<nav id="navigation" class="style-1">
<ul id="responsive">
<li>
<a [routerLink]="['home']" [routerLinkActive]="['current']">Home</a>
</li>
<li>
<a [routerLink]="['restaurants']" [routerLinkActive]="['current']">Restaurants</a>
</li>
</ul>
</nav>
When I'm using the href everything wirks fine, but with [routerLink] I'm facing the problem.
Are you using the Angular CLI?
Then you can put your custom js files into .angular-cli.json
"scripts": [
"<path_to_script",
"<path_to_second_script"
]
Then you don't have to reference them in the index.html.
You need to manually trigger the script
From looking at the documentation ( http://rangeslider.js.org/), the way to trigger the script is
$('input[type="range"]').rangeslider();
So what you probably need to do is trigger this in your component's ngAfterViewInit method (the one using rangeslider). This need to be in ngAfterViewInit to make sure that the dom elements have been created.
//component.ts
ngAfterViewInit()
{
$('input[type="range"]').rangeslider();
}
I've been able to get my Marionette 3 templates to work when they are inline. When I include the template in an .html file I get a NoTemplateError when rendering the view. I've seen examples that use TemplateCache and require, but I don't understand why I can't just include the template .html file in the body and have it work.
The main source file
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>Gmail API Quickstart</title>
<meta charset='utf-8' />
</head>
<body>
<script src="jquery.js" type="text/javascript"></script>
<script src="underscore_1_8_3.js" type="text/javascript"></script>
<script src="backbone.js" type="text/javascript"></script>
<script src="backbone.radio.js" type="text/javascript"></script>
<script src="backbone.marionette_3_2_0.js" type="text/javascript"></script>
<script src="bootstrap.js" type="text/javascript"></script>
<link href="bootstrap.css" rel="stylesheet">
<link href="mycss.css" rel="stylesheet">
<script src="messageDetails.js" type="text/javascript"></script>
// This template works
<script type="x-template/underscore" id="mailItem-template">
<div id="mailItem" class="col-md-12">
<img src="trash_recyclebin_empty_closed.png" align = "top" width="18" height="18"/>
<input type="checkbox" style="padding: 10;"/>
</div>
</script>
// If I comment out the above template and put the template in .html file it doesn't work in the view. I've tried
<link href="mailItem.tmpl.html" type="text/html"/>
// I've also tried this, but I get an Syntax error
<script src="mailItem.tmpl.html" type="text/javascript"/>
// View that uses the template
<script src="MessageDetailsView.js" type="text/javascript"></script>
This is because using the <script> tag isn't going to load it. Essentially if a <script> tag isn't javascript the browser will leave it alone.. this is handy since you can grab it later to use it as a template, but the browser isn't ever going to load the external template.
What you could do is make your external template a javascript.
var myTemplate = _.('My template text');
then you should be able to load that via a tag an expect myTemplate to be available globally.
But your best options is most likely to use a build tool like webpack to precompile and import your templates as javascript into your script directly.
More info:
Explanation of <script type = "text/template"> ... </script>
I picked up Angular.js yesterday as part of an internship, and Node.js the day before, so I'm a complete beginner with these technologies.
Basically, I tried to make a really simple page with an input field which would print the input text right next to the field, like such. As you can see, it works in a jsfiddle.
But when I try this locally, I get a ReferrenceError at the angular.module call of my controller, and this error in my browser.
Here's my index.html:
<div ng-app="myApp">
<head>
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<input ng-model="query"/>
<span><b ng-bind="queryResult()"></b></span>
</div>
<!-- Scripts et liens css.-->
<script src="./controller.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="./bower_components/jquery/dist/jquery.js"></script>
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="./bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="./bower_components/jquery/dist/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
</body>
And my controller.js:
var myApp = angular.module("myApp", []);
myApp.controller('AppCtrl', function($scope) {
$scope.query = "";
$scope.queryResult = function(){
return $scope.query;
};
});
Any idea what I'm doing wrong ?
you should include
<script src="./controller.js"></script>
after angular js files
The order of your controller file and AngularJS CDN is the problem. Please add your JS file beneath AngularJS CDN.
And also You have added ng-app to a div which does not have a closing tag. It might cause problems too.
Try the following code:
<html ng-app="myApp">
<head>
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<input ng-model="query"/>
<span><b ng-bind="queryResult()"></b></span>
</div>
<!-- Scripts et liens css.-->
<script src="./controller.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="./bower_components/jquery/dist/jquery.js"></script>
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="./bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="./bower_components/jquery/dist/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
</body>
</html>
It looks like you are including jQuery after angular. jQuery should be first.
It also looks like you are including angular twice.
angular.min.js and angular.js
I am just learning angular.js here is my first 'hello world' script. I am trying to use ng-include to include a navbar from local file /templates/nav.html. I am following a tutorial and cant figure out why its not working.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello World</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body ng-app="app">
<header ng-include src="'templates/nav.html'">
</header>
<div ui-view></div>
<section>
</section>
<footer>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/app.js"></script>
</body>
this is my js/app.js file:
angular
.module('app', [
'ui.router'
]);
templates/nav.html is simply the default bootstrap navbar. what am i doing wrong?
You need to include your js/app.js file as a script - right now there's no angular app being instantiated.
Add this as the last script to be included:
<script src="js/app.js"></script>
It should be:
<div ng-include="'templates/nav.html'"></div>
And put the header tag inside your nav.html.
I'm trying to learn Angular.JS, so I wrote this simple code just to test it:
<!doctype html>
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<title>Angular.JS</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/myapp.js"></script>
<p>The sum of 5+10 is: {{5 + 10}}</p>
</body>
</html>
In the browser I'm supposed to see the following output: The sum of 5+10 is: 15, but I just see it as it is: The sum of 5+10 is: {{5 + 10}}. I tried it both in Chrome and FF, I tried to add the angular.js from Google CDN with <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>, I tried to move the script between the <head> tags, but the outcome is always the same.
What am I doing wrong? Why don't I have the output correctly?
<html ng-app="myapp">
When you specify a name for ng-app, it's expecting to find a user-created module with that name. If you're truly just wanting your example to work, you can simply remove the ="myapp" and you'll be all set.
<html ng-app>
If you want to keep your "myapp" name, add this script block after you load angular.
<script type="text/javascript">
angular.module('myapp', []);
</script>
Either remove name initialization in html:
<html ng-app>
Or initialize module in your javascript file:
var myapp = angular.module("myapp", []);
Second way is better.
Just use "ng-app":
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body ng-app>
{{ 5 + 10 }}
</body>
</html>
Fiddle here.
This should work.
You need to instanciate the module myapp you are using here
<html ng-app="myapp">
with the following:
<script type="text/javascript">
var app = angular.module('myapp', []);
</script>
The final html is like this:
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<title>Angular.JS</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myapp', []);
</script>
</head>
<body>
<script type="text/javascript" src="js/myapp.js"></script>
<p>The sum of 5+10 is: {{5 + 10}}</p>
</body>
</html>