Ive been trying to setup my Angular webApp to work with prerender.io however my app does not have any of the built in middleware they desire; I have decided I want to work with express.js as most the tutorials set up the project using this.
Example setup
I am able to create a project that works with prerender if I make it new using the express.js generator plugin. Thats all good and dandy but it doesn't really help me out; as I am not creating a project, rather I want to add prerender to my existing project. Is there a way to create a new express.js project and import an entire angular app (with all folder structure; etc, basically moving the app's root directory over to the new express app)into it and have all the routing etc be unaffected?
How would one go about adding Prerender to an already created angularJS webapp? (like the basic one seen below) I've tried a bunch of times throughout the day and just ended up installing a ton of ugly dependancies into my project and having to delete them all; any help is appreciated. ::
app.js:
// app.js
var app = angular.module('myPremadeApp', ['ngRoute'])
$locationProvider.hashPrefix('!');
.config(function($routeProvider, $locationProvider){
$routeProvider.when('/', {
templateUrl : 'views/homeView.html',
controller: 'homeController'
})
.when('/about', {
templateUrl : '/views/aboutView.html',
controller: 'aboutController'
})
.when('/features', {
templateUrl : '/views/featuresView.html',
controller : 'featuresController'
})
.otherwise({
redirectTo : '/'
});
});
function mainController($scope) {
$scope.seo = {
pageTitle : '', pageDescription : ''
};
}
function homeController($scope) {
$scope.$parent.seo = {
pageTitle : 'setup the thing',
pageDescripton: 'stuff for description'
};
}
function aboutController($scope) {
$scope.$parent.seo = { pageTitle : 'About',
pageDescripton: 'We are a content heavy website so we need to be indexed.'
};
}
function featuresController($scope) {
$scope.$parent.seo = { pageTitle : 'Features', pageDescripton: 'Check out some of our awesome features!' };
}
Related
I upgraded our AngularJS package from 1.4.14 to 1.5.11. In doing so, our routes unexpectedly stopped loading. The base url for our application is baseurl.com/app.
I've reviewed the angularjs migration documents, but cannot find anything that has helped me to fix this issue.
App.config(function($routeProvider) {
$routeProvider
// route for the top level
.when('/', {
template : '<home></home>',
})
// route for a new project
.when('/new', {
template : '<new></new>',
})
// route for the project overview page
.when('/view', {
template : '<overview></overview>',
})
// route for the manage page
.when('/manage', {
template : '<manage></manage>',
})
// route for the base perform page
.when('/perform', {
template : '<perform></perform>',
})
// default route
.otherwise('/');
});
I was able to resolve the issue by adding the code below
.run(['$route', function() {}]);
This was a known issue in the AngularJS documentation that I missed somehow.
https://code.angularjs.org/1.5.11/docs/api/ngRoute#known-issues
I have an MVC test project I am working on to see if I can get angular routing to work with it.
What I mean by work with it is that I want to be able to have a landing page for my app: www.testapp.com
Then when people log in I want MVC to route them to testapp.com/Dashboard/#/and then I want to be able to use ng-view to load pages with Angualar like so:
testapp.com/Dashboard/#/PageOne, testapp.com/Dashboard/#/PageTwo, etc.
Here is what I have tried:
main.js:
angular.module('App', ['ngRoute', 'ngResource']);
angular.module('App').config(function ($routeProvider) {
$routeProvider
.when('/Dashboard', {
templateUrl: 'Dashboard/Index'
})
.when('/PageOne', {
templateUrl: 'Dashboard/PageOne'
})
});
~/Views/Home/Index.cshtml was my landing page that did not use angular routing it just had ActionLinks to Login and Register
~/Views/Dashboard/Index.cshtml is where I used ng-app and ng-view and I had links like so: Dashboard, Page One
The problem is that when I go to testapp.com/Dashboard when it loads the URL turns into testapp.com/Dashboard#/ rather than testapp.com/Dashboard/#/
The other problem is that when I click on my links it goes straight back to the Home/Index and the URL is like so: testapp.com/#/PageOne but the Home is being displayed
in my RouteConfig.cs file it is just the default:
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
So my question is what is wrong with my code here that makes it not function like I want it to? What do I have to add/change?
Thank you!
So I figured out the issue was with the way I was writing my links. Once my actual angular app was loaded (I was at the Dashboard rather than the landing page where angular is initialized) I had to change my anchor tag hrefs from \#\{Route} to '/Dashboard/#/{Route}'. Here is my updated angular route config:
angular.module('App').config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'Index'
})
.when('/PageOne', {
templateUrl: 'PageOne'
})
});
This completely fixed my problem so I can now have angular routing take over the show when it needs to and also have MVC ActionLinks in my application as well.
Hope this helps someone else!
NOTE
I did not change anything in my MVC RouteConfig.cs you can leave the default. Also I had to get rid of ViewStart because that was messing things up.
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 working on web application using AngularJS and have used ui.router for routing.
I have configured the app
.state('init', {
url: '/',
controller: 'LocalizationCtrl',
templateUrl: 'partials/common/init.html'
})
.state('login', {
url: '/login',
templateUrl: 'partials/auth/login.html',
controller: 'LoginCtrl',
resolve: {
skipIfLoggedIn: skipIfLoggedIn
}
});
In init I load the localization json from server
If I hit the following URL it all works fine
http://localhost/app/index.html
However if I hit the following URL or any other state directly the localization files do not load
http://localhost/app/index.html#/login
How can I make sure that when app is loaded first using any URL the localization code should execute and not bypassed.
/ Bu default go to state -
angular.module('yourModuleName').run(["$location", function ($location) {
$location.url('/');
}]);
So, when you refresh or take your web application, your site will go to url /, so it should invoke your state, init to work.
Or you can use $state to go to a state upon starts
/ Bu default go to state -
angular.module('yourModuleName').run(["$state", function ($state) {
$state.go('init');
}]);
Its very simple there is a property "Resolve" you can use that.
In your parent state you can write this -
.state('parentState', {
resolve : {
localize : function() {
//Localization code here
}
}
};
Resolve will ensure that your localization work will be done before controller is loaded.
I am learning Angular. I am watching a 2 years old video, and I am trying to use route concept and using in view1.CShtml (Remember, its CShtml and not html, while in the video, he uses html).
I also find it wierd that Views path starts as ~Views/View1.cshtml (Fair enough I have it in Views folder) on contrary to Partial/View1 where the video demonstrator has. Now, I do not understand what is this "~" for when I have similar directory structure like demonstrator.
Also, sadly, the view1 is not loading :( What is the problem? Of course he use single module and controller, but I am trying to use dependent module also for my own learning....What's the problem here?
angular.module('App', ['myFirstApp']).controller('Fir', function ($scope) {
$scope.Customers = [
{ name: 'Kiam', city: 'Los Angeles' },
{ name: 'Se', city: 'Los Vegas' }
]
}).config(function ($routeProvider) {
$routeProvider
.when('/View1',
{
controller: 'Fir',
templateUrl: '~Views/View1.cshtml'
})
.when('/View2',
{
controller: 'First',
templateUrl: '~Views/View2.cshtml'
})
.otherwise({ redirectTo: '/View1' });
});
var temp = angular.module('myFirstApp', []);
var controllerCollection = {};
controllerCollection.First = function ($scope) {
$scope.Customers = [
{ name: 'Sita', city: 'Los Angeles' },
{ name: 'Ram', city: 'Los Vegas' },
]
};
temp.controller(controllerCollection);
.cshtml pages are C# razor pages, which need to be loaded using ASP.net view engine, Like you could declare one action inside A controller and do return a cshtml view from there
Code
public ActionResult View1()
{
return View();
}
Or else you need to create a static folder, which will not been included in Views folder, Asp.net restricted access to the views folder.
See reference SO Answer
you could try like this .when('/View1', { controller: 'Fir', templateUrl: '/MyViews/View1'}), it's enough. and also check the route config the routing path is added or not. If you are using the $routeprovider it will automatically generated the routing path in global.asax.
No need to specify additionally the .cshtml for the view page to be displayed.