I have a question on how to configure the inbuilt login functionality URL in ASP.net MVC Angular template. The web api url for login is "Account/Login" .
I add an href in layout.cshtml file as shown below
<data-ng-class="{active : activeViewPath==='/contact'}">
<br>
< href='#/contact'>Contact</a></li>
<br>
< data-ng-class="{active : activeViewPath==='/Login'}">
<br>
< href='~/Account/Login'>Login</a></li>
Now when I click any link(demo) , the functional URL is :
://ayz.com/#/demo
When I click Login (works fine):
://ayz.com/Account/Login#/home
When I click demo again (Account/Login gets appended):
://ayz.com/Account/Login#/demo
How to correct this ?
$routeProvider
.when('/home', { templateUrl: '/home/main', controller: 'MainController' })
.when('/contact', { templateUrl: '/home/contact', controller: 'ContactController' })
.when('/about', { templateUrl: '/home/about', controller: 'AboutController' })
.when('/demo', { templateUrl: '/home/demo', controller: 'DemoController' })
.when('/product', { templateUrl: '/home/product', controller: 'ProductController' })
Make sure that ng-view /ng-route just changes the view that is a part of the angular only.!!
As you were already in: //ayz.com/Account/Login
//ayz.com/Account/Login#/home
When you click on demo, the view is just getting updated:
//ayz.com/Account/Login#/demo
Make sure, you use angular route for Account/Logon too.
Try getting the usage of hashbang too.!! Angular js uses that and just updates the part after that for ng-view.!!
Firstly when you were in demo: ayz.com/#/demo with no MVC routing.
And later on when you clicked on Accountlogin the url changed to ayz.com/Account/Logon/#home
and now when you clicked on demo, the last hasbang part of url "#/home" will just be changed to "#/demo" as you are now in Account/Login. And note that Angular routing works only for one ng-View in a single page.
Related
I'm very used to Ionic, and I recently started developping web apps with Angular2. I have an issue with the Router concept.
Let's say I want to make an app, with a login page, which redirects you to a dashboard with 3 tabs.
I Have a LoginPage component, which checks the login details and redirects to the app. How can I simply switch component in Angular 2 ?
I defined my route
const appRoutes: Routes = [
{ path: 'login', component: LoginPageComponent }
];
And on my app.component page, I juste have a button
<h1>
{{title}}
<!--<a routerLink="/login">Heroes</a>-->
<button (click)="login()">Change</button>
</h1>
trigerring this function :
login() {
this.router.navigate(['/login']);
}
When I click this button, my URL is changing : http://localhost:4200/login
But my view is still my view with the button, there is no "change" like in Ionic with a NavController.setRoot(NewComponent)
I don't want to display my content in a <router-outlet>, I'd like to have distincts pages with navigation between them. Is this possible in Angular2 ?
Thank in advance for your help
I have a ASP.NET 4 Web Forms project written in C#. I would like to add Angular 2. I've seen a lot of examples on the web using ASP.NET 5 but I can't figure out how to do it in my project.
Have faced similar requirement and did some POC on this and definitely moving forward with it . I worked on with each .aspx page as stand alone angular 2 SPA app. This means each aspx page will have its own App.Component.ts and main.ts file(file name based on Angular 2 documentation). main.ts file contains the code to bootstrap the application (sample code below) so there will be a main.ts file for each .aspx page.
import {bootstrap} from 'angular2/platform/browser';
import {HTTP_BINDINGS} from 'angular2/http';
import {HomeComponent} from './home.component';
bootstrap(HomeComponent, [HTTP_BINDINGS])
.catch(err => console.error(err));
There will be one app.component.ts(named it home.component.ts for my home.aspx) file for each aspx page.
Now in the config file which contains Sytem.config details i defined new map and package entry for my home.aspx as shown below:
System.config({
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true,
experimentalDecorators: true
},
map: {
app: '../../Javascript/angular/app',
home: '../../Javascript/angular/home'
},
packages: {
app: { main: './main.ts', defaultExtension: 'ts'},
home: { defaultExtension: 'ts' }
}
});
And finally I moved the System.import code part to .aspx page(code below). Each page will import its own package defined in sytem.config.
<script>
System
.import('home/main-home')
.catch(console.error.bind(console));
</script>
here i have named my main.ts as main-home.ts.
Hopefully this helps you and others. Also i am open for suggestion and review/alternate solution of this approach.
For reference please see: bootstrapping-multiple-angular-2-applications-on-the-same-page
I totally agree with #pawan's answer but yes #pawan i found a nice solution of this. This solution definitely helped me and hope it will help all of you too.
We don't need to create main.ts and AppComponent.ts for each and every page.
We need to make our main component which we are bootstrapping dynamic. In our case, in app.component.ts, i am bootstrapping our component dynamically based on url of current page.
Let's say if your page is home.aspx then boostrap HomeComponent or about.aspx then boostrap AboutComponent
I am doing it by implementing ngDoBootstrap method as following.
export class AppModule {
url : string;
constructor(#Inject(DOCUMENT) private document: any){
this.url = this.document.location.href.toLowerCase();
}
ngDoBootstrap(app:ApplicationRef){
if(this.url.indexOf("home.aspx") > 0){
app.bootstrap(HomeComponent);
}
else if(this.url.indexOf("about.aspx") > 0){
app.bootstrap(AboutComponent);
}
}
}
This is how based on page url, we can dynamically bootstrap our Component and save a lot files of main.ts and app.component.ts for each page.
For this, you need to add entry for each component into entryComponents array of NgModule as below:
#NgModule({
entryComponents : [
HomeComponent,
AboutComponent,
]
})
Hope this helps.
change your index.html base route to your webpage
<base href="/YourWebPageRoute">
include the page inside the webform
<% Response.WriteFile("index.html"); %>
I want to add css styles to my login page. The application works as:
ion-side-menus where is:
ion-side-menu-content inside of it is:
ion-nav-view name="content"
Controller looks like:
.state('myapp.login', {
url : "/login",
views: {
'content': {
templateUrl: "myApp-core.login.html",
controller : 'LoginController'
}
}
})
The problem is that when I changed a main css it causes on all sub pages but I want to change only my login page (myApp-core.login.html). Thanks for any help.
Simplest make your own css class "xxx-login" and apply it on html tag?
if you want to extend ionic class, you can use Less, ionic provide all tools to build it.
I am developing a mini SPA, using angular, inside my ASP.Net MVC 5 application. Basically I want to use this mini SPA for onboarding/registration workflow, and use ASP.Net MVC views and routes for other functionality.
For Onboarding mini SPA I have defined an MVC route:
routes.MapRoute(
name: "Onboarding",
url: "onboarding/{*catchall}",
defaults: new { controller = "Onboarding", action = "Create" }
);
The Angular configuration looks like:
(function () {
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider, $locationProvider) {
$routeProvider.caseInsensitiveMatch = true;
$routeProvider.when('/onboarding', { templateUrl: '/app/Views/CreateShop.html', controller: 'onboardingController' })
.when('/onboarding/add-product', { templateUrl: '/app/Views/AddProduct.html', controller: 'onboardingController' })
$locationProvider.html5Mode(true);
});}());
The Create.chtml uses acts as a container/entry point for this mini SPA.
<div ng-controller="onboardingController">
<div ng-view></div>
</div>
#section scripts {
#Scripts.Render("~/bundles/angularOnboarding")
}
PROBLEM: When I am inside the mini SPA my navigation links/routes break e.g. navigation to contact page or about page (MVC Views) doesn't work. Angular seems to handling all routing requests. Also, navigation from an anchor tag which navigates to some MVC route doesn't work.
Putting the url in the browser works.
How do I make this work for my hybrid scenario?
Would really appreciate any suggestions or solution, Thanks.
So I was wiring up my AngularUI State Views using the following code
$stateProvider
.state('dash.landing', {
url: '/',
templateUrl: '/partials/backup/dash/landing.html',
controller: 'LandingController'
})
.state('dash.order', {
url: '/overview',
templateUrl: '/partials/backup/dash/order/index.html',
controller: 'OrderController'
})
.state('dash.order.overview', {
url: '/overview',
templateUrl: '/partials/backup/dash/order/overview.html',
controller: 'OverviewController'
})
.state('dash.order.email-accounts', {
url: '/email-accounts',
templateUrl: '/partials/backup/dash/order/email-accounts.html'
})
.state('dash.order.alerts', {
url: '/alerts',
templateUrl: '/partials/backup/dash/order/alerts.html'
});
And for some reason my views were not being rendered and I was getting a $stateNotFound error telling me it could not find dash.landing. After 15 minutes of pulling my hair out I simply changed dash.landing' to just bedashand all of a sudden it worked perfectly! Can someone please explain why I can't usedash.landing` for the root route state name?
Yes, ui-router uses dot notation to implement parent/child relationships among views. You can use dot notation with the default routeProvider to name routes. You can also use dot notation to name application modules, letting other developers know there is a organizational hierarchy in place.