I'm using angularJs and new to it. I'm facing problem in $routeProvider.
Thanks in advance if someone may help me :)
when i see in firebug it show reference not set for $routeProvider.
here is my code..
main.html.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="demoApp"><!--you can use data-ng-app directive also-->
<head>
<title>Using Directive With DataBinding</title>
<script src="Scripts/angular.min.js"></script>
<script>
//var demoApp = angular.module('demoApp', ['helperModule']);
var demoApp = angular.module('demoApp', []);
demoApp.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'SimpleController',
templateUrl: 'View1.html'
})
.when('/view2', {
controller: 'SimpleController',
templateUrl: 'View2.html'
})
.otherwise({ redirectTo: '/' });
});
var controllers = {};
controllers.SimpleController = function ($scope) { // here $scope is dependency injection
$scope.customers = [
{ name: 'Sombir', city: 'Rohtak' },
{ name: 'Surender', city: 'Hissar' },
{ name: 'Virender', city: 'Panipat' },
{ name: 'Kapil', city: 'Jhajjar' }
];
$scope.addCustomer = function() {
$scope.customers.push(
{
name: $scope.newCustomer.name,
city: $scope.newCustomer.city
});
};
};
demoApp.controller(controllers);
</script>
</head>
<body>
<div>
<div data-ng-view=""><!--PlaceHolder for views--></div>
</div>
</body>
</html>
View1.html
-----------------
<div class="container">
Name:
<input type="text" ng-model="filter.name" /><!--you can use data-ng-model directive also-->
<h3>Adding A simple Controller --View1</h3>
<ul>
<li data-ng-repeat="cust in customers | filter:filter.name | orderBy:'city'">{{cust.name | uppercase}}---{{cust.city}}</li>
</ul>
<br/>
Customer Name:
<input type="text" ng-model="newCustomer.name"/>
Customer City:
<input type="text" ng-model="newCustomer.city" />
<br/>
<button ng-click="addCustomer()">Add Customer</button>
View2
</div>
You forgot to inject 'ngRoute' in your module 'demoApp' in your script tag
var demoApp = angular.module('demoApp', ['ngRoute']);
Related
I'm taking the introductory phases at the Vue.js.
Everything is finde and all app components are showing until const { default: Vue } = require("vue"); is added. Then the webpage becomes like on the picture here
I have the following code:
HTML:
<!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.0">
<script src="https://cdn.jsdelivr.net/npm/vue#2/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{ helloWorld }}</h1>
</div>
<div id="app-2">
<span v-bind:title="message">
Hold musen over dette, for at se hvordan titlen vil ændre sig!
</span>
</div>
<div id="app-3">
<span v-if="seen">
Now you see me
</span>
</div>
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
<div id="app-7">
<ol>
<!-- Create an instance of the todo-item component -->
<todo-item
v-for="item in groceryList"
b-bind:todo="item"
b-bind:key="item.id">
</todo-item>
</ol>
</div>
<script src="index.js"></script>
</body>
</html>
JS:
const { default: Vue } = require("vue");
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app = new Vue ({
el: '#app',
data: {
helloWorld: 'First vue output!'
}
});
var app2 = new Vue ({
el: '#app-2',
data: {
message: 'Du har loaded siden den: ' + new Date().toLocaleString()
}
});
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
});
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{text: 'Første punkt'},
{text: 'Andet punkt'},
{text: 'Tredje punkt'}
]
}
});
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function() {
this.message = this.message.split('').reverse().join('')
}
}
});
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
});
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
})
var app = new Vue
Using Vuelidate you can reset the validation errors by using this.$v.$reset(). In this Codepen example resetting the lastName field that uses a Vuetify component works - $invalid is true while $error is set to false.
When resetting the regular text input for firstName it doesn't work as the $error flag is still true. How can I modify the text input so that $error is false when calling reset?
I've also tried this.$nextTick(() => {...}) but that doesn't work either.
Vue.use(window.vuelidate.default)
var validationMixin = window.vuelidate.validationMixin
const {
maxLength,
required
} = window.validators
new Vue({
el: '#app',
mixins: [validationMixin],
data: () => ({
form: {
firstName: '',
lastName: ''
}
}),
validations: {
form: {
firstName: {
required, maxLength: maxLength(2)
},
lastName: {
required, maxLength: maxLength(2)
},
}
}
})
input.raw {
border: solid;
}
.is-invalid {
border-color: #FF5252 !important;
}
<html>
<head>
<script src="https://unpkg.com/vuelidate#0.6.1/dist/validators.min.js"></script>
<script src="https://unpkg.com/vuelidate#0.6.1/dist/vuelidate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
</head>
<body>
<div id="app">
<label for="firstName">First Name</label>
<input
v-model="form.firstName"
id="firstName"
class="raw"
:class="{ 'is-invalid': $v.form.firstName.$error }"
type="text"
width="100%"
:oninput="$v.form.firstName.$touch()"
:onblur="$v.form.firstName.$touch()"
/>
<button #click="$v.form.firstName.$touch()">
$touch
</button>
<button #click="$v.form.firstName.$reset()">
$reset
</button>
<pre>{{ $v.form.firstName }}</pre>
</div>
</body>
</html>
In your example, you are using oninput and onblur HTML attributes, but in Vue, you should use #input(v-on:input) and #blur(v-on:blur) bindings instead. See docs for details.
Replacing HTML attributes with Vue bindings made your example work correctly:
Vue.use(window.vuelidate.default)
var validationMixin = window.vuelidate.validationMixin
const {
maxLength,
required
} = window.validators
new Vue({
el: '#app',
mixins: [validationMixin],
data: () => ({
form: {
firstName: '',
lastName: ''
}
}),
validations: {
form: {
firstName: {
required, maxLength: maxLength(2)
},
lastName: {
required, maxLength: maxLength(2)
},
}
}
})
input.raw {
border: solid;
}
.is-invalid {
border-color: #FF5252 !important;
}
<html>
<head>
<script src="https://unpkg.com/vuelidate#0.6.1/dist/validators.min.js"></script>
<script src="https://unpkg.com/vuelidate#0.6.1/dist/vuelidate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
</head>
<body>
<div id="app">
<label for="firstName">First Name</label>
<input
v-model="form.firstName"
id="firstName"
class="raw"
:class="{ 'is-invalid': $v.form.firstName.$error }"
type="text"
width="100%"
#input="$v.form.firstName.$touch()"
#blur="$v.form.firstName.$touch()"
/>
<button #click="$v.form.firstName.$touch()">
$touch
</button>
<button #click="$v.form.firstName.$reset()">
$reset
</button>
<pre>{{ $v.form.firstName }}</pre>
</div>
</body>
</html>
This is Issue From Vuelidate and they must be fixed, in this position you can not reset form and give same (badly) behavior you can re-render by the router
// re render component for reset all fileds
this.$router.go(0)
I have a vue component which immediately after download sends axios request.
Also i use vue-social-sharing and i need og:image meta, but my image returns after axios respond.
<template>
<div class="container">
<div v-if="collageSrc" class="col-md-12 collage">
<img class="img-responsive" :src="this.collageSrc"/>
<social-sharing>
<div>
<network network="facebook">
<i name="fa fa-facebook"></i> Facebook
</network>
<network network="twitter">
<i class="fa fa-twitter"></i> Twitter
</network>
</div>
</social-sharing>
</div>
<div class="col-md-12 collage" v-else>
<h1>Your image is preparing...</h1>
</div>
</div>
</template>
<script>
export default {
name: 'collage',
props:['id'],
data: function(){
return {
collageWaiter: this.getCollageSrc(),
collageSrc: '',
url : '',
}
},
metaInfo: {
title : 'Compliment Genarator Collage',
meta: [
{charset : 'utf-8'},
{
'vmid' : 'og:image',
'property' : 'og:image',
//'content' : this.collageSrc
}
]
},
methods:{
getCollageSrc(){
const self = this;
axios.get('/api/generate?id='+this.id)
.then(function(result){
self.collageSrc = result.data;
self.url = "http://compgen.ru/collage/" + self.id;
});
}
}
}
</script>
as you can see, prop 'collageSrc' becomes available after axios request. How can i dynamic include this prop to meta og:image ?
Define metaInfo as function, not as object:
metaInfo() {
return {
meta: [
{ vmid: 'og:image', property: 'og:image', content: this.collageSrc }
]
}
}
https://vue-meta.nuxtjs.org/faq/component-props.html
I have an ASP.Net MVC4 website. Here's the problem view:
#model TVS.ESB.BamPortal.Website.Models.MyTasksViewModel
#using System.Web.Script.Serialization
#{
ViewBag.Title = "My Tasks";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>#ViewBag.Title</h2>
#{ string data = new JavaScriptSerializer().Serialize(Model); }
<div id="Knockout">
#* When select added thenKoGrid does not display! <select class="form-control" data-bind="options:users, optionsText: 'AdLoginId', value:selectedUser" />*#
<div id="Buttons">
<span>Reassign to User: <input class="form-control" data-bind="text:username"/></span>
<button class="btn-default" data-bind="click:promoteState">Promote State</button>
<button class="btn-default" data-bind="click:reassignTasks">Reassign Task(s)</button>
</div>
<div id="KoGrid" data-bind="koGrid: gridOptions" />
</div>
#section Scripts {
<script src="~/KnockoutVM/Mytasks.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/KoGrid.css">
<script type="text/javascript">
var vm = new ViewModel(#Html.Raw(data));
ko.applyBindings(vm, document.getElementById("Knockout"));
</script>
}
I have commented out the select that gives the problem. If I leave this in, then it displays fine, including the items from the observeable array I'd expect. However, for some reason the KoGrid is then not displayed. If I remove the Select then the KoGrid displays just fine. I've tried refreshing with the Google dev tool console window open but no errors are reported. Any ideas why?
Here are relevant parts of the knockout view model:
function ViewModel(vm) {
var self = this;
this.myData = ko.observableArray(vm.Recs);
this.selected = ko.observableArray();
this.users = ko.observableArray(vm.Users);
this.selectedUser = ko.observable("");
this.username = ko.observable("");
this.rows = ko.observableArray(vm.Recs);
this.gridOptions = {
data: self.myData,
enablePaging: true,
pagingOptions: self.pagingOptions,
filterOptions: self.filterOptions,
selectWithCheckboxOnly: true,
selectedItems: self.selected,
canSelectRows: true,
displaySelectionCheckbox: true,
columnDefs: [{ field: 'Timestamp', displayName: 'Timestamp', width: 130 },
{ field: 'State', displayName: 'State', width: 70 },
{ field: 'FaultApplication', displayName: 'Application', width: 110 },
{ field: 'FaultExceptionMessage', displayName: 'Exception Message', width: 400 },
{ field: 'FaultServiceName', displayName: 'ServiceName', width: 140 },
{ field: 'LinkToFaultsPage', displayName: 'Link to Fault', width: 80, cellTemplate: '<a data-bind="attr: { href: $parent.entity.LinkToFaultsPage}" >Fault</a>' }
]
};
};
Your KOGrid is not displayed because your HTML is invalid:
The select tag cannot be self-closing see also on MDN.
So you need to always write out the closing tag </select>:
<select class="form-control"
data-bind="options:users,
optionsText: 'AdLoginId', value:selectedUser">
</select>
Otherwise the HTML is invalid and Knockout cannot interpret it properly.
I was able to work-around by moving the select list to a separate div and using the ko.applyBindings twice:
<div id="ControlPanel">
<select class="form-control" data-bind="options:users, optionsText: 'AdLoginId', value:selectedUser" />
<div id="Buttons">
<span>Reassign to User: <input class="form-control" data-bind="text:username" /></span>
<button class="btn-default" data-bind="click:promoteState">Promote State</button>
<button class="btn-default" data-bind="click:reassignTasks">Reassign Task(s)</button>
</div>
<div id="KoGrid" data-bind="koGrid: gridOptions" />
</div>
#section Scripts {
<script src="~/KnockoutVM/Mytasks.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/KoGrid.css">
<script type="text/javascript">
var vm = new ViewModel(#Html.Raw(data));
ko.applyBindings(vm, document.getElementById("ControlPanel"));
ko.applyBindings(vm, document.getElementById("KoGrid"));
</script>
}
Can someone suggest how can I place check boxes against each folder of the below tree hierarchy? I am trying to add check-boxes but it is not showing up in my tree shown below. Please suggest the changes i need to make for my below code to get the checkbox displayed. This is a working code , just copy paste the same in a textpad and open in IE allowing activex.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojox/grid/resources/claroGrid.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"
data-dojo-config="isDebug: true,parseOnLoad: true"></script>
<link rel="stylesheet" href="css/style.css" media="screen">
<script>
dojo.require("dojo.parser");
dojo.require("dijit.form.Form");
dojo.require("dijit.form.Select");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.AccordionContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.tree.ForestStoreModel");
dojo.require("dijit.tree.dndSource");
dojo.require("dijit.Tree");
dojo.addOnLoad(function() {
dojo.byId('loaderInner').innerHTML += " done.";
setTimeout(function hideLoader(){
dojo.fadeOut({
node: 'loader',
duration:500,
onEnd: function(n){
n.style.display = "none";
}
}).play();
}, 250);
});
var store;
var selectedItemId = 0;
var itemSelected = null;
var sel = null;
var idCount = 0;
var treeModel;
var mytree;
var modeSelector;
dojo.ready(function(){
store = new dojo.data.ItemFileWriteStore({
contentType: 'application/json',
target: 'store',
url: "http://pmis.biz/rwa/data/ProjectList.php"
});
treeModel = new dijit.tree.ForestStoreModel({
iconClass: 'dijitEditorIcon dijitEditorIconCut',
store: store,
query: {"main": 0},
rootId: 0,
rootLabel: "project",
pasteItem: function(){},
mayHaveChildren : function(item) {
return true;
},
getChildren: function(parentItem, callback, onError) {
if(parentItem.root == true ){
if(this.root.children){
callback(this.root.children);
}else{
this.store.fetch({
query: this.query,
queryOptions: {cache:false},
onComplete: dojo.hitch(this, function(items){
this.root.children = items;
callback(items);
}),
onError: onError
});
}
} else {
console.debug("Tree child onLoad here: "+parentItem.id);
if (idCount < parseInt(parentItem.id)){
idCount = parseInt(parentItem.id);
}
var sx = parseInt(parentItem.id);
this.store.fetch({
query: { main: sx },
queryOptions: {cache:false},
onComplete: dojo.hitch(this, function(items){
this.root.children = items;
callback(items);
}),
onError: onError
});
}
}
});
mytree = new dijit.Tree({
model: treeModel,
openOnClick:true,
showRoot: true,
setCheckboxOnClick : true,
// onDblClick: function (item, node, evt){
// },
onClick: function (item, node, evt){
resetEditor();
}
}, "treeThree");
});
</script>
</head>
<body class="claro">
<!-- BorderContainer -->
<div id="main" data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="liveSplitters:false, design:'headline',
style:'width:100%; height:100%; max-width:1050px; min-width:680px; min-height:400px; margin: 0 auto;'">
<!-- AccordionContainer-->
<div data-dojo-type="dijit.layout.AccordionContainer"
data-dojo-props="region:'leading', splitter:true, minSize:20" style="width: 630px;" id="leftAccordion">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'NG Tree Hierarchy'">
<div data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="title:'Rootless Tree',
style:'width:30%; height:100%; max-width:1050px; min-width:250px; min-height:300px; margin: 0 auto; float:left'">
<div id="treeThree"></div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Rootless CCCCCC'">
<!-- Project selector -->
<div id=help"></div><br>
<br>
<!-- <select id="f_2"></select>-->
<br>
<div>
<table style="width: 135px; height: 83px;">
<tr><td>
<div id="ip"></div>
</tr><tr><td>
<button id="bd" data-dojo-type="dijit.form.Button" style="visibility:hidden"
data-dojo-id="bd"
data-dojo-props="disabled: true,
onClick: function (evt){
store.deleteById(selectedItemId);
resetEditor();
},
label:'Delete project' ">
</button>
<button id="bs" data-dojo-type="dijit.form.Button" style="visibility:hidden"
data-dojo-id="bs"
data-dojo-props="disabled: true,
onClick: function (evt){
var lvalue = dijit.byId('s1').value;
store.setValue(itemSelected, 'title', dijit.byId('s1').value);
store.setValue(itemSelected, 'description', dijit.byId('s2').value);
store.save();
},
label:'Save project' ">
</button>
<button id="ba"data-dojo-type="dijit.form.Button" style="visibility:hidden"
data-dojo-id="ba"
data-dojo-props="disabled: true,
onClick: function (evt){
idCount = idCount +1;
var newItem = {};
newItem.id = idCount;
newItem.main = selectedItemId;
newItem.title = dijit.byId('s1').value;
newItem.description = dijit.byId('s2').value;
store.newItem(newItem);
sel.setStore(store,'',{query:{main: 0}});
/* mytree.update();*/
},
label:'Add project' ">
</button>
<br>
<button onclick="mytree.refreshModel()" style="visibility:hidden">
Update
</button>
</tr>
</table>
<br>
</div>
</div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:''">
<div></div>
</div>
</div>
<div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
</div>
<!-- Top tabs (marked as "center" to take up the main part of the BorderContainer) -->
<div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region:'center', tabStrip:true" id="topTabs">
<div id="basicFormTab1" data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="title:'Tab1', style:'padding:10px;display:none;'">
<p> </p>
</div>
<div id="basicFormTab2" data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="title:'Tab2', style:'padding:10px;display:none;'">
<p> </p>
</div>
<div id="basicFormTab3" data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="title:'Tab3', style:'padding:10px;display:none;'">
<p> </p>
</div>
</div>
</div>
</body>
</html>
A library was created for this:
http://www.thejekels.com/dojo/cbtree_AMD.html
The instruction manual is kind of hard to find from that site. It is a github wiki here: https://github.com/pjekel/cbtree/wiki/CheckBox-Tree. Download the git repo, then follow instructions at https://github.com/pjekel/cbtree/wiki/Installation, and you should be good to go.
Try this one (tested on dojo 1.10):
require(["dojo/_base/connect", "dijit/dijit", "dojo/data/ItemFileReadStore", "dijit/Tree", "dijit/form/CheckBox",
"dojo/domReady!"],
function (connect, dijit, ItemFileReadStore, Tree, CheckBox) {
var store = new ItemFileReadStore({
data: {
identifier: 'id',
label: 'label',
items: rawdata
}
});
var treeControl = new Tree({
store: store,
showRoot: false,
_createTreeNode: function (args) {
var tnode = new Tree._TreeNode(args);
tnode.labelNode.innerHTML = args.label;
var cb = new CheckBox();
cb.placeAt(tnode.labelNode, "first");
connect.connect(cb, "onChange", function () {
var treeNode = dijit.getEnclosingWidget(this.domNode.parentNode);
connect.publish("/checkbox/clicked", [{
"checkbox": this,
"item": treeNode.item
}]);
});
return tnode;
}
}, "CheckboxTree");
connect.subscribe("/checkbox/clicked", function (message) {
console.log("you clicked:", store.getLabel(message.item));
});
}); // require
var rawdata = [{
label: 'Level 1',
id: '1',
children: [{
label: 'Level 1.1',
id: '1.1',
active: true
},
{
label: 'Level 1.2',
id: '1.2',
active: true
}]
},
{
label: 'Level 2',
id: '2',
children: [{
id: '2.1',
label: 'Level 2.1',
active: false
},
{
id: '2.2',
label: 'Level 2.2',
active: true
},
{
id: '2.3',
label: 'Level 2.3',
active: true
}]
}];