I am working on a project with more 300+ pages based on AngularJS.
Everything is all right, but I'd like to find a way to get rid of those 300+ lines for routing.
Here my thoughts :
User goes on url /settings/company
AngularJS has to load templateUrl at '/template/'+settings/company+'.html'
Then AnguarJS loads controller SettingsCompany+'Ctrl'
Do you think if it is possible ?
If you are using ui-router which I would recommend you can create your routes Dynamicly all you need to do is
var state = {
url: someUrl
template: someHtml
controller: someController
};
$stateProviderRef.state(TheStatename, state);
You obviously need to do that before loading the view. I personally have a static login in my app and after i know which user logged in i load different modules and with this i basicly create the states dynamicly and load the Controller files with lazyload.
Hope this was helpful
Related
I know this question maybe duplicate.But I am still not getting valid results based on those answers.Anyways i have following doubt:
I want to implement angularjs with loading controller files on demand, with template routing.I have used requirejs concept for this.But I am not able to load ONLY controller files on demand.
For ex.
app.config(function($routeProvider) {
$routeProvider.when('/', {
controller:'page1',//I want to load controller file here
templateUrl:'page1.html'
});
});
I have used resolve concept here,but it didn't helped.
In above code I want to load controller file and also bind it to respective view.Please provide any solution or reference.If possible please provide detailed solution.
Thanks.
On one page I load content via ajax according to user picks (filters), to ensure that loaded content stays in place if user reloads or lands on the page, I put the picked filters into the url query string. Since I load the content via ajax on this particular page I don't need to reload the entire page every time a new filter is picked by the user, so I prevent browser to react on url change with the following config:
app.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(true);
}]);
However this affects the entire app and prevents all other pages from reloading on url change, the behavior I don't want. How can I make this configuration to affect only one particular controller within my app?
If your goal is to prevent reloading the page when the query string changes, html5Mode is entirely the wrong tool for the job. You want reloadOnSearch: false which can be applied globally or to individual routes:
$routeProvider
.when('/foo', {
controller: 'fooCtrl',
templateUrl: 'foo.html',
reloadOnSearch: false
},
...
);
https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
From Angular's documentation on $locationProvider, maybe the cause of that behavior is by design:
rewriteLinks - {boolean} - (default: true) When html5Mode is enabled,
enables/disables url rewriting for relative links.
If your app is reacting to the url to make a change as a sort of RESTful api I would recommend using ngRoute or even better uiRouter.
Hope that helps.
This is a tricky situation, and you might not like my suggestion; heck I don't even like this suggestion because it breaks the whole awesomeness of a single page application.
But what you could do, is to create a separate html file (lets call it pick-filters.html). On that new html file, have a new ng-app and therefore a separate app.js file for this particular page. In this new app.js file (lets call it pick-filters-app.js), you can use the app.config snippet that you have shown here. This should fix your problem of all pages not reloading because only pick-filters.html is referencing pick-filters-app.js which has this config snippet.
on our company, we're currently working on a single page web application. Users can login and fill their profiles with data and share those with other subscribers (it's a social network-ish application).
Now, I've imagined this schema:
the users data are provided by a UserService, using REST APIs to recover profiles information;
the profiles related pages are managed by a unique controller (ProfileController);
my question is: what's the best way to associate a route (let's say "view-profile") to a specific controller method (ProfileController.viewProfile)? Is this a right pattern in AngularJS?
Thanks!
Investigating further I've found that the best way to achieve the result I want is by using the resolve in the state configuration, as explained in this article: https://scotch.io/tutorials/making-skinny-angularjs-controllers.
EDIT:
I'll try to explain it a little bit. What I'm trying to achieve is to route a specific application state to a controller method, in order to avoid preloading a huge subset of data everytime I access the controller. Let's say I've this situation in my ui-router
.state('view-profile', {
url: '/view-profile',
templateUrl: 'components/profile/profile.html',
controller: 'ProfileController'
})
[...]
.state('edit-profile', {
url: '/edit-profile',
templateUrl: 'components/profile/edit-profile.html',
controller: 'ProfileController'
})
Since the ProfileController could potentially do a lot of stuff, not necessary related to edit/view, I'd like to set a specific controller method to be called when I navigate to these urls.
In other MVC frameworks you can associate a route to a specific controller method, so you'll have
route: /edit-profile -> resolvesAs: ProfileController.editProfile(args)
Unfortunately, there's no really a way to do this in AngularJS 1.4, at least not using the ui-router.
But fortunately enough, we can use the resolve attribute on the ui-router configuration to avoid preloading useless data for a specific route.
I am having some trouble understanding the difference between all those $state, $stateProvider and $routeProvider.
The problem is that I am trying to implement an infinite-scroll in a simple app with posts. Since I managed to do that, the nested urls for more info about the post are not working. Here is a link from plnkr.co (http://embed.plnkr.co/66hgiIxNGTXOuVZgqKvZ/preview)
When on the feed tab everything seems fine, but when a link is clicked, empty page is displayed.
Let me try to make it simple.
$stateProvider
To maintain application's state and provide a basic block to configure URL to represent view accordingly.
Each part of the state represents.
url : The URL route that can be accessed via href properties
templateUrl: The path to the view template HTML file
controller : The controller to be used in this view
$urlRouterProvider
Simply use for routing the user to specified url. where .otherwise method do route to the default url when the path doesn't match any of the urls you configured.
in your example you should handle the parameter in your controller to render the detail page.
I recommend you to follow this example to understand how navigation and routing can simply implement in your application.
I'm trying to create an ASP MVC 4 project with Ui-Router, however I've come across a problem.
My current server-side routing configuration looks like this:
// Controller/Action route
routes.MapRoute(
name: "Default",
url: "{controller}/{action}");
// Redirect any other routes to Site/Index so AngularJS can handle routing
// Place routes above this otherwise they will be ignored
routes.MapRoute(
name: "Catch-All Redirect to Index",
url: "{*url}",
defaults: new { controller = "Site", action = "Index" }
);
And client-side
angular.module('loluk.home')
.config(['$stateProvider', function ($stateProvider) {
$stateProvider.state('index', {
url: '',
templateUrl: '/home/index'
});
}]);
Site/Index, the redirect action, simply contains the HTML file that has the ng-app directive. Any other actions/controllers will return API data, or a template. So, in my case, I have Home/Index which returns a template containing <h1>Hello, World!</h1>.
This is all fine and dandy if one of my states in ui-router requests "home/index" via templateUrl for my application. However, the problem I have now is that if I browse to http://localhost/Home/Index, I will see the template in it's raw form - rather than what I am expecting to see, which is the whole application in the Home/Index state. This makes sense as that is how I have configured it.
I initially thought "OK, well I can solve this problem by redirecting everyone to Site/Index (where the main file is stored) and using inline templates". Well, this works well, until you consider that
The HTML file containing index.html is going to get ridiculously large and contain every template
This breaks escaped_fragment crawling
So right now I am at a loss of how to make this work; I could use inlining, but that would make web pages load slowly and break SEO. I could stick with what I have.. but that will break any bookmarks that end-users create.
Making template calls a ChildActionOnly worked well until the fact that ChildActionOnly will return a server 500 (rather than a redirect), and UI-Router appears to not qualify as a "Child Action" as requesting the template through templateUrl also triggered the server 500.
I did come across this question, however it doesn't express how exactly to solve the template situation.
Another avenue I have just pursued is having a templates area that contains all of my templates, and an api area that contains all of my api details (/templates/ and /api/ respectively). This solves the whole reloading page problem, though I am still unsure of how to approach the escaped_fragment crawling from this point of view.
I've accomplished this by creating two Areas in MVC - one for API that routes to /api/ and one for Templates that routes to /templates/. AngularJS will make calls to /template/{controller}/{action} which will return a plain HTML view, and make RESTful calls to /api/{controller} for retrieving data.
It's not a perfect solution but it works.