We Keep Coding

Where should i put the html files for angular routing?

var myapp = angular.module('myApp', ['ngCookies','ui.bootstrap','ngTouch','ui.bootstrap-slider','ngRoute']);
myapp.config(function($interpolateProvider,$locationProvider,$routeProvider) {
$routeProvider.when('/overview', {
templateUrl: '/mysite/mdm/mdm_overview.html',
controller: 'AddStudentController'
}).
when('/dashboard', {
templateUrl: '/mysite/mdm/mdm_dashboard.html',
controller: 'AddStudentController1'
}).
otherwise({
redirectTo: '/overview'
});
When I run this code following error occurs:
Unknown provider: $templateRequestProvider <- $templateRequest <- $route <- ngViewDirective
What is the actual problem? Do I need to put the html file inside static folder?

Make sure to include angular.js and angular-route.js files.
And the files should be in same versions.
angular.js - v1.3.0-rc.5
angular-route.js - v1.3.0-rc.5

Angularjs routing doesnt work when reloading the page manually

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');
});

AngularJS: [$compile:tpload] Failed to load template

My angularjs example app is running fine in my netbeans ide based local server. But when I moved the application to nginx server it gives me the following error in the browser.
Error: [$compile:tpload] Failed to load template: views/login.html
http://errors.angularjs.org/1.3.15/$compile/tpload?p0=views%2Flogin.html
at REGEX_STRING_REGEXP (angular.js:63)
at handleError (angular.js:16133)
at processQueue (angular.js:13248)
at angular.js:13264
at Scope.$get.Scope.$eval (angular.js:14466)
at Scope.$get.Scope.$digest (angular.js:14282)
at Scope.$get.Scope.$apply (angular.js:14571)
at done (angular.js:9698)
at completeRequest (angular.js:9888)
at XMLHttpRequest.requestLoaded (angular.js:9829)
My app.js
appModule
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/',
{
controller: 'loginController',
templateUrl: 'views/login.html'
})
.when('/main',
{
controller: 'dashboardController',
templateUrl: 'views/dashboard.html'
})
.otherwise({redirectTo: '/'});
}])

If you use node.js, try this
app.use(express.static(path.join(__dirname,'yourFolder/invoices')));

I came to find out that my issue was regarding Default $http Headers. I had just recently added a default header for Authorization, and a default Accept for application/json.
SURPRISE!!! It turns out that those $http headers are NOT only applied to $http calls you make to your endpoints... but also to every call made that pulls your Routing html files. And since html files will explode if using those headers, the whole thing fails.
I simply stopped setting the Default $http headers, and wrote a side service that my microservice calls would use since they need app/json. Then my Angular Routing calls went back to using standard headers.

Extract data from current URL and use it in controller in angularjs

I am devveloping a website using angularjs in which only 1 html page is present. I want to show the record by giving record Id from url as abc.in/1. When I try to give this Id from url, it gives 404 not fount error. But when I give abc.in#1 it works fine and displays the record.
I tried
angular.module('myApp', [
'ngRoute', 'ngResource', 'ngCookies',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers',
'ui.bootstrap', 'ngAnimate', 'ngDragDrop' //'ngSanitize',
]).
config(['$routeProvider','$locationProvider', function ($routeProvider,$locationProvider) {
$routeProvider.when('/',
{
templateUrl: '/Login.html',
controller: 'LoginController'
});
$routeProvider.when('/:id',
{
templateUrl: '/Login.html',
controller: 'LoginController'
});
$routeProvider.otherwise({ redirectTo: '' });
if (window.history && window.history.pushState) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}
in my app.js and in Login.html (which is default and only page in my application) is as-
<base href="/">
in head tag.
But this will only converts abc.in#1 to abc.in/1 when I try to refresh the page it will give error as-
HTTP Error 404.0 - Not Found
The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.
As per the given code I first need to give #1 in url and then it will converts into /. But I want to give /1 initially. How to do that?

Minification error with django compressor

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...)