I'm fairly new to Angular and still figuring stuff out.
What i want to do is i have an app that uses an index.html and then inside it's body the ng-view.
Now i need to ignore that for a specific route /game in my application and use a different one. Basically i wanna do an iframe 100% in that new view but all the CSS and sidebars etc from the index.html file screws up the whole thing.
app.config(function($routeProvider){
.when('/game',{
templateUrl: 'game.html'
}),
.when('/home',{
templateUrl: 'views/home.html'
})
});
How should i approach this ?
Thanks
Related
I want to organize my angular code like this:
project/
thing/
thing.js
view.html
other_thing/
other_thing.js
view.html
Then I want to include routing that picks the thing based on url params:
$routeProvider
.when('/thing', {
templateUrl: 'thing/thing.html',
controller: 'thingController'
})
.when('/other_thing', {
templateUrl: 'other_thing/other_thing.html',
controller: 'otherThingController'
});
$locationProvider.html5Mode(true);
What I'm missing is how to load thingController and otherThingController on demand. If I've got 50 different controllers I don't want to load all of them up front, I want to wait until the client actually visits the route to load the js, similar to how the templateUrl isn't loaded until the user navigates there.
May be this will help you
ocLazyLoad
angularAMD
So I am having an issue in setting up my angular routes.
Moving straight to the point, my angular routes defined don't hit my mvc controller and thus action methods.
The action method return partial views, which represent my templates.
Here is an image of my route configuration.
Here is an image of my controller actions.
I am sure I am missing something, but can't seem to figure out what.
This example helps you to understand better about $routeProvider and $locationProvider.
The only issue I see are relative links and templates not being properly loaded because of this.
from the docs regarding HTML5 mode
Be sure to check all relative links, images, scripts etc. You must either specify the url base in the head of your main html file () or you must use absolute urls (starting with /) everywhere because relative urls will be resolved to absolute urls using the initial absolute url of the document, which is often different from the root of the application.
In your case you can add a forward slash / in href attributes ($location.path does this automatically) and also to templateUrl when configuring routes. This avoids routes like example.com/tags/another and makes sure templates load properly.
Here's an example that works:
<div>
Home |
another |
tags/1
</div>
<div ng-view></div>
And
app.config(function($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: '/partials/template1.html',
controller: 'ctrl1'
})
.when('/tags/:tagId', {
templateUrl: '/partials/template2.html',
controller: 'ctrl2'
})
.when('/another', {
templateUrl: '/partials/template1.html',
controller: 'ctrl1'
})
.otherwise({ redirectTo: '/' });
});
If using Chrome you will need to run this from a server.
Well what worked for me was to remove the setting for the $locationProvider.html5Mode. As someone mentioned in another stack overflow post, here MVC5 and Angular.js routing - URLs not matching using the locationProvider in MVC seems to screw up the routing. I am still to investigate why exactly this happens, as all I thought it did was remove the '#' in the url, but seems like there's more to it
When making an ionic app what is the best method of creating different pages of information?
Right now I have separate html documents for each page and a button pointing to each html document; however, I feel like angular/ionic provides a better way of doing so that I missed. For example, the app I am making has a main page with buttons for 5 places. Each button loads a completely new html document with info about the place labeled on the button.
If it is too much to explain, a link answering what I am asking is fine
Thanks
What you want are angular templates. You can write a template once, and then pass in information from the controller to take the place of the angular bindings. You have one master template, that changes the angular bindings depending on which information you pass it in the controller.
For example, you could have your application load in partial templates for each location, and display them all on your main page without having to hit a new html document. Check out the example in the Angular Tutorial.
And the Live Demo
You can do it by uiROUTER, For example: angular.module('ionicApp', ['ionic']) .config(function ($stateProvider, $urlRouterProvider) { $stateProvider .state('menu', { abstract: 'true', templateUrl: 'templates/menu.html', controller: 'MenuCtrl' }) / ... / .state('menu.work', { url: '/work', views: { menuContent: { templateUrl: 'templates/work.html', controller: 'WorkCtrl' } } }); $urlRouterProvider.otherwise('/work'); });
I have an angular application such that the routing might look like this:
angular.module('app').config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : 'views/home.html',
controller: 'homeController'
})
.when('/foo', {
templateUrl : 'views/foo.html',
controller: 'fooController'
})
.otherwise({
redirectTo : '/'
});
$locationProvider.html5Mode(true);
});
Now, this may be an overly simple question, but can I serve a static page that is never going to change and needs no added javascript from me without specifying it with a .when route? For example, say I want to serve Googles Webmaster tools verification like so:
/googlee23dc3443279f430.html
Do I really need to create a .when('/googlee23dc3443279f430.html') route?
EDIT: We also did a server rewrite to make it so that non '/' routes would still serve up the index.html file, as specified in this wiki (and to get html5mode(true) working on page refreshes):
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
Would be nice not to have to add rewriteconditions each time we want to add a static page
if the entire page should be replaced with static html, you can use a link with ng-href (to make it dynamic and data based and not hardcoded) - https://docs.angularjs.org/api/ng/directive/ngHref
I have been beating my head against the wall trying to figure out why angularJS routing won't work in phonegap for me. I have all the files setup correctly and i don't receive any errors. I'm trying to change the url using the $location.url service directly from angular. So when you tap on a div the controller will have $location.url("profile") for example and nothing will happen. I tried the solution found in this stackoverflow but that's not working for me. Am I doing something wrong, or is there a better way to be approaching this? Following is the routing I have setup
var app = angular.module("App", ["hmTouchevents"])
.config(function($routeProvider) {
$routeProvider
.when("/index.html", {
templateUrl: "/views/login.html",
controller: "loginCtlr"
})
.when("/landing", {
templateUrl: "/views/landing.html",
controller: "landingCtlr"
})
.when("/single-view/:id", {
templateUrl: "/views/single-view.html",
controller: "singleViewCtlr"
})
.when("/restaurant", {
templateUrl: "/views/restaurant-info.html",
controller: "restaurantCtlr"
})
.when("/profile/:id", {
templateUrl: "/views/profile.html",
controller: "profileCtlr"
})
.when("/lists/:list", {
templateUrl: "/views/lists.html",
controller: "listsCtlr"
})
.when("/follow/:type", {
templateUrl: "/views/follow.html",
controller: "followCtlr"
});
});
A sample controller would be:
app.controller("listsCtlr", ["$scope", "$location", function($scope, $location){
$scope.goTo("profile");
}]);
As always any help is much appreciated.
I had a problem similar to this tonight. The core issue here is that PhoneGap doesn't have a web server built in. If you're developing locally, you probably are using a web server, so you can do something like: http://localhost/#/profile and the routing will work.
However, PhoneGap loads your code with a file:// URL, not http://. If you do $location.url("profile") you're replacing the entire URL with just file://profile, which doesn't exist. Same thing if you use a link like this: My Profile
The solution is to somehow get your links to point to the right place. If you're using $location.url() you can prefix it with your file path: $location.url( window.location + "#/profile" )
If you're just making a link, you should be able to get away with taking off the leading slash to make it a relative URL: My Profile becomes My Profile
Had the exact same issue... I was able to fix this easily by adding the following code to the head of my index.html file.
<base href="/android_asset/www/" />
Hope this helps.
in your controller try...
$location.path('/profile');
After much tinkering, here's what worked for me!
If you can use $location.path() within the controller, it should work as expected, but if you need to use href-style links, you can build the links off the angular "base" page (e.g. main.html):
Link To Profile