We Keep Coding

Angular ng-view not displaying [leaning angular]

I'm learning Angular and I'm having problem on the routing. I've tried to solve it myself but have no idea what it can be.
Here's my script and a Plunker link of my script
var singleApp = angular.module('singleApp', ['ngRoute'])
.config([$routeProvider, $locationProvider, function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/home.html',
controller: 'mainController'
})
.when('/about', {
templateUrl: 'pages/about.html',
controller: 'aboutController'
})
.when('/contact', {
templateUrl: 'pages/contact.html',
controller: 'contactController'
});
// Deletes # in URL with HTML History API
$locationProvider.html5Mode(true);
}])
.controller('mainController', function($scope) {
$scope.message = 'This is the main page';
})
.controller('aboutController', function($scope) {
$scope.message = 'This is the about page';
})
.controller('contactController', function($scope) {
$scope.message = 'This is the message page';
});
I've imported the both angular and routing scripts in html.
The pages has just $message

The first issue is with your config. You're using a great practice by using an array for your injections but the first arguments must be strings. Change this:
.config([$routeProvider, $locationProvider, function($routeProvider, $locationProvider) {
to this
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
Then... remove this line:
$locationProvider.html5Mode(true);
Here's information about HTML5 mode:
https://docs.angularjs.org/error/$location/nobase
Enabling HTML 5 Mode in AngularJS 1.2
http://plnkr.co/edit/EXMiz3bAEttTQac0uvgh?p=preview

You have syntax error, config function should be like this
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
http://plnkr.co/edit/4csvt10yfolOepqECh51?p=preview

Removes the following line
//Deletes # in URL with HTML History API
$locationProvider.html5Mode(true);
Many of the errors and especially reference can view them in the browser console
You must modify the parameters of your config, should go well
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

Compare and see your code
var singleApp = angular.module('singleApp', ['ngRoute'])
singleApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/home.html',
controller: 'mainController'
})
.when('/about', {
templateUrl: 'pages/about.html',
controller: 'aboutController'
})
.when('/contact', {
templateUrl: 'pages/contact.html',
controller: 'contactController'
});
});
singleApp.controller('mainController', function($scope) {
$scope.message = 'This is the main page';
});
singleApp.controller('aboutController', function($scope) {
$scope.message = 'This is the about page';
});
singleApp.controller('contactController', function($scope) {
$scope.message = 'This is the message page';
});

Controllers across multiple files in Angular JS

I am trying to modularize the implementation of an angular js project. I am aiming to implement different controllers in their own js files. But that doesnt seem to work.
The following is my config.js ( where the primary module is also defined )
(function() {
var app= angular.module("spa", [
//oob angular modules
//3rd party modules
'ui.router',
'ui.bootstrap'
]);
app.config(['$stateProvider', '$urlRouterProvider', configRoutes]);
//function to config the routes
function configRoutes($stateProvider, $urlRouterProvider) {
$stateProvider
.state('dashboard', {
url: '/',
templateUrl: '../App/Views/dashboard.html',
controller: 'dashboardController',
controllerAs: 'vm'
})
.state('supplier', {
url: '/suppliers',
templateUrl: '../App/Views/supplier.html',
controller: 'supplierController',
controllerAs: 'vm'
})
.state('event', {
url: '/events',
templateUrl: '../App/Views/event.html',
controller: 'eventController',
controllerAs: 'vm'
})
.state('partner', {
url: '/partners',
templateUrl: '../App/Views/partner.html',
controller: 'partnerController',
controllerAs: 'vm'
})
$urlRouterProvider.otherwise('/');
}
app.controller('dashboardController', dashboardController)
function dashboardController() {
alert('dashboard-same function');
}
}());`
the dashboardController triggers fine. But other controllers, written in seperate files dont trigger.
(function () {
'use strict';
var app = angular.module('spa');
app.controller('eventController', eventController);
function eventController() {
alert('event');
}
});
This is the sequence of my references:
<!--External Libs-->
<script src="../Scripts/jquery-1.9.1.js"></script>
<script src="../Scripts/angular.js"></script>
<script src="../Scripts/angular-animate.js"></script>
<script src="../Scripts/angular-sanitize.js"></script>
<script src="../Scripts/angular-cookies.js"></script>
<script src="../Scripts/angular-ui-router.js"></script>
<script src="../Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<!--Jquery Plugins-->
<!--Custom Libs-->
<script src="../App/Common/config.js"></script>
<!--Controllers-->
<script src="../App/Controllers/event.js"></script>
<script src="../App/Controllers/partner.js"></script>
<script src="../App/Controllers/dashboard.js"></script>
<script src="../App/Controllers/supplier.js"></script>
Thanks in advance

As per my comment, you forgot to execute the wrapping function of eventController.js. It should be
(function () {
'use strict';
var app = angular.module('spa');
app.controller('eventController', eventController);
function eventController() {
alert('event');
}
})();
//^^--------You forgot these
If it doesn't work after said fix, please create a fiddle from your local code instead of the fiddle code to prevent any typo errors and I will take a look.
Also I don't see routes.js in your html, or maybe you meant config.html.

Not completely sure what is going wrong on your side, but here is an example of how I do it:
For example I am using the following setup for modularizing my AngularJS app (v1.3.6):
index.html:
<html>
<head>
<title>Modularize</title>
<!-- load module -->
<script src="app/app.js"></script>
<script src="app/app.constant.js"></script>
<script src="app/app.config.js"></script>
<script src="app/app.run.js"></script>
<!-- load controllers/services/directives/factories -->
<script src="app/controllers/MyController.js"></script>
</head>
<body>
<!-- REST OF THE APP -->
</body>
</html>
app.js
var myapp = angular.module('spa', ['ui.router']);
app.constant.js
myapp.constant(function () {
});
app.config.js
myapp.config(function ($stateProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'app/views/home.html',
controller: 'MyController',
});
});
app.run.js
myApp.run(function () {
});
MyController.js
myapp.controller('MyController', function ($scope) {
});

Changing angular route not able to work anymore

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

AngularJS, $routeProvider

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

Routing and Multiple view dones not show in angular js?

HI i m try to show routing and multiple view in my anguar js code but there is not show can u please help me what is the problum and how to solve it.
Please Help me .
My Code it this
HTML File Index.html
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<title>New Page Angular</title>
<script type="text/javascript" src="angularjs-1_2_25-angular.min.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
App.js Code
var phonecatApp = angular.module('phonecatApp', ['ngRoute', 'phonecatControllers']);
phonecatApp.config(['$routeProvider',
function($routeProvider){
$routeProvider.
when('/phones', {
templateUrl: 'phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phone/:phoneId', {
templateUrl: 'phone-details.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phone'
});
}
]);
Contrller .js code
var phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller('phoneListCtrl', ['$scope', '$http', function($scope, $http){
$http.get('phones.json').success(function(data){
$scope.computers = data;
});
}]);
phonecatControllers.controller('phoneDetailCtrl', ['$scope', '$routeParams',
function($scope, $routeParams){
$scope.phoneId = $routeParams.phoneId;
}]);
To complete code is here Plunker

You missed
in your index.html and you've got few spelling errors phones instead of phone ...
please see fixed version here http://plnkr.co/edit/KwxKVgVpZXVEeLVQGBNn?p=preview
var phonecatApp = angular.module('phonecatApp', ['ngRoute']);
phonecatApp.config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider){
$routeProvider.
when('/phones', {
templateUrl: 'phone-list.html',
controller: 'phoneListCtrl'
}).
when('/phone/:phoneId', {
templateUrl: 'phone-detail.html',
controller: 'phoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}
]);
phonecatApp.controller('phoneListCtrl', ['$scope', '$http', function($scope, $http){
$http.get('phones.json').success(function(data){
$scope.computers = data;
});
}]);
phonecatApp.controller('phoneDetailCtrl', ['$scope', '$routeParams',
function($scope, $routeParams){
$scope.phoneId = $routeParams.phoneId;
}]);