I can do something like this?
$routeProvider.when('/developer/logs', {
templateUrl: '/themes/default/template/developer_logs.html',
controller: "DeveloperLogsCtrl"
});
and in developer_logs.html
<script>
app.controller('DeveloperLogsCtrl', function($location, $rootScope) {
$rootScope.PageTitle= 'Developer Logs';
});
</script>
<div class="content-heading">
<ol class="breadcrumb">
<h1>Logs</h1>
<li>Dashboard
</li>
<li>Developer</li>
<li class="active">Logs</li>
</ol>
</div>
<div>asfa8fhfga</div>
I tried but I get http://errors.angularjs.org/1.4.8/ng/areq?p0=DeveloperLogsCtrl&p1=not%20a
You can't lazy load angular code within templates.
There is no built in lazy load mechanism either without using third party modules.
Include all your components in initial page load or look for third party load managers
Related
this is one of my first projects with vue.
Basically, I am trying to display an image from a URL from an array.
On the webpage, the URL is in the image back but the actual image is not displaying.
This is in my main vue class
<div id="painting">
<ul v-if="artwork && artwork.length">
<li v-for='(artworks, index) in artwork' :key='index'>
<img v-bind:src="artworks.thumbnailUrl" />
</li>
</ul>
<router-view/>
</div>
then the script code:
<script>
import axios from 'axios';
export default {
data() {
return {
artwork: []
}
},
created() {
axios.get(`http://localhost:9000/artwork`)
.then(response => {
this.artwork = response.data;
})
.catch(e => {
this.errors.push(e)
})
}
}
</script>
This is what it looks like on the web, the url is there but no picture
I have declared a width and a height of the image as well with css
I should mention i getting the information from the database in a node project and connecting by a port number
I am pretty new to stack so I would love any feedback, cheers
From you screenshot code, this looks fine. I can see the image by writing similar HTML
<li>
<img data-v-xcxcc src="http://www.tate.org.uk/art/images/work/A/A00/A00007_8.jpg" />
</li>
https://jsfiddle.net/y2m75usk/
Try clearing your cache or reload the page by Holding the Ctrl key and press the F5 key.
Thanks!
i want to save vue js code Inside div in database using mongo db
i create ws to save page Inside mongoDb using nodejs
when i click save button to save code vue js Inside html
save(){
var vm=this;
var page={
"id":"2",
"page":vm.$el.innerHTML
}
console.log("hh"+vm.$el.innerHTML);
var HTTPpOST=axios.create({
baseURL: `http://localhost:3000/api/product/2`,
headers: {
Accept:'application/json'
}
})
HTTPpOST.put('',page).then(function(response){
}) .catch(function(error){
var vm=this;
console.log("error"+error);
})
i only get html code without vue js code
how can i get both and save them bothin my databse?
this is html :
<div id="app" ref="foo">
<ul>
<li v-for="prod in products">
<h1 style="color:red">{{prod.fields.name}}</h1>
<p>{{prod.fields.description}}</p>
</li>
</ul>
<button #click="save">save</button>
</div>
Try prerendering using Nuxt.js or webpack with vue-server-renderer. Server side rendering helps you to get that elements expanded by Vue.js and you will be having fully rendered webpage.
Look at Vue - Server Side Rendering
As i html with Router link of Angular 4 how can i set Router in that of backboneJS
html is mentioned below
<ul role="menu" class="sub-menu">
<li><a [routerLink]="['/orderHistory']">History</a></li>
<li><a [routerLink]="['/userprofile']">Profile</a></li>
<li><a [routerLink]="['/addressbook']">Address Book</a></li>
<li><a [routerLink]="['/preferences']">Preferences</a></li>
<li><a [routerLink]="['/wishlist']">Wishlist</a></li>
</ul>
I am using backboneJs and Handlersbar any suggestions or good approach would be so useful. Thanks in advance.
I have to make footer and header in my application.
You can just set the href of <a> as normal hash like:
<li>History</li>
or if your app supports push state, without the hash like:
<li>History</li>
and set up and instance of Backbone.Router as mentioned in the docs.
This router instance will listen to changes in url and invoke the callbacks you define while instantiating the backbone router.
You can do following in your backbone.js View
events: {
'click a': 'changeRoute'
},
changeRoute: function(e) {
e.preventDefault();
var href = $(e.currentTarget).attr("href");
router.navigate(href, true);
}
I am trying to use multiple UI-views in my AngularJS app and it is not working as expected. The app is a dashboard.
My directory structure is as follows:
index.html
app/
app.js
dashboard/
dashboard.html
dashboard.js
partials/
business.html
items.html
orders.html
sales.html
login/
login.html
login.js
The problem that I am having is that my index.html file has the following line of code:
<div ui-view></div>
The above line enables my application to show the login.html page and dashboard.html page. Now I want to be able to have partial views in my dashboard.html page and so I have also put the same line of code
<div ui-view></div>
in order to be able to embed partial views in my dashboard page. Instead of embedding though, the page instead just redirects. So for example if I am in my dashboard.html and click on a navigation item such as 'business', I am redirected to partials/business.html instead of the content being embedded.
1) Can I have multiple ui-views embedded within each other?
2) Am I correctly embedding the partial views?
I have scoured the internet but cannot find a solution. Thanks in advance for the help!
You can definitely have multiple embedded views.
Check out these AngularJS UI-Router tutorials: Nested Views and Multiple Named Views.
Let me know if you still have issues after looking them over.
You can define a ui-view inside another ui-view. I have implemented it in the following manner and its pretty straight forward.
Inside index.html I have code:
<div ui-view=""></div>
Then inside user.html I have code
<div ui-view=""></div>
And I have defined a config for displaying my views as
.config(function($urlRouterProvider, $stateProvider) {
var users = {
//Name must be in format Parent.Child
name: 'users',
url: '/user',
templateUrl: 'users/user.html',
controller: 'usersHandler',
data: {
pageTitle: 'Welcome to Users'
},
},
createUsers = {
name: 'users.createUsers',
url: '/createUser',
templateUrl: 'users/createUser.html',
data: {
pageTitle: 'Create Users'
}
},
listUsers = {
name: 'users.listUsers',
url: '/listUsers',
templateUrl: 'users/userLists.html',
data: {
pageTitle: 'Users listing'
}
},
getUserDealer = {
name: 'users.getUserDealer',
url: '/getUserDealer',
templateUrl: 'users/getUserDealer.html',
data: {
pageTitle: 'Users dealer listing'
}
},
editUser = {
name: 'users.editUser',
url: '/editUser',
templateUrl: 'users/editUser.html',
data: {
pageTitle: 'Edit User'
}
};
//Similarly define all the combination you want to separate
//add routes to stateProvider
$stateProvider
.state('users', users)
.state('users.createUsers', createUsers)
.state('users.listUsers', listUsers)
.state('users.getUserDealer', getUserDealer)
.state('users.editUser', editUser);
$urlRouterProvider.otherwise('/user/listUsers');
});
Whats happening is this that user.html is my parent file which is loaded inside index.html and editUser.html, getUserDealer.html and userLists.html etc are its children which I load within user.html using ui-view.
And I provide the links for nested pages as:
<ul class="nav navbar-nav">
<li>NEW USER</li>
<li>GET USER</li>
</ul>
This can be extended to additional parents and their children as per the need.
Hope it helps!!
Am new to Angular and seek your help. Is it possible to display/load an HTML page (i don't want redirection to a page) through a controller in AngularJS?
To elaborate: I have an application page that displays a list of items, say. Each item has a 'view' icon against it which when clicked should bring up a detailed view of the item.
<ul class="list" data-ng-controller="check">
<li>Item 1
<em class="view"></em>
</li>
<li>Item 2
<em class="view"></em>
</li>
</ul>
myapp=angular.module("MyApp",[]);
myapp.controller("check",['$scope',function($scope){
$scope.somefunction = function(){how to ask it to load an html page i got ??};
}]);
Thanks!
ng-include is the correct way of achieving this. http://docs.angularjs.org/api/ng.directive:ngInclude
If you really don't want to do that you can fetch the page using $http and mark it as safe to render using $sce.
<div ng-bind-html="trustedHtml"></div>
myapp.controller("check",['$scope', '$http', '$sce',
function ($scope, $http, $sce) {
// Fetch contents using $http.
$http({method: 'GET', url: '/someUrl'}).success(function (contents) {
$scope.trustedHtml = $sce.trustAsHtml(contents);
});
}
]);