I am using the Angular UI bootstrap module for opening a dialog.
There is a option for mentioning the path of template like
$scope.opts = {
backdrop: true,
keyboard: true,
backdropClick: true,
template: '<p>Template</p>',
controller: 'TestDialogController'
}
my app is in site/app then js , partials
I am not able to find how it finds templates
The Angular UI bootstrap dialog takes either a template inline,
template: '<p>This is a inline template</p>';
or the template url can be specified as both a relative and absolute path.
templateUrl: '/relative/path/dialog.html';
Try to open a browser tab pointing to your template first, and when you successfully have derived the path you can try to add it to your templateUrl.
You can read more about correct usage of the directive here.
There's a use of <script> as a directive which would allow you to make a hybrid approach.
Angular docs mention that if you use a declaration in your html like:
<script type="text/ng-template" id="/tpl.html">
Content of the template.
</script>
Then you can use it as a reference in a directive such as ngInclude or ngView, and even a service like $route. You can see this working in this fiddle.
Related
$stateProvider.state('abc', {
url: '/:id',
modal: true,
template: '<abc></abc>'
})
can I have custom html tag in template property?, e.g. 'abc', I was looking at someone else code but I don't understand how this works, I do have abc.html processed by gulp templatecache stuff. and it is loaded in a modal dialog correctly.
the file is at 'src/app/components/abc/abc.html', how come the template 'abc' knows which html to load? I suppose there must be a definition for 'abc' directive somewhere? but I can't find it.
I finally figured how it works, turns out the custom html tag is defined by a 'component' and there is some naming convention making this work.
http://blog.grossman.io/angular-1-component-based-architecture-2/
https://docs.angularjs.org/guide/component-router
Can I have custom html tag in template property
Yes, of course. Templates can use custom directives no matter how they are defined.
There should be an 'abc' directive somewhere in your module code or one of its dependencies.
See this SO question to be able to list the registered directives of your module and submodules in the console.
Yes, you can use custom html. UI Router provides you two choices, either you give the template or the templateUrl, which for the first one you have to write your html in a string literal, and latter you can set a html file location.
using template with string literal:
$stateProvider.state('abc', {
url: '/:id',
modal: true,
template: '<abc></abc>' // this is correct!
})
using templateUrl with html files.
$stateProvider.state('abc', {
url: '/:id',
modal: true,
templateUrl: '/path/to/abc.html' // if you have a file named `abc.html` in directory `path/to`, the template will be loaded
})
In my MEAN app, I use jade as my template engine. My problem is, when I call an angular directive, jade code is not working but html code is working. My code is given below:
index.jade
div(ng-repeat="num in addDir")
admin-collection
directive.js
var formDir = angular.module("formDirective", []);
formDir.directive('adminCollection', function() {
return {
restrict: 'E',
transclude: true,
// call jade template url
templateUrl: '../_template/_formTemplate/_adminCollection.jade'
};
});
_adminCollection.jade
h1 from _adminCollection templateUrl
If I use jade format code in _adminCollection.jade, it just show a plain text, not text inside h1 tag
But following code is working:
directive.js
var formDir = angular.module("formDirective", []);
formDir.directive('adminCollection', function() {
return {
restrict: 'E',
transclude: true,
// call jade template url
templateUrl: '../_template/_formTemplate/_adminCollection.html'
};
});
_adminCollection.html code::
<h1> from _adminCollection templateUrl </h1>
How can I solve this problem?
Jade is a template engine. Browser has only built-in html parser, so it does not understand what jade code means and treats it as plaintext.
To make it work you need to convert it to html. You can use some task manager to do it. Two most popular task managers for node.js are gulp and grunt. Each of them has a working jade plugin which you can use right away.
Jade is something like less - it must be convert to another format, because browser can't understand that. When you use less, you have to transform it to css. And if you use jade - to html.
If you use grunt, you should look on it: https://github.com/gruntjs/grunt-contrib-jade
Otherwise you can check if your IDE can transform jade to html. For example PhpStorm can do this in automatic way.
Then in your directives you should specify path to html template, no jade.
You can use following directory structure:
app/
src/
js/
less/
jade/
dist/
templates/ <-- here you can put your htmls
styles/ <-- and here put css
js/ <-- if you want, you can put this minimalized app.js
that will contain all of your project,
see grunt-contrib-uglify for more info
EDIT: here is really great article about grunt: http://anthonydel.com/my-personal-gruntfile-for-front-end-experiments/ There is much more then you need, but maybe it will help you
.... Or you can to use webpack to do the work.
then you can load the template like this:
angular.module('app').component('myComponent', {
bindings: {},
template: require('./mytemplate.jade')()
});
You can to note that I'm invoking the returned function.
Another option is to keep the HTML templates in your DOM, but hidden:
div(ng-non-bindable, style="display: none")
#adminCollectionTemplate
div(ng-repeat="num in addDir")
admin-collection
#anotherTemplate
//- Alternatively, pull in the template from another file
include ./_formTemplate/_adminCollection.jade
and then use jQuery to fetch the HTML out of the DOM, and give it to angular:
formDir.directive('adminCollection', function() {
return {
restrict: 'E',
transclude: true,
// fetch template from DOM
template: $('#adminCollectionTemplate').html()
};
});
This will just work, without any Ajax or any task runners. But it will clutter up the DOM with templates that could otherwise be hidden away in the JS. And it is an extra step to place every new template into that div.
ng-non-bindable is needed to tell Angular to leave the template elements alone (don't manipulate them or bind to them), until their clones are actually used by the directive.
I'm trying to include a header, using ng-include from Angular into my Jade template:
doctype html
html(lang="en")
head
meta(charset='UTF-8')
meta(name='fragment', content='!')
base(href='/')
title Node Express Angular
link(rel='stylesheet', href='//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css')
link(rel='stylesheet', href='/css/syle.css')
body(ng-app='myApp')
ng-include(src='\'/partials/header.jade\'')
div.container
div.jumbotron.text-center
h1 Home Page
p This page is a draft in progress
script(src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.min.js')
script(src='//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js')
script(src='/js/app.js')
The text in header.jade is the following:
nav.navbar.navbar-inverse(role='navigation')
ul.nav.navbar-nav.navbar-header
li
a(src='/home', class='navbar-brand') Home
li
a(src='/about') About
li
a(src='/login') Login
li
a(src='/register') Register
I have tried both ng-include(src='\'/partials/header.jade\'') and div(ng-include='\'/partials/header.jade\'')
In the Chrome developer console, the first one results in <!--ng-Include: undefined --> and the second: <!-- ng-Include: '/partials/header.jade' -->
Any clues?
Is there a specific reason why you're using Angular's ng-include instead of Jade's own include mechanism?
body(ng-app='myApp')
include partials/header
Reference form the the Jade docs.
I created an Angular directive to be rendered by JADE and then compiled by Angular to the given scope.... and it works!
btw,I'm using client-side Jade for browsers, the CDN is available here
for e.g:
html:
<ng-include src="'MyPageWithJadeScript.html'"></ng-include>
MyPageWithJadeScript.html:
<jade>tag#id.class jade text</jade>
angular:
app
.directive('jade',function($compile){
return{
transclude: true,
template: '<div ng-transclude></div>',
restrict: 'E',
link: function(scope, element){
element
.after(
$compile(
jade
.render(
element.html(),
{pretty:'\t'}
)
)(scope)
)
.remove();
}
};
});
Hope you find this useful
Refer to official doc ngInclude, using the code below
div(ng-include="'partials/header.jade'")
If you want to use ngInclude directive directly, use
ng-include(src="'partials/header.jade'")
Using express, I have the file user-description.jade inside of the views/ folder and to include it in another jade file I simple use the following expression:
div
include user-description.jade
Jade docs has other samples.
I have a directive that lets me insert a chat component. It loads a template as required.
mod.directive('chat', function () {
return {
replace: true,
templateUrl: '/tmpl/chat/chat',
}
})
But the problem is that the template needs additional includes:
.chat
.chatHeader(ng-include="'chatHeader'")
.chatLog(ng-include="'chatLog'")
Partials:
script( type="text/ng-template", id='chatLog')
.chatMsg(ng-include="'chatMsg'", ng-repeat='chatMsg in chatLog')
script( type="text/ng-template", id='chatHeader')
h3 Chat
How do I load the includes? I used to put the partials in the same file as base chat template but if I use replace: true that's no longer allowed.
What's the standard angular way to load included partials?
Using ng-include as you are is perfectly valid. The issue you are facing is likely because your template partial does not have exactly 1 root element. Here is a plunk with a working version of what you are describing: http://plnkr.co/wy1a3T1UdKOlBQXr9o22
I have a working Angular.js app with HTML5 mode enabled.
$location.Html5mode(true).hashbang("!");
What I want to achieve is to get some URLs or <a> tags to do the normal browsing behaviour instead of changing the URL in the address bar using HTML5 history API and handling it using Angular controllers.
I have this links:
<a href='/auth/facebook'>Sign in with Facebook</a>
<a href='/auth/twitter'>Sign in with Twitter</a>
<a href='/auth/...'>Sign in with ...</a>
And I want the browser to redirect the user to /auth/... so the user will be then redirected to an authentication service.
Is there any way I can do this?
Adding target="_self" works in Angular 1.0.1:
<a target="_self" href='/auth/facebook'>Sign in with Facebook</a>
This feature is documented (https://docs.angularjs.org/guide/$location - search for '_self')
If you're curious, look at the angular source (line 5365 # v1.0.1). The click hijacking only happens if !elm.attr('target') is true.
An alternative to Fran6co's method is to disable the 'rewriteLinks' option in the $locationProvider:
$locationProvider.html5Mode({
enabled: true,
rewriteLinks: false
});
This will accomplish exactly the same thing as calling $rootElement.off('click'), but will not interfere with other javascript that handles click events on your app's root element.
See docs, and relevant source
This is the code for turning off deep linking all together. It disables the click event handler from the rootElement.
angular.module('myApp', [])
.run(['$location', '$rootElement', function ($location, $rootElement) {
$rootElement.off('click');
}]);
To work off the Nik's answer, if you have lots of links and don't want to add targets to each one of them, you can use a directive:
Module.directive('a', function () {
return {
restrict: 'E',
link: function(scope, element, attrs) {
element.attr("target", "_self");
}
};
});
I've run into the same issue a few times now with angular, and while I've come up with two functional solutions, both feel like hacks and not very "angular".
Hack #1:
Bind a window.location refresh to the link's click event.
<a
href=/external/link.html
onclick="window.location = 'http://example.com/external/link.html';"
>
The downside and problems with this approach are fairly obvious.
Hack #2
Setup Angular $routes that perform a $window.location change.
// Route
.when('/external', {
templateUrl: 'path/to/dummy/template',
controller: 'external'
})
// Controller
.controller('external', ['$window', function ($window) {
$window.location = 'http://www.google.com';
}])
I imagine that you could extend this using $routeParams or query strings to have one controller handle all "external" links.
As I said, neither of these solutions are very satisfactory, but if you must get this working in the short term, they might help.
On a side note, I would really like to see Angular support rel=external for this type of functionality, much like jQueryMobile uses it to disable ajax page loading.
To add to Dragonfly's answer, a best practice I have found to limit the number of target="_self" attributes is to never put the ng-app attribute on the body tag. By doing that you are telling angular that everything within the body tags are a part of the angular app.
If you are working within a static wrapper that should not be affected by angular, put your ng-app attribute on a div (or other element) that surrounds only the location your angular app is going to be working in. This way you will only have to put the target='_self' attribute on links that will be children of the ng-app element.
<body>
... top markup ...
<div ng-app="myApp">
<div ng-view></div>
</div>
... bottom markup ...
</body>
In your routes try:
$routeProvider.otherwise({})