Hi I've changed my (previously working) angular website route from ui.route to ngRoute as there was a view minor issues.
It's now rendered my website useless. The links don't work and it's full of errors. I've spent hours trying to fix it.
I keep getting errors:
controllers.js:8 Uncaught SyntaxError: Unexpected token .
angular.js:38
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.6/$injector/modulerr?p0=financeApp&p1=Error…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.6%2Fangular.min.js%3A17%3A350)
I would like to be able to change between views via the navbar.
The only changes I have made was the CDN address, the script.js file and the controllers.js file.
controllers.js:
financeApp.controller('demoCtrl', function($scope) {
}
)
.controller('homeCtrl', function($scope) {
})
.controller('candidatesCtrl', function($scope) {
})
.controller('clientsCtrl', function($scope) {
})
.controller('aboutusCtrl', function($scope) {
})
.controller('trainingCtrl', function($scope) {
})
financeApp.controller('contactusCtrl', function($scope) {
})
financeApp.controller('joinusCtrl', function($scope) {
})
and script.js
var financeApp = angular.module('financeApp', ['ngRoute','rangeSlider','ui.bootstrap'])
financeApp.config(function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'partials/home.html',
controller: 'homeCtrl'
}).
when('/candidates', {
templateUrl: 'partials/candidates.html',
controller: 'candidatesCtrl'
}).
when('/clients', {
templateUrl: 'partials/clients.html',
controller: 'clientsCtrl'
}).
when('/aboutus', {
templateUrl: 'partials/aboutus.html',
controller: 'aboutusCtrl'
}).
when('/training', {
templateUrl: 'partials/training.html',
controller: 'trainingCtrl'
}).
when('/contactus', {
templateUrl: '/partials/contactus.html',
controller: 'contactusCtrl'
}).
when('/upload', {
templateUrl: '/partials/contactform.php',
controller: 'joinusCtrl'
}).
otherwise({
redirectTo: '/'
});
});
Couple of things to double check
1st
You are most probably missing or havent included files for one of the three dependencies ngRoute,rangeSliderui.bootstrap
2nd: Make sure you have included the script files in this order
<script src="your_path/angular.js"></script>
<script src='angular-route.js'></script>
<script src='ui-bootstrap.js'></script>
<script src='range-slider.js'></script>
<script src="your_path/script.js"></script>
<script src="your_path/controllers.js"></script>
3rd:
You are mixing chain pattern and referencing with variable
make sure you have financeApp in front of controller registration
financeApp.controller('homeCtrl', function($scope) {
})
At line 6 in controller.js there is a semi-colon - remove it. Infact they are everywhere, remove all of them.
Line 5 through 9 form a code like this.
.controller('homeCtrl', function($scope) {
});.controller('candidatesCtrl', function($scope) {
});
Do you see the . after simi-colon above? That's the problem.
You need to add the application in front of all your .controller statements:
financeApp.controller('homeCtrl', function($scope) {
});
financeApp.controller('candidatesCtrl', function($scope) {
});
financeApp.controller('clientsCtrl', function($scope) {
});
financeApp.controller('aboutusCtrl', function($scope) {
});
financeApp.controller('trainingCtrl', function($scope) {
});
And you need to remove the extra enter in:
financeApp.controller('demoCtrl', function($scope) {
});
Related
I'm trying to use Angular with my Codeigniter project. The problem is that it doesn't load the proper template file through angular router.
In the root instead of showing templateUrl: 'index.php/welcome/home', it loads the index.php/welcome. It loads the index page inside the controller instead of the ones I have specified.
Below is my code:
JS
var app = angular.module('MyCtrl', ['ngRoute', "ui.bootstrap.modal"]);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'index.php/welcome/home',
controller: 'mainController'
})
.when('/user', {
templateUrl: 'index.php/user/account',
controller: 'userController'
})
});
app.controller('mainController', function($scope) {
$scope.message = 'main con';
});
app.controller('userController', function($scope) {
$scope.message = 'user con!';
});
Welcome controller in Codeigniter:
public function home(){
$this->load->view('home');
}
Can someone tell me why this is not working and what I have done wrong?
I have just started learning angularJS but i can notice the same thing so many time that at some places when we start writing a function in angularJS i noticed that some people define the function they are going to use like this
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/addStudent', {
templateUrl: 'addStudent.htm',
controller: 'AddStudentController'
}).
when('/viewStudents', {
templateUrl: 'viewStudents.htm',
controller: 'ViewStudentsController'
}).
otherwise({
redirectTo: '/addStudent'
});
}]);
But the same function is working fine if we just write the function without this ['$routeProvider' like this
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(function($routeProvider) {
$routeProvider.
when('/addStudent', {
templateUrl: 'addStudent.htm',
controller: 'AddStudentController'
}).
when('/viewStudents', {
templateUrl: 'viewStudents.htm',
controller: 'ViewStudentsController'
}).
otherwise({
redirectTo: '/addStudent'
});
});
I know there is no big difference when coming to code writing but still is there any difference in both the ways. If yes, then is it about minifying? and is there any negative point other that that of using it?
Thanks in advance!
mainApp.config(['$routeProvider', function($routeProvider) {
}]);
This type define a controller is callled Inline Array Annotation. And It is min-safe. min-safe mean if you minify your code then it will still work.
mainApp.config(function($routeProvider) {
});
This type of define a controller is called 'Implicit Annotation'. And its not min-safe. min-safe mean if you minify your code then it will not work.
And there a another way to declare a controller $inject Property Annotation
var MyController = function($scope, greeter) {
// ...
}
MyController.$inject = ['$scope', 'greeter'];
someModule.controller('MyController', MyController);
read more info click here
By default, I am having a message in my scope. when i call my login page, i am not getting the message in the html.
i don't know what i miss here, any one figure-out please?
my app.js:
'use strict';
angular.module('myNewApp', ['ngRoute'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/login', {
templateUrl : 'js/scripts/views/login.html',
controller: 'js/scripts/controllers/loginCont.js'
})
.when('/register', {
controller: 'controllers/userRegisterCont.js'
})
.otherwise({
redirectTo: '/login'
});
$locationProvider.html5Mode('true');
}])
my lognCont.js :
'use strict';
angular.module('myNewApp')
.controller('loginCont', ['$scope', function ($scope) {
$scope.message = "Welcome";
}]);
my login html :
<h1>I am login here! {{message}}</h1>
what else missing here? any one help me
since i use html5 support still the url is with # http://localhost:3000/#/login
You need to pass the name of the registered controller as a String, or the controller function by itself.
So this:
.when('/login', {
templateUrl : 'js/scripts/views/login.html',
controller: 'loginCont'
})
should work
I have an rest api, in which the api is sending instruction to redirect (301 is being sent).
And I have my angular js code like this:
var request = $http.post(LOGIN_URL,{username:'tes',password:'test'})
request.success(function(html)
{
if(html.failure) {
console.log("failure")
$scope.errorMessage = html.failure.message
}
else {
console.log("Success here....")
$location.path("route")
}
})
I can see in the browser log that it is coming in the else part ( Success here..... is being printed). But the url is not changed. $location.path doesnt do anything; I have also tried $location.url which also results the same thing.
And also I'm injecting the $location to my controller.
Where I'm making mistake?
Thanks in advance.
Try something like this
$location.path("/myroute")
You have to have a ng-view on the page as well.
Also make sure you have a corresponding view with that name
and when you're registering your controller you have the '$location' var being injected in the declaration of your controller like this example:
controllers.controller('MyCtrl', ['$scope', '$route', '$location', 'MYService',
function($scope, $route, $location, MyService) {
// ... controller code
}])
also you might want to debug your route changing to see what is happening with a location change listener, like in this example:
return app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'partials/home.html',
controller: 'MyCtrl'
}).
when('/login', {
templateUrl: 'partials/login.html',
controller: 'LoginCtrl'
}).
when('/error/:errorId', {
templateUrl: 'partials/error.html',
controller: 'ErrorCtrl'
}).
otherwise({
redirectTo: '/home'
});
}]).run(function($rootScope, $injector, $location) {
$rootScope.$on("$locationChangeStart", function(event, next, current) {
console.log('current=' + current.toString());
console.log('next=' + next.toString());
});
});
});
I'm trying to learn how routes work in AngularJS to make a little application that allows users to login and write comments in a live feed. However the whole concept of routes is a bit blurry for me atm and i can't get this right.
My standard index.html containing an ng-view and necessary scripts.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="//cdn.firebase.com/js/client/1.0.21/firebase.js"></script>
<script src="//cdn.firebase.com/libs/angularfire/0.8.2/angularfire.js"></script>
<script src="//cdn.firebase.com/js/simple-login/1.6.3/firebase-simple-login.js"></script>
<script src="controller.js"></script>
<title>Test Login App</title>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
My controller containing module and routeprovider.
var myApp = angular.module('myApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'firebase',
'firebase.utils',
'simpleLogin'
]);
myApp.config(function($routeProvider) {
$routeProvider.
when('/', { controller: handleCtrl, templateUrl: 'handler.html' }).
when('/chatt', { controller: MyController, templateUrl: 'chat.html' }).
when('/login', { controller: loginCtrl, templateUrl: 'login.html' }).
otherwise({ redirectTo: '/handler' });
});
myApp.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(true);
}])
myApp.controller('MyController', ['$scope', '$firebase',
function($scope, $firebase) {
//CREATE A FIREBASE REFERENCE
var ref = new Firebase("https://ivproj.firebaseio.com/");
// GET MESSAGES AS AN ARRAY
$scope.messages = $firebase(ref).$asArray();
//ADD MESSAGE METHOD
$scope.addMessage = function(e) {
//LISTEN FOR RETURN KEY
if (e.keyCode === 13 && $scope.msg) {
//ALLOW CUSTOM OR ANONYMOUS USER NAMES
var name = $scope.name || 'anonymous';
//ADD TO FIREBASE
$scope.messages.$add({
from: name,
body: $scope.msg
});
//RESET MESSAGE
$scope.msg = "";
}
}
}
]);
The $routeprovider function should direct me to handler that is a simple .html file containing two buttons that in turn redirects to other htmls.
I think you have the syntax of the otherwise call in your config section wrong. Change what you have for this instead:
otherwise('/handler');
hope this helps...
you are missing '' in controller part. correct code should look like -
myApp.config(function($routeProvider) {
$routeProvider.
when('/', { controller: 'handleCtrl', templateUrl: 'handler.html' }).
when('/chatt', { controller: 'MyController', templateUrl: 'chat.html' }).
when('/login', { controller: 'loginCtrl', templateUrl: 'login.html' }).
otherwise({ redirectTo: '/handler' });
});
Make sure that you are referring the correct path in templateUrl.
and look at my earlier post to get a better idea - How to navigate in Angular App
myApp.config(function($routeProvider) {
$routeProvider.
when('/', { controller: 'handleCtrl', templateUrl: 'handler.html' }).
when('/chat', { controller: 'MyController', templateUrl: 'chat.html' }).
when('/login', { controller: 'loginCtrl', templateUrl: 'login.html' }).
otherwise({ redirectTo: '/handler' });
});
The $routeProvider.when() method in the above code actually creates a route with the given configuration. And the three .when()'s are creating three different routes.
But in your $routeProvider.otherwise('/handler'), you are telling angular to go to a route called /handler if the user tries to navigate anywhere outside the configured routes.
The mistake you are doing here is, you did not define a route at /handler. So you need to first define that route and then use it in .otherwise().
Try changing your configuration to reflect the below.
myApp.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when('/handler', { controller: 'handleCtrl', templateUrl: 'handler.html' }).
when('/chat', { controller: 'MyController', templateUrl: 'chat.html' }).
when('/login', { controller: 'loginCtrl', templateUrl: 'login.html' }).
otherwise({ redirectTo: '/handler' });
});