We Keep Coding

route that remains on the same page vuejs

this is the first time that this happens to me, when I click on the next button in the url bar the address changes but the page remains on the same as if I did not click on next. However, the new step is displayed below. I hope someone will have the solution. Thanks in advance.
<template>
<div>
<button #click="send" >next</button>
</div>
</template>
<script>
methods:{
send(){
this.$router.push('/page/commande/1')
}
</script>
//router
{
path:'/page/commande/1',
name:'ConfirmationSend',
component:() => import('../views/send.vue'),
},

Hey you should add the key as fullPath of route in the router-view. As it will not re render the page/component only if the url params change.
<router-view :key='$route.fullPath' />

For the moment I was able to work around the problem by adding an tag in the template part and the method I put this. $ Router.push in order to be able to use my navigation guards. This is a temporary fix while you figure out what the real problem is. Thank you all for your help.

How to create a messaging service across application in Angular JS?

I want to show messages to the end user, just like Google, at the top center of the web panel.
I don't want to include the HTML and related script everywhere in every form and list and chart that I have. I want to centralize this messaging functionality into a service (in Angular JS term) that can be used everywhere.
And just like Google, I want to be able to show rich text in my messages, that is, I want to include links and probably other HTML stuff there. For example instead of showing Customer is defined, I want to show Customer is defined, <a href='#/customer/addPhone'>Now add a phone</a> to guide the user.
What I've done is to place the messages HTML in the root layout of my single paged application:
<div class="appMessages">
<span ng-show="message" ng-click="clearMessage()" ng-bind-html="message"></span>
</div>
and in our controllers, we inject the $rootScope and try to set the message property on it.
Yet I get no results. Can you guide me please?

As a general best practice I would avoid using $rootScope to pass the messages but rather use a dedicated service to update the message,
On your case the problem might be that you need to use angular $sce service to mark your html as trusted.
or load ng-santizemodule instead (which is a seperate module you need to load see offical doc)
That is needed because angular security requires you to explicitly check the html, if the source of your messages are from your code only, and not users inupts you can use the trustAsHtml as you know for sure it a safe html.
On your controller inject $sce, and bind it to your scope, and then use the $sce.trustAsHtml(value) function.
<div class="appMessages">
<span ng-show="message" ng-click="clearMessage()" ng-bind-html="$sce.trustAsHtml(message)"></span>
</div>
angular.module('app', [])
.component('message', {
controller: function($sce, messagService){
this.messagService = messagService;
this.$sce = $sce;
},
template: '{{$ctrl.message}}<div ng-bind-html="$ctrl.$sce.trustAsHtml($ctrl.messagService.message)"></div>'
})
.service('messagService', function(){
this.message = '';
this.updateMessage = function(message){
this.message = message;
}
})
.controller('mainCtrl', function($scope, messagService){
$scope.updateMessage = function () {
messagService.updateMessage('wow <b style="color:yellow;">shiny</b> message');
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-controller="mainCtrl" ng-app="app">
<message></message>
<button type="button" ng-click="updateMessage()"> update message</button>
</div>

Angular Pass String to Function

This seems like it should be easy to do, but I am not sure why this isn't working. All I want to do is pass this string to the function.
I've tried this.
<form ng-submit="edit(type)" ng-init="type='debt'">
I've tried this as well.
<div ng-controller="FormCtrl">
<form ng-submit="edit('debt')">
<input type="submit" value="ADD">
</form>
</div>
and on the js side.
app.controller('FormCtrl', function ($scope, $cookies, $http){
$scope.edit = function(typ){
alert(typ);
}
});
All I want to do is alert out that word 'debt'. All I get is undefined.

All of you code is working fine, as you included $cookies dependency without having angular-cookies.js included in your app (module name ngCookies), it was breaking your page. Eiether you want $cookies there then add the respective reference. Or remove that $cookies reference.
Working Plunkr

Angular: $scope.msg Appearing in Console, Not on DOM

I've ran into a bit of a problem, wherein I've created a $scope.msg and it's printing to my console just fine, but it won't render itself on the DOM. I'm using Browserify to require angular and bundle my js.
index.html
<body ng-app="zeroApp" ng-controller="MainCtrl">
<div class="container">
<div class="item">
<h1>{{ msg }}</h1>
</div>
</div>
<script src="./js/app.js"></script>
</body>
app.js
(function() {
'use strict';
var angular = require('angular');
angular.module('zeroApp', [])
.controller('MainCtrl', ['$scope', function($scope) {
$scope.msg = "Hello Angular!";
console.log($scope.msg);
}]);
})();
Any reason why this isn't being exposed to the DOM and my <h1> element is empty?
Any help is appreciated. Thanks in advance!

Unfortunately I'm not an Angular expert so I can't explain the details, but the problem is that Angular wont detect that change, and thus it wont be propagated into the view. There are other ways around it, but one rather simple fix is to wrap the message into an extra object. Instead of using $scope.msg, try using $scope.msg.txt and it should work.
Hopefully someone with more knowledge of Angular's inner workings can clarify this further.
Here's another Fiddle to demonstrate: http://jsfiddle.net/29Luq8ns/1/
Notice I'm using $timeout in it. That's another way you could work around the problem. By changing $scope.msg inside a $timeout function, it will work, even without a delay parameter.

Figured it out. I was using Swig in my gulpfile.js to do render my HTML templates. The mustache templating language of Swig must have been conflicting with Angular's templating lang. Took it out of my build process and it works like a charm.
Thanks for all the help.

How to change the scope in Angular in a view which you are not yet in.

I have asked this questions many times without getting too much help on it. So I'm asking now if it's possible to change the values in a scope to a controller in a view which you are not in. When I'm referring to views, I mean different HTML pages.
Lets say, I'm in view 1 which is view1.html. The view has two buttons, button 1 and button 2. If I click on button 1 a new view will appear; view2.html which contains a bold text field for example {{test}} . When I click on button1 I want $scope.test to be "button1". Likewise when I click on button 2 I want the same view to open (view2.html), but this time I want the scope to be "button2" and not "button1".
The reason why I want this is to avoid creating many html pages, since I will have many different values after a while. For example, if I have 10 buttons on the first page (view1.html), I don't want to create 10 html pages in order to have different values for each button you click. I want to have 1 html page that can show different values depending on the button clicked. I'm using Appgyver Supersonic (Steroids) to develop this as an app.
I have tried to show and hide different bold tags, but are never able to do it. As you probably guessed, Im a noob with Angular, but I never receive a straight forward answer which is working in practice even how much I try. So please help, show me a easy example where you create two html page and one js. files, and how I can go from the first html page to the second and still show different values depending on my choice in the first view. Thanks! Below is a example code for what I want to achieve, but in this example the scope is not updated when I click on the buttons, it stays the same.
EXAMPLE CODE
view1.html
<div ng-controller="IndexController">
<button class="button button-block button-assertive" ng-click="button1()" value="checkitems" >
Button1
</button>
<button class="button button-block button-assertive" ng-click="button2()" value="checkitems" >
Button2
</button>
</div>
Indexcontroller.js
angular
.module('legeApp')
.controller('IndexController', function($scope, supersonic, $filter) {
$scope.test = 'test';
$scope.button1= function(){
$scope.test= 'button1';
var view = new supersonic.ui.View("legeApp#view2.html");
var customAnimation = supersonic.ui.animate("flipHorizontalFromLeft");
supersonic.ui.layers.push(view, { animation: customAnimation });
};
$scope.button2= function(){
$scope.test= 'button2';
var view = new supersonic.ui.View("legeApp#view2.html");
var customAnimation = supersonic.ui.animate("flipHorizontalFromLeft");
supersonic.ui.layers.push(view, { animation: customAnimation });
};
});
View2.html
<div ng-controller="IndexController">
<div class="card">
<div class="item item-text-wrap">
Test<b>{{test}} </b>
</div>
</div>
</div>

You can use $rootScope.$emit and $rootScope.$on to handle communication between different $scope or controller.
angular
.module('legeApp')
.controller('IndexController', function($scope, $rootScope, supersonic, $filter) {
$scope.button1= function(){
$rootScope.$emit('myCustomEvent', 'Data to send');
};
})
.controller('IndexController2', function($scope, $rootScope, supersonic, $filter) {
$rootScope.$on('myCustomEvent', function (event, data) {
console.log(data); // 'Data to send'
});
});

You can also use the service.
The service provide the global variable.So you can inject the service to different controllers.