I am moving my mvc application in angularjs.
I have different areas in the application. I want to move between areas using MVC routing. And I want to use Angular routing inside each area.
So in my server I have default routing configuration... and in my angular I have the following configuration:
.config(function ($routeProvider, $locationProvider) {
var viewBase = '/Views/AngularTemplates/';
$routeProvider
.when('/Servizi/Cpe/New', {
templateUrl: viewBase + 'Cpes/insert.html',
controller: 'cpesController'
})
.when('/Servizi/Cpe', {
templateUrl: viewBase + 'Cpes/list.html',
controller: 'cpesController'
});
$locationProvider.html5Mode(true);
})
Servizi is my area and Cpe is the controller in the area... When I move from /Servizi/Cpe to /Servizi/Cpe/New it works because it is managed by angular.
But I cannot move from /Home to /Servizi because it's managed by MVC routing.
How can do that ?
A very quick solution to move between 'areas' would be:
window.location.href = "myAreaPath/mypage.asp";
Try it and tell us if work for you ;)
Related
Here's the scenario:
I have a main AngularJS app that uses ui-router for routing, like any other app. I also have a smaller AngularJS module that functions as its own app, not requiring that it be a submodule of my larger app.
I would like for the smaller app to handle its own routing and templating, too. Goal here being, the mini app can be loaded by another AngularJS app, or loaded on its own, and have all its routing and templates set up already.
Main App:
angular
.module('mainApp')
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('mainAppParent', {
url: '/',
templateUrl: 'main.html',
controller: 'mainCtrl',
controllerAs: 'vm'
})
.state('mainAppParent.miniJournalApp', {
url: '/journal'
});
}]);
Mini App:
angular
.module('miniJournalApp')
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('mainJournalState', {
url: '/',
templateUrl: 'mainJournalView.html',
controller: 'JournalCtrl',
controllerAs: 'vm'
})
.state('newEntry', {
url: '/new'
});
}]);
I'm planning on having all the components of the mini app being an AngularJS .component(), so I'm wondering if the correct way to do this is to just let the parent app handle routing, and let the mini app handle the templates when I define each component/directive. Then, when I want to load the mini app on its own, I would just write a wrapper AngularJS module with new routing.
As we can see that in angular ui router we are using $stateProvider so basically we are using a provider.
In an angular app the provider is loaded once and then angular puts the instance in cache so next time when the provider is injected somewhere then same instance is used.
As same instance of $stateProvider is used across angular app so it is perfectly fine to define separate states for submodules.
And this is a good practice for code maintenance.
I have used it in many projects
I am creating single page application using node,express and angular js. I am not getting that how to manage routes in both angular and express(node).
Please help me and If possible give some example code or link.
If you wanna create a single page application you need to use the router of angular for navigate in your app without reload, but in generally you need data from server, to organise this data you need a route on node.
This is a example of ngRoute
http://plnkr.co/edit/L4Hxf7KiiVuouPWRv4pl
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template: 'hello'
})
.when("/red", {
template: 'hi'
})
.when("/green", {
templateUrl: 'hello.html'
})
.when("/blue", {
templateUrl: 'blue.html'
});
});
example of node route
http://expressjs.com/en/guide/routing.html
I am interested in using a Angular Material based contact form on a Shopify hosted page. Because the rest of the site is not built with Angular Material (yet), I would like to implement this contact form in a modular fashion, and have it isolated within its own div. The problem I've run into is that the stylesheet (currently linked in the head) for Angular Material is affecting page elements outside of the desired area of influence. Is it possible to isolate Angular Material content away from the rest of the page? How might one go about it?
You can create separate Angular module for you required template file and Inject angular material there. Link angular-material CSS in that template file only. This way It won't affect other pages.
The only way i think you can do this is by using an iframe because the css will always combine, and will follow the rule of cascade so the one that is below will override the others.
You can use angular-ui-router states with seperate angular modules. So you can inject angular-material one of the state of your routes then use it.
module.exports =
angular.module('parentModule', [
'angularMoment',
require("./childFolder"),
])
.config(function ($stateProvider) {
$stateProvider
.state('parent', {
url:"parent/",
views:{
'': {
templateUrl: 'main/layout.html',
controller: 'MainController'
}
}
})
.controller('MainController', require('./mainController'));
module.exports =
angular.module('childModule', [
'ngMateiral', 'ngMessages'
])
.config(function ($stateProvider) {
$stateProvider
.state('parent.child', {
url: "parent/:id",
views: {
'': {
templateUrl: 'main/layout.html',
controller: 'MainController'
},
'content#main': {
templateUrl: 'main/child/layout.html'
controller: 'ChildController'
}
}
});
})
.controller('ChildController', require('./childController'));
I am using $routeProvider with an angular app so I have a configuration like so:
$routeProvider
.when '/compilations',
templateUrl: 'angular/templates/player_compilation.html'
controller: 'compilationController'
.when '/news',
templateUrl: 'angular/templates/player_news.html'
controller: 'newsController'
.otherwise
redirectTo: '/compilations'
So this will give me the pages: www.mydomain.com/#/ compilations and www.mydomain.com/#/news
Is it possible for me to use the url: www.mydomain.com? If so, what would be the configuration?
Additional Explication
What I am trying to do (and perhaps this is a lost cause) is use angularjs for only part of the domain. so www.mydomain.com/news, and www.mydomain.com/compilations are part of the angular app, but www.mydomain.com/sign_in gets served separate, non-angular content. So this works, but I am trying to get the base domain: www.mydomain.com to be part of the angular app without a redirect. I have been unable to figure out how to do this?
I solved this by using $location html5 modes. For pages outside the angular app I created a controller which reloaded the page:
.otherwise
templateUrl: 'angular/templates/blank_page.html'
controller: 'redirectController'
I have an MVC 5 app with areas and I am trying to use the ui-router for AngularJs within one of my areas but I noticed that the templateUrl is wrong. It is trying to use a relative path but since I am using MVC routes and an Area the path to the template is incorrect.
The url to my area controller action is localhost:3789/Admin/UserManager .
The actual path is /Areas/Admin/Scripts/app/usermanager/partials/userlist.html .
angular.module("bsAdmin.userManager", ["ngResource", "ui.router", "ui.bootstrap", "bsPromiseTracker", "bsBusy", "angular-growl", "ngAnimate"])
.config(function ($stateProvider, $urlRouterProvider) {
// default state
$urlRouterProvider.otherwise("/userlist");
$stateProvider
.state('userlist', {
url: "/userlist",
templateUrl: "partials/userlist.html"
});
});
Angular ui-router tries to load the partial template using localhost:3789/Admin/partials/userlist.html
What are some techniques I can use so that the script will use the correct url to load the partial?
If your Angular javascript is in your .cshtml file, you can use the ASP.NET MVC URL helper to build the URL.
$stateProvider
.state('userlist', {
url: "/userlist",
templateUrl: "#Url.Content("~partials/userlist.html")"
});
});