I cannot get the following code to run. I have tried many many things including: $locationprovider.html5mode(true) (and a element in the of my index.html.)
With this code I get /#!/index#%2Ffishes (with my base infront of it) in my URL. With html5mode I would get #fishes but the view would not change.
Plunkr:
http://plnkr.co/edit/a2lkCuxMf0ll9e9QAyiv?p=preview
Index:
<body ng-app="VissenApp">
<div class="AngularWrapper">
<div ng-view>
</div>
</div>
</body>
App.js:
var app = angular.module("VissenApp", ["ngRoute"]);
app.config(function($routeProvider,$locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
$routeProvider
.when("/index", {
templateUrl : "landing.html",
controller: "fishesController"
})
.when("/fishes", {
templateUrl : "fishes.html",
controller: "fishesController"
})
.otherwise({
templateUrl : "landing.html",
controller : "fishesController"
});
});
app.controller('fishesController', function($scope,$location) {
$scope.toFishes = function () {
$location.path("/fishes");
};
});
Fishes.html
<div class="container-fluid">
<div class="jumbotron">
gfhhgfh
</div>
</div>
Landing.html
<div class="container-fluid landing_background">
<div id="landing_logowrapper" >
<div ng-click="toFishes()" id="landing_logobackground" >
</div>
</div>
</div>
Related
I need to delete default navigation (nextEl, prevEl) and make button with "NEXT SLIDE BUTTON" text scroll to next slide
<swiper class="news-slider" :sliderd-per-view="1" :modules="[Navigation, Pagination, A11y, Lazy]" navigation="navigation" :navigation="{ nextEl: '.nextArrow'}" :pagination="{ clickable: true, dynamicBullets: true, dynamicMainBullets: 5 }" preload-images="false" lazy="lazy">
<swiperSlide class="swiper-slide" v-for="n in 10" :key="n">
<div class="news-container">
<div class="news"><img class="news__image swiper-lazy" src="#/assets/img/lookism-transformed-transformed.png" alt=""/>
<div class="swiper-lazy-preloader"></div>
<div class="news__info">
<div class="news__title">title</div>
<div class="news__description">description</div>
<div class="news__buttons">
<button class="normal-button news-button">more</button>
<button class="next-button"><span class="next-button__text">NEXT SLIDE BUTTON</span><img class="next-button__icon" src="#/assets/img/arrow-right.svg" alt=""/></button>
</div>
</div>
</div>
</div>
</swiperSlide>
</swiper>
<script>
export default {
components: {
Swiper,
SwiperSlide,
},
setup() {
const onSwiper = (swiper) => {
console.log(swiper);
};
const onSlideChange = () => {
console.log('slide change');
};
return {
onSwiper,
onSlideChange,
modules: [Navigation, Pagination, Scrollbar, A11y],
};
},
};
</script>
How can i do that? I will be very grateful for your help
This should do it, all you need to do is import useSwiper and assign it to a const variable and use it in the div element as swiper.slideNext()
And also if you do not wish to use swiper's own elements then remove the navigation module.
Here's the doc source which is clearer
https://swiperjs.com/vue#use-swiper
This is boardview.html
<div ng-controller="BoardController">
<div class="panel panel-default">
<div class="panel-heading">
{{board.title}}
</div>
<div class="panel-heading">
{{board.writer}}
</div>
</div>
this is my partial appRoute.js
.when('/board/view/:id/:pg',{
templateUrl: 'templates/boardview.html',
controller: 'BoardController'
});
this is my partial BoardController
//view board
var view = function(pg){
Boards.view(CurrentBoardIdentifier, pg).success(function(response){
console.log("Request View Completed");
$scope.board = response;
console.log(response);
});
}
I didn't understand, why my html file can't access $scope.
I set the controller in html and in appRoute.js as well.
response in BoardController is single json file from express server.
please help me!
My code is simple. I need to refresh a ng-repeat.
HTML
<div class="quick-actions" ng-controller="DashboardController">
<div class="ui accordion segment">
<div class="ui top attached label active title">
<?php echo __('My Tasks'); ?>
<i class="minus icon"></i>
</div>
<div class="active content">
<div class="ui items" ng-show="myTasks" id="myTasks">
<!-- Creacion de Items de los Taks -->
<div class="item" ng-repeat="T in myTasks">
<div class="content">
<a class="header" href="/angular/#/task/{{ T.Task.id }}">
{{ T.Task.name }}
</a>
<div class="meta">
{{ T.Task.due_date | date : 'dd-MMM-yyyy' }}
</div>
<div class="extra high-priority" ng-if="T.Task.priority == 50">
<i class="circle icon"></i>
<?php echo __('High'); ?>
</div>
<div class="extra medium-priority" ng-if="T.Task.priority == 25">
<i class="circle icon"></i>
<?php echo __('Medium'); ?>
</div>
<div class="extra low-priority" ng-if="T.Task.priority == 0">
<i class="circle icon"></i>
<?php echo __('Low'); ?>
</div>
</div>
</div>
<!-- Termina Creacion de los Items -->
</div>
</div>
</div>
</div>
When income is well DashboardController in angularjs load ng-repeat. Data is correct here.
.controller('DashboardController', function ($scope, $state, $rootScope, $stateParams, $q, $timeout, $http, $sce, $location, Sesion, Dashboard, Fullscreen) {
Dashboard.get_all_tasks().then(function (response) {
$scope.myTasks = response;
});
})
What I need is that when I'm in another controller I can update this ng-repeat. It does not work (data incorrect) here.
.controller('NewTaskController', function ($scope, $state, $rootScope, $stateParams, $q, $timeout, $http, $sce, Sesion, Users, Opportunities, Dashboard) {
Dashboard.get_all_tasks().then(function (response) {
$timeout(function () {
$scope.$apply(function () {
$scope.myTasks = response;
});
});
});
})
Any idea what I'm doing wrong?
You need to implement a service to pass data between controllers. Here is a simplified example. It is in this plunkr here to play with.
var projectModule = angular.module('project',[]);
projectModule.factory('Service', function() {
return {
thing : {
x : 100
}
};
});
function FirstCtrl($scope, Service) {
$scope.thing = Service.thing;
$scope.name = "First Controller";
}
function SecondCtrl($scope, Service) {
$scope.foo = Service.thing;
$scope.name = "Second Controller!";
}
In this way $scope.thing from the first controller is linked to scope.foo in the second controller via the service using thing
You will need to define the structure of myTasks in the service you define so that all the elements gets passed correctly.
Try implementing this into your project and if you have a specific hangup comment here and we will help but I don't know all your code or structure of myTasks so I'm not giving copy/paste code.
I have three pages with routing. If I entered some input and getting some result on first page, next I navigated to second page and finally I came back from second page to first page. Then I want to see the data what I entered previously and result also.
Here the code snippet
index.html
<!DOCTYPE html>
<html ng-app="scotchApp">
<head>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="mainController">
<nav class="navbar navbar-default">
<div class="container"></div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
<div id="main">
<div ng-view></div>
</div>
</body>
</html>
home.html
<div class="jumbotron text-center">
<h1>Home Page</h1>
Billing index :
<input type="text" ng-model='billingMapValue'>
<br/><br/>
Billing value :
{{billingMap[billingMapValue]}}
<ng-click=navigate() type="button" value='submit'>
<p>{{ message }}</p>
</div>
about.html
<div class="jumbotron text-center">
<h1>About Page</h1>
<p>{{ message }}</p>
</div>
script.js
var scotchApp = angular.module('scotchApp', [ 'ngRoute' ]);
scotchApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'home.html',
controller : 'mainController'
})
.when('/about', {
templateUrl : 'about.html',
controller : 'mainController'
})
.when('/contact', {
templateUrl : 'contact.html',
controller : 'mainController'
});
});
scotchApp.controller('mainController', function($scope) {
$scope.message = 'Everyone come and see how good I look!';
$scope.billingMapValue = "";
$scope.billingMap = new Array();
$scope.billingMap["ZF2"] = "Invoice";
$scope.billingMap["ZRE"] = "Credit for Returns";
$scope.billingMap["ZG2"] = "Credit Memo";
$scope.billingMap["ZL2"] = "Debit Memo";
$scope.billingMap["ZS2"] = "Cancellation of Credit Memo";
$scope.billingMap["ZS1"] = "Cancel. Invoice (S1)";
});
Now what I need is. If I run index.html page, I will be in home page there is one input text box. If enter some index value like 'ZF2' I will see the value "invoice". there will be list of hyperlinks on top of page .home, .about and .contact. I will click about item then I navigate to about page. Then I navigate again to home page by clicking home hyperlink , now I need to see the previous data which I entered and got.How to do that?
Thanks in advance.
I'd suggest you to use service, that will act as sharable resource between the different controllers.
You need to do some changes in your code.
You need to move all the static to either service or angular constant.
Use dot rule while binding object that will udpate your binding automatically.
Assign a different controller for each view, that would be more modular approach.
Service
scotchApp.service('dataService', function() {
this.data = {}
this.data.billingMap = new Array();
this.data.billingMap["ZF2"] = "Invoice";
this.data.billingMap["ZRE"] = "Credit for Returns";
this.data.billingMap["ZG2"] = "Credit Memo";
this.data.billingMap["ZL2"] = "Debit Memo";
this.data.billingMap["ZS2"] = "Cancellation of Credit Memo";
this.data.billingMap["ZS1"] = "Cancel. Invoice (S1)";
this.data.selectedBillMap = '';
});
Controller
scotchApp.controller('mainController', function($scope, dataService) {
$scope.message = 'Everyone come and see how good I look!';
$scope.billingData = dataService.data.billingMap;
});
Demo Plunkr
I'm new to ember and trying to build a Ember driven web application. I've read various tuts and studies several examples. The basic concepts are clear but now I'am stuck on trying to implement a tabpanel. My approach is as follows:
View
Configurator.TabPanelView = Ember.View.extend({
classNames: ['tabPanel'],
templateName: 'tabPanel'
});
Template
<script type="text/x-handlebars" data-template-name='tabPanel'>
<div class='tabHead'>
<ul>
{{#each tabViews}}
<li {{action "{{this.actionName}}" target="{{this.value}}"}} >{{this.title}}</li>
{{/each}}
</ul>
<div class="tab-content">{{outlet}}</div>
</div>
</script>
Usage in App
var tab= Configurator.TabPanelView.create({
classNames: ['assortment'],
tabViews: [{ title: 'First', value:'Foo', actionName: 'firstTab' },{title: 'Second', value:'Foo', actionName: 'secondTab' }],
firstTab: Ember.View.extend({
templateName: 'first'
}),
secondTab: Ember.View.extend({
templateName: 'second'
})
});
tab.appendTo("body");
The TabTemplate is rendered correctly but if I try to click on the li-elements following error is thrown
Uncaught Error: assertion failed: Target <(subclass of
Ember.View):ember217> does not have action {{this.actionName}}
I'm also curious if I should use a router to implement tabbing. But as far as i can see routers act on application level and are intended to be used in single UI-compos.
The problem is in your template:
<li {{action "{{this.actionName}}" target="{{this.value}}"}} >{{this.title}}</li>
AFAIK, actions can't be bound, so when you write this, it tries to call the method {{this.actionName}} instead of firstTab, for example.
I think this is a typical example where you should use a Ember.CollectionView with an itemViewClass which has the click method, i.e.:
App.MyCollectionView = Ember.CollectionView.extend({
tagName: 'ul',
templateName: 'the-template-name',
itemViewClass: Ember.View.extend({
click: function() {
var actionName = this.get('content.actionName'),
target = this.get('controller.target');
target.send(actionName);
}
})
});
The code above is surely not right, but the idea is here.
But I think the Router is the right way to do that. I suggest you to take a look at the Ember Router example by #ghempton, where it defines tab with Ember.Router.
You have 2 options:
1) each tabpage has its own controller, view and must also be defined in the router
<script type="text/x-handlebars" data-template-name="tabs">
<div>
<ul class="nav nav-tabs">
{{#view Bootstrap.TabItem item="info"}}
<a {{action gotoInfo}}>Info</a>
{{/view}}
{{#view Bootstrap.TabItem item="anamnese"}}
<a {{action gotoAnamnese}}>Anamnese</a>
{{/view}}
{{#view Bootstrap.TabItem item="medication"}}
<a {{action gotoMedication}}>Medication</a>
{{/view}}
</ul>
{{outlet}}
</div>
</script>
Bootstrap.TabItem = Ember.View.extend({
tagName: 'li',
classNameBindings: ['isActive:active'],
isActive: function() {
return this.get('item') === this.get('controller.selectedTab');
}.property('item', 'controller.selectedTab').cacheable()
});
2) all tabpages are in one large view, and tabpages will be hidden or shown
{{#view Ember.TabContainerView currentView="info"}}
<ul class="nav nav-tabs">
{{#view Bootstrap.TabView value="info"}}<a>Info</a>{{/view}}
{{#view Bootstrap.TabView value="anamnese"}}<a>Anamnese</a>{{/view}}
{{#view Bootstrap.TabView value="medication"}}<a>Medication</a>{{/view}}
</ul>
{{#view Ember.TabPaneView viewName="info"}}
{{view EEPD.InfoView}}
{{/view}}
{{#view Ember.TabPaneView viewName="anamnese"}}
{{view EEPD.AnamneseView}}
{{/view}}
{{#view Ember.TabPaneView viewName="medication"}}
{{view EEPD.MedicationView}}
{{/view}}
{{/view}}
Bootstrap.TabView = Ember.TabView.extend({
tagName: 'li',
classNameBindings: ['isActive:active'],
isActive: function() {
return this.get('value') === this.get('tabsContainer.currentView');
}.property('tabsContainer.currentView').cacheable()
});
There are two ways to implement a tab panel.
If you want your tabs to be bookmarkable, then you should implement them using Router:
Templates
<script type="text/x-handlebars" data-template-name="application">
<div class="tabpanel">
<div class="tabs">
<div {{action "goToFirstTab"}}>First tab</div>
<div {{action "goToSecondTab"}}>Second tab</div>
</div>
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="firstTab">
First Tab content
</script>
<script type="text/x-handlebars" data-template-name="secondTab">
Second Tab content
</script>
Code:
var App = Ember.Application.create();
App.ApplicationController = Ember.Controller.extend();
App.ApplicationView = Ember.View.extend();
App.FirstTabView = Ember.View.extend({templateName: "firstTab"});
App.FirstTabController = Ember.Controller.extend();
App.SecondTabView = Ember.View.extend({templateName: "secondTab"});
App.SecondTabController = Ember.Controller.extend();
App.Router = Ember.Router.create({
root: Ember.Route.extend({
goToFirstTab: Ember.Route.transitionTo("firstTab"),
goToSecondTab: Ember.Route.transitionTo("secondTab"),
index: Ember.Route.extend({
route: "/",
redirectsTo: "firstTab"
}),
firstTab: Ember.Route.extend({
route: "/firstTab",
connectOutlets: function (router) {
router.get('applicationController').connectOutlet('firstTab');
}
}),
secondTab: Ember.Route.extend({
route: "/secondTab",
connectOutlets: function (router) {
router.get('applicationController').connectOutlet('secondTab');
}
})
})
});
App.initialize(App.Router);
The second way, without Router.
Templates (note that actions` targets are changed)
<script type="text/x-handlebars" data-template-name="application">
<div class="tabpanel">
<div class="tabs">
<div {{action "goToFirstTab" target="controller"}}>First tab</div>
<div {{action "goToSecondTab" target="controller"}}>Second tab</div>
</div>
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="firstTab">
First Tab content
</script>
<script type="text/x-handlebars" data-template-name="secondTab">
Second Tab content
</script>
Code (pretty much the same, except that the code related to tabs is now moved to ApplicationController.
var App = Ember.Application.create();
App.ApplicationView = Ember.View.extend();
App.Router = Ember.Route.create();
App.FirstTabView = Ember.View.extend({templateName: "firstTab"});
App.FirstTabController = Ember.Controller.extend();
App.SecondTabView = Ember.View.extend({templateName: "secondTab"});
App.SecondTabController = Ember.Controller.extend();
App.ApplicationController = Ember.Controller.extend({
view: App.FirstTabView.create(),
goToFirstTab: function () {
this.connectOutlet("firstTab");
},
goToSecondTab: function () {
this.connectOutlet("secondTab");
}
});
App.initialize(App.Router);