I have been looking through multiple tutorials and other stack overflow posts with no success for my app.js $routeProvider. Here is github link to project https://github.com/StudentJoeyJMStudios/PetPinterest.git
Here is my code for app.js
var app = angular.module('se165PetPinterestWebApp', [
'ngAnimate',
'ngCookies',
'ngRoute'
]);
app.config(['$routeProvider', function($routeProvider){
$routeProvider.when('/select',
{
templateUrl: '/views/categorySelection.html',
controller: 'CatSelCtrl'
}).
otherwise(
{
redirectTo: '/'
});
}]);
When I want to navigate to new page I know to injuect $location and manipulate the path using the $location dependency but it does not navigate to new page. Navigating pages this way does it reload js files such as my service file? Please help thank you in advance.
Did you remember to include the ng-view directive in your index.html?
ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service.
https://docs.angularjs.org/api/ngRoute/directive/ngView
Related
I have
<base href="/!#/">
at the top of my index.html file. When I go to URL http://localhost:5000/ everything works fine, it instantly add #!/ so the URL is http://localhost:5000/#!/ and page display as expected.
At the server side I have following code which should allow me to use my files
app.use(express.static(path.join(__dirname, 'public')));
Structure of my files is something like:
bookApp(folder)
server.js
public(folder)
index.html
app.js(ngRoute)
views(folder)
css(folder)
controllers(folder)
and my AngularJS routing is:
(function () {
'use strict';
angular
.module('app', [
'ngRoute'
])
.config(config);
function config ($routeProvider) {
$routeProvider
.when('/', {
controller: 'PostsCtrl',
templateUrl: 'views/posts.html'
})
.when('/register', {
controller: 'registerCtrl',
templateUrl: 'views/register.html'
})
.when('/login', {
controller: 'loginCtrl',
templateUrl: 'views/login.html'
})
.otherwise('/');
}
})();
The very first page (views/posts.html) load as expected but when I click
<li>Sign in</li>
the URL is http://localhost:5000/login not as like I thought http://localhost:5000/!#/login.
and it display:
Cannot GET /login
when I manually change URL to http://localhost:5000/#!/login it works fine.
How to fix this behavior?
The only solution I see is to get rid of <base> tag and in every link manually in href directive add !# before slash.
It looks like you are forgetting the ng-view directive: <div ng-view></div> which is the container for the content that is provided by your routing. Place this above your script if you have everything contained in one file.
You can also try:
<ng-view></ng-view>
<div class="ng-view"></div>
Is there any particular reason you are still using Angular 1? I know this isn't technically answering your question, but I would highly recommend that you start using the latest Angular. You can still keep legacy code but it will make a lot of what you are doing a lot cleaner and clear.
I am running through a course at the moment on AngularJS and it has just introduced the concept of routing.
My problem is the app.config function is setup in app.js however, the function doesn't seem to ever be called and therefore the routes are not setup.
The common problem is the ngRoute not being declared however, it is. I'm not sure if there is a problem with the versions of Angular that I'm using but these were taken from the online course.
I have a public plnkr for anyone to view and have a look at http://plnkr.co/edit/L2FG4M?p=preview
(function() {
var app = angular.module("githubViewer", ["ngRoute"]);
app.config(function($routeProvider) {
// If we navigate to /main then the page used will be main.html and the controller
// MainController, if however something else is provided then we will
// redirect to /main as well
$routeProvider.when("/main", {
templateUrl: "main.html",
controller: "MainController"
})
.otherwise({
redirectTo: "/main"
});
});
}());
Any help is appreciated, I've exhausted my options now.
Thanks
Marc
In your MainController.js file, you defined a new module with same name as in app.js:
angular.module("githubViewer", []);
What you want to do is retrieve the already defined module. You can acheive that by removing the []:
angular.module("githubViewer");
Look here at the "Creation versus Retrieval" section.
I have installed my Angular App in a location like this:
http://example.com/my-app
My App routing is like this:
var myApp = angular.module('myApp', ['ngRoute','ngAnimate', 'ui.bootstrap', 'angularFileUpload']);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/templates', {
controller: 'TemplatesController',
templateUrl: '/components/com_myApp/myApp/views/templates/template-list.html'
})
.when('/apps', {
controller: 'AppController',
templateUrl: '/components/com_myApp/myApp/views/apps/app-list.html'
})
.otherwise({
redirectTo: '/templates'
});
}]);
Now what happens is, when I go to http://example.com/my-app, the url instead of showing http://example.com/my-app#/templates it is showing as http://example.com/templates
It seems the otherwise condition is basically removing the base directory my-app# from the url. I have been scratching my head over this and after reading I also tried adding base url to head tag and tried changing the myApp.config to this:
myApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
....
}
But although the routing seems to work when using $locationProvider like the above, the base url is still not showing the way I want it. The url is showing like this http://example.com/templates without my-app in the url path. I dont want Angular to remove the base path from the URL and I want the urls to show like this http://example.com/my-app/..xyz...
Why is Angular doing this?
This is happening because you've instructed Angular to not use hashbang URLs by specifying $locationProvider.html5Mode(true). Remove or otherwise comment out that code snippet and if you specified <base href="/"> in your root template file, remove or comment out that also and just use ngRoute without those.
I am trying to modify the url of my angularjs app . Initially my urls were http:localhost:8080/a/web/app/index.html#/ and http:localhost:8080/a/web/app/index.html#/next
when I inserted the following code to my app.js
var App =angular.module('App', [
'ngCookies',
'ngResource',
'ngRoute',
])
.config(function ($routeProvider,$locationProvider) {
$routeProvider
.when('/', {
templateUrl: '/a/web/app/views/main.html',
controller: 'ctrl_main'
})
.when('/next', {
templateUrl: '/a/web/app/views/next.html',
controller: 'ctrl_next'
});
$locationProvider.html5Mode(true);
});
My new urls became http:localhost:8080 and
http:localhost:8080/next .
My problem is when I tried to reload the page at http:localhost:8080/next , 404 Not Found error is coming
That's expected with html5 mode. The browser, if you ask it to reload, will send a request to the URL it has in its location bar.
So you need to configure the server to actually send back the index.html page for all the bookmarkable URLs you use in the angular application. The whole page will reload, the angular app will restart, the $route service will restart, and will invoke the controller and display the partial configured for the URL.
I know the answer is a bit outdated, but in my case adding <base> attribute to index.html helped, for example:
<base href="/a/web/app/">
I developing with Ionic framework and angularjs.
My app have about 5 menu and design like google play store
New product
Bestseller
Promotion
Store
...
How do swipe to move "New product" to Bestseller page,...(google store play - like)
This my route:
myApp.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/',
{
controller: 'NewProductController',
templateUrl: 'app/views/newproduct.html'
})
.when('/bestseller',
{
templateUrl: 'app/views/bestseller.html',
controller: 'BestsellerController'
})
.otherwise({ redirectTo: '/' });
});
I tried ng-swipe-left, ng-swipe-right:
<div ng-swipe-right=goToPage('bestseller')>
// new product page
</div>
$scope.goToPage = function (page) {
$location.url(page);
};
but not animation.
Please help solution. thank you so much.
i've got angular swipe working (not with ionic tho, but i think it's an angular matter).
1) Be sure u have the ngAnimate and ngTouch as a module (ofcourse also add them in your html file as dependencies (js files):
angular.module('cbosApp', [
'ngAnimate', //this!
'ngTouch', // and this!
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'frapontillo.bootstrap-switch'
])
2) you forgot quotes (") arround your statement
<div ng-swipe-right="goToPage('bestseller')">
// new product page
</div>
DO not forget to put $location as a parameter in your controller!
angular.module('cbosApp')
.controller('SettingsCtrl', function ($scope,$rootScope,$location) {});
Your function is correct, in every controller if you do it your way!
IMPORTANT: IF u test it, the click and release click must happen on the DOM element (div here) otherwise it will not work.
I don't think the Ionic Framework provides such a thing at the moment. However, you can come pretty close using the SlideBox view (http://ionicframework.com/docs/angularjs/views/slide-box/).
Here is a quick example: http://plnkr.co/edit/FowDzU?p=preview