A sample of my code for handling routes:
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state( ... )
.state( ... )
.state( ... )
$urlRouterProvider.otherwise('/');
$locationProvider
.html5Mode(true)
.hashPrefix('!');
}]);
I am able to verify that $locationProvider is working insofar as commenting out .hashPrefix('!') succeeds in removing the bang from the URL, but no matter what I do, nothing seems to actually enable html5Mode; the hash always remains.
I used the Yeoman gulp-angular generator (rather, generator-gulp-angular, https://github.com/Swiip/generator-gulp-angular) and have tried changing up the settings for how my server works, but nothing I've tried there has worked yet.
Related
I'm having problems getting my NodeJS app to work with both Express JS and Angular JS, in particular I'm struggling to get the routing to work between the two.
My goal is to have ExpressJS drive the API and have Angular control the user facing routes.
Currently I have just two templates I wish to serve, the index page and the create-poll page.
Here's what I have so far,
Angular Routing -
'use strict';
var app = angular.module('showOfHands', ['ngRoute']);
app.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: 'partials/index'
}).when('/create-poll', {
templateUrl: 'partials/create-poll'
});
$locationProvider.html5Mode(true);
});
Express Routing -
'use strict';
app.get( '/partials/:name', function( req, res ) {
res.render( 'partials/' + req.params.name );
} );
app.get( '*', function( req, res ) {
res.render( 'partials/index' );
} );
When I try to click on my link to create a poll, I navigate to /create-poll but the template being used remains as the index page. If I navigate manually however to partials/create-poll in the browser I'm correctly served the create-poll template but this is then handled by Express JS as opposed to Angular.
I am trying to reload the page mannually from the browser but it doesn't work and says
Cannot GET /rate/4
My route:
angular.module('routing')
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'app/views/index.html'
})
.when('/rate/:cid', {
templateUrl: 'app/views/rate.html'
})
.otherwise({
'redirectTo': '/'
});
$locationProvider.html5Mode(true);
});
My assumption is that when I am reloading the main (index.html) is not loaded which is my base html file.
You do not have an angular problem, you have a server problem.
You're essentially working with a single page application.
When the server receives a request for rate/4 it must return index.html (or whatever the name that your main page is).
How you solve this will depend upon what platform you've implemented your server in.
For example, if you were running a node express server, you would have this kind of routing code:
app.get(/^\/rate\/.*/, function(req, res) {
// This matches a known pattern for a client-side route
res.sendFile(__dirname + '\\public\index.html');
});
app.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngCordova', 'ngCookies'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleLightContent();
}
});
})
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('HomePage', {
url: '/HomePage/:id',
templateUrl: 'templates/HomePage.html',
controller: 'HomePageCtrl'
})
.state('login', {
url: '/login',
templateUrl: 'templates/Login.html',
controller: 'LoginCtrl'
});
$urlRouterProvider.otherwise('/login');
});
controllers.js
angular.module('starter.controllers', [])
.controller('LoginCtrl', function ($scope, LoginService, $ionicPopup, $state, $location, $http, $cookieStore) {
$cookieStore.put('mycookie', 'cookie value');
var favoriteCookie = $cookieStore.get('mycookie');
alert(favoriteCookie);
})
Question:
I am new for Angular JS Ionic.I am trying to use cookie in angularjs.
When i use $cookieStore
I get below exception:
Exception:
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module ngCookies due to:
Error: [$injector:nomod] Module 'ngCookies' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
I added ngCookies to angular.module however it did not work for me.
Where i miss exactly ? How can i use cookie in angular js.
Any help will be appreciated.
Thanks.
I find that $cookies is not working in an Cordova/Phonegap app since the pages are served as a file URL. In an normal desktop browser it is also not working if you serve the pages from the filesystem - it's working when served via a server or localhost.
So I get to the assumption that angular $cookies don't work for Cordova apps.
Maybe theres a workaround for that? I just don't know, maybe someone nows an answer.
probably you have missed to add angular-cookies.js file
If so add it.
I am using $routeProvider service in my angular js but problem is on templateURl it provides me error
from server here is the error what i received
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
angular.js:11594 Error: [$compile:tpload] Failed to load template: /Testing/TestCompleted
and here is my angular code for app.js
var app = angular.module('app', ['ngRoute']);
app.controller('CreateController', CreateController);
app.config(function ($routeProvider) {
$routeProvider
.when('/',
{
templateUrl: "/Testing/TestCompleted",
controller:"AppCtrl"
})
});
app.controller("AppCtrl",function ($scope) {
$scope.newmodel = {
}
});
I found the solution the view is only returned by server by using route we can only get html view not cshtml because that is provided when action is called.
The url is giving a ERROR 500. This is that there is something wrong in de code of the page. Please attach your debugger and go to the url "/Testing/TestCompleted" with a browser and check what is wrong.
Edit:
If the url is really the right one. Please try the following:
angular.module('app', ['ngRoute'])
.controller("AppCtrl",function ($scope) {
$scope.newmodel = {}
})
.config(function ($routeProvider) {
$routeProvider
.when('/',
{
templateUrl: "/Testing/TestCompleted",
controller:"AppCtrl"
})
});
So that the controller is registerd before you do your config as in the example from Angular (https://docs.angularjs.org/api/ngRoute/service/$route).
The address of the template is likely wrong. I never had to use a format such as '/....' .
You probably want 'Testing/TestCompleted' if the directory Testing is at the root of your project (or './Testing/TestCompleted' both should work).
EDIT:
In any case you are probably using an html file for the template, with an extension .html . So use 'Testing/TestCompleted.html' for instance.
I'm using an automatic minification tool called django compressor. However django compressor minification seems to introduce errors.
Updated script with semicolons:
Before:
var app = angular.module('loginApp', [
"ngRoute",
"ngAnimate",
"ngTouch",
"mobile-angular-ui",
"ui.router",
"app.factories.storage",
"app.controllers.login",
"angular-loading-bar"
]);
app.config(function ($stateProvider, $urlRouterProvider) {
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/");
$stateProvider
.state('login', {
url: "/",
templateUrl: "/static/html/profile/login.html",
controller: "loginController"
})
.state('register', {
url: "/register",
templateUrl: "/static/html/profile/register.html",
controller: "loginController"
});
});
After:
var app=angular.module("loginApp",["ngRoute","ngAnimate","ngTouch","mobile-angular-ui","ui.router","app.factories.storage","app.controllers.login","angular-loading-bar"]);app.config(function(e,t){t.otherwise("/");e.state("login",{url:"/",templateUrl:"/static/html/profile/login.html",controller:"loginController"}).state("register",{url:"/register",templateUrl:"/static/html/profile/register.html",controller:"loginController"})})
Error:
Error: $injector:modulerr
Module Error
Module 'loginApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Error URL:
https://docs.angularjs.org/error/$injector/modulerr...
Update: It appears django compressor is not the issue, even using an online tool still gave the same error.... **http://jscompress.com/ **
The results were unminify = no errors, minify = errors
This is what seems to generate the error:
app.config(function(e,t){t.otherwise("/");e.state("login",{url:"/",templateUrl:"/static/html/profile/login.html",controller:"loginController"}).state("register",{url:"/register",templateUrl:"/static/html/profile/register.html",controller:"loginController"})})
You have two semicolons missing:
app.config(function ($stateProvider, $urlRouterProvider) {
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/") // <--- HERE
$stateProvider
.state('login', {
url: "/",
templateUrl: "/static/html/profile/login.html",
controller: "loginController"
})
.state('register', {
url: "/register",
templateUrl: "/static/html/profile/register.html",
controller: "loginController"
}) // <--- HERE
});
It's generally a good rule of thumb to always run javascript code through JSHint before minimizing (especially angular code which tends to really hate being minified...)