I want merge angular routing in asp .net mvc . can any one help me do this
my app file as above here i have area dashboard and dashboard mvc views and controllers. i want to create a menu as flows
dashboard
areaDashboard
html page
<ul>
<li> dashboard page </li>
<li> areaDashboard </li>
</ul>
app.js file
var app = angular.module('myApp' , ['ngRoute']);
app.app.config(function ($routeProvider) {
$routeProvider
.when('/dashboard1', {
templateUrl: 'Dashboard1',
controller: 'dashCtrl'
})
.when('/area1/area1dashboard', {
templateUrl: 'Area1/Area1Dashboard',
controller: 'areaDashCtrl'
})
.otherwise({
redirectTo: ''
}); }).controller('dashCtrl' , function($scope){
$scope.message =" this is dashboard controller";
}).controller('areaDashCtrl' , function($scope){
$scope.message =" this is area dashboardcontroller";
});
dashboard/index.cshtml
<script type="text/ng-template" id="Dashboard1">
<div ng-controller="dashCtrl">
{{message}}
</div>
area1/area1Dashboard/index.cshtml file
<script type="text/ng-template" id="Area1/Area1Dashboard">
<div ng-controller="areaDashCtrl">
{{message}}
</div>
</script>
i'm getting error like this
Error: [ng:areq] http://errors.angularjs.org/1.4.5/ng/areq?p0=dashCtrl&p1=not%20aNaNunction%2C%20got%20undefined
at Error (native)
at http://localhost:3376/Scripts/angular.min.js:6:416
at pb (http://localhost:3376/Scripts/angular.min.js:22:41)
at Sa (http://localhost:3376/Scripts/angular.min.js:22:128)
at http://localhost:3376/Scripts/angular.min.js:80:25
at link (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js:7:180)
at $ (http://localhost:3376/Scripts/angular.min.js:73:46)
at L (http://localhost:3376/Scripts/angular.min.js:61:495)
at g (http://localhost:3376/Scripts/angular.min.js:54:326)
at http://localhost:3376/Scripts/angular.min.js:53:388(anonymous function) # angular.min.js:107(anonymous function) # angular.min.js:80$ # angular.min.js:73L # angular.min.js:61g # angular.min.js:54(anonymous function) # angular.min.js:53(anonymous function) # angular.min.js:55m # angular.min.js:60v # angular-route.min.js:6m.$broadcast # angular.min.js:135(anonymous function) # angular-route.min.js:11(anonymous function) # angular.min.js:118m.$eval # angular.min.js:132m.$digest # angular.min.js:129m.$apply # angular.min.js:133g # angular.min.js:87L # angular.min.js:91A.onload # angular.min.js:92
Related
In Nuxt I have 3 pages (index, login and register) that needs to show the same structure, the code above.
It's a form with tabs. then in the tag it's were I show some diferences.
I decided to put that code in the default.vue file.
But now, I have more pages were I don't need to show the "forms" class and the tabs.
Any suggestion about how can I achieve it?
Thank you
<template>
<div>
<div class="container is-fluid">
<navbar></navbar>
<div class="places">
<div class="structure">
<div class="forms">
<div class="tabs help-tabs">
<ul class="tab_title">
<li :class="[tab === 'register' ? 'is-active' : '']">
<a #click="tab='register'">Register</a>
</li>
<li
:class="[tab === 'login' ? 'is-active' : '']"
#click="goToRoute('login')">
<a #click="tab = 'login'">Login</a>
</li>
</ul>
</div>
</div>
<nuxt />
</div>
</div>
</div>
</div>
</template>
You could either create a second layout beside the default.vue and use it only for these routes (index, login and register) so you have:
auth.vue for index, login and register pages
default.vue for all other pages
You could then specify which layout you want to use in the page file directly like here
export default {
layout: 'auth',
}
Or you stick to using one single layout (default.vue) and create a component (eg. tab component) which you then display on all 3 of those routes.
I am trying to implement an angular material select component in the AG-GRID as per the example described here
However when I click on the cell that should make the select appear, it does not appear and in the console the following error appears:
core.js:4002 ERROR TypeError: Cannot read property 'element' of undefined
at mat-select.component.ts:37
This corresponds to the following method in the MatSelectComponent:
// dont use afterGuiAttached for post gui events - hook into ngAfterViewInit instead for this
ngAfterViewInit() {
window.setTimeout(() => {
this.group.element.nativeElement.focus();
});
this.selectFavouriteVegetableBasedOnSelectedIndex();
}
This component has been copied exactly from the example given, except that I put the template and styles in their own HTML/SCSS files respectively.
#Component({
selector: 'radio-cell',
template: './mat-select.component.html'
styles: ['./mat-slect.component.scss']
})
However, when I include the HTML template within the component like in the example it works!
#Component({
selector: 'radio-cell',
template: `
<mat-card>
<div class="container" #group tabindex="0" (keydown)="onKeyDown($event)">
<mat-form-field>
<mat-select panelClass="ag-custom-component-popup" [(ngModel)]="favouriteVegetable">
<mat-option *ngFor="let vegetable of vegetables" [value]="vegetable">
{{ vegetable }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</mat-card>
`,
styles: ['./mat-slect.component.scss']
})
Is there any explaination of this behaviour or way around putting all this HTML into the component?
EDIT 1:
The component includes the 'group' template reference variable in the component like below, so should it not be available to the ngAfterViewInit() method?
#ViewChild("group", { read: ViewContainerRef, static: true })
public group;
Your error Cannot read property 'element' of undefined comes from the fact that this.group is undefined because angular tries to query it in the template but doesn't find it <div class="container"#grouptabindex="0" (keydown)="onKeyDown($event)">
Is there any example how to write test case in vue? The click event not working.
The template in App.vue
<template>
<div class="main">
<textarea v-model="input" id="input" rows="3" placeholder="Please entry colors, eg: '#000','#fff' or ['#000', '#fff']"></textarea>
<button type="button" class="btn btn-primary parse" #click="parse">Go!</button>
<ul>
<li v-for="color in colors">
<span v-bind:style="{ background: color}"></span>
{{color}}
<li>
</ul>
karma test
describe('App.vue', () => {
it('should render correct color', () => {
const vm = new Vue({
template: "<div><app></app></div>",
components: {
App
}
}).$mount()
console.log(vm.$el)
vm.input = '#333, #444'
vm.$el.querySelector('.btn').click()
expect(vm.$el.querySelector('ul li:eq(0) span').style.background).toBe('#333')
})
})
And I have output the vm.$el, it shows like below, missing the v-model and #click
Does it give you any error? Are you using PhantomJS as browser?
I don't think click is supported on PhantomJS
See here PhantomJS; click an element
I am fairly experienced using Angular pre-1.5, but I am currently starting to develop a web application based on 1.5 components. After much troubleshooting, I still can't seem to get a basic template working - can I get another set of eyes to please tell me what is wrong with the following simple menu component? I appreciate any assistance that may be offered.
var appMenuTemplate = "
<nav class='menu'>
<ul>
<li ng-repeat='item in menuCtrl.menuItems'>
{{ item }}
</li>
</ul>
</nav>
";
var appMenuController = function() {
var self = this;
self.menuItems = [
'home',
'about',
'portfolio',
'experience'
];
};
angular
.module('exampleApp', [])
.component('appMenu', {
template: appMenuTemplate,
controller: appMenuController,
controllerAs: 'menuCtrl'
});
https://jsfiddle.net/dzaslow/ej8r3vyo/1/
Here's how to do it. I learned how to use components mainly from reading todd motto's posts. You should probably also use templateUrl rather than template.
(function() {
'use strict';
angular
.module('exampleApp', [])
.component('appMenu', {
template: "<nav class='menu'> \
<ul> \
<li ng-repeat='item in vm.menuItems'> \
{{ item }} \
</li> \
</ul> \
</nav>",
controller: AppMenuController,
controllerAs: 'vm'
});
function AppMenuController() {
var vm = this;
vm.menuItems = [
'home',
'about',
'portfolio',
'experience'
];
}
AppMenuController.$inject = [];
})();
.menu > ul > li {
display: inline;
margin-right: 1em;
}
<!DOCTYPE html>
<html ng-app='exampleApp'>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
</head>
<body>
<app-menu></app-menu>
</body>
</html>
I have a routing related question.
App.Router.map(function(){
this.resource('whiteBoards',function(){
this.resource('whiteBoard',{path:'/:whiteBoard_id'},function(){
this.resource('image');
this.resource('video');
});
});
this.resource('dummy');
});
App.WhiteBoardsRoute = Ember.Route.extend({
model: function(){
return this.store.find('whiteBoard');
}
});
App.ImageRoute = Ember.Route.extend({
model: function(){
return this.store.find('image');
}
});
If I click all navigational links manually all things works as expected.
my templates:
<script type="text/x-handlebars" data-template-name="application">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="navbar-brand" href="/index.html">Routing Test</a>
</div>
<ul class="nav navbar-nav">
<li>{{#link-to 'whiteBoards'}}WhiteBoard{{/link-to}}</li>
<li>{{#link-to 'dummy'}}Dummy{{/link-to}}</li>
</ul>
</div>
</nav>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="whiteBoards">
<ul class="nav nav-tabs whiteBoards">
{{#each whiteBoard in controller.content}}
<li>
{{#link-to 'whiteBoard' whiteBoard}}{{whiteBoard.title}} {{/link-to}}
</li>
{{/each}}
</ul>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="whiteBoard">
<div class="whiteBoard">
<H3>WhiteBoard {{controller.content.name}}</H3>
</div>
<ul class="nav nav-tabs">
<li>
{{#link-to 'image'}}Images{{/link-to}}
</li>
<li>
{{#link-to 'video'}}Videos{{/link-to}}
</li>
</ul>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="image">
<div class="imagelist">
<H3>Images</H3>
<ul>
{{#each img in controller.content}}
<li>{{img.name}}</li>
{{/each}}
</ul>
</div>
</script>
The problem occurs if I try to activate the image route (as default child route) in combination with a whiteBoard navigation click.
This mean If I select a whiteBoard a list of images should also be shown (here only a simplified image list).
To achieve this I insert:
App.WhiteBoardIndexRoute = Ember.Route.extend({
redirect: function(){
this.transitionTo('image');
}
});
The first time it works as expected (the selected whiteBoard is shown and the image list).
If I try to navigate to another whiteBoard the problems begins.
After inserting WhiteBoardIndexRoute I can't navigate to another whiteBoard.
What is the problem ?
I'm working with ember.js verion 1.0
I known that I can implement the display of the image list using the renderTemplate method in the WhiteBoardRoute but I think that it should be possible to use the "default child route concept".