AngularJS - No Error but no view - javascript

I'm making a project with angularJS and PHP.
I've made some edit but now it do not work...
The problems is that I've got no error in console and angular work (I can get it version) but my views are not displayed...
Can you help to uderstand why ?
Before I was getting serviceProvider error but I don't know if I fix it because no I'm stuck with this problems and I really don't know why...
Here is my app.js
'use strict';
var app = angular.module('MyApp', ['ngRoute']);
app.factory('services', ['$http', function($http) {
var serviceBase = '/services/';
var obj = {};
obj.getConseils = function(){
return $http.get(serviceBase + 'conseils');
};
obj.getConseil = function(conseilID){
return $http.get(serviceBase + 'conseil?id=' + conseilID);
};
obj.getRoulottes = function(type, marque, dimension, couche, prix){
return $http.get(serviceBase + 'roulottes?type=' + type + '&marque=' + marque + '&dimension=' + dimension + '&couche=' + couche + '&prix=' + prix);
};
obj.getRoulotte = function(roulotteID){
return $http.get(serviceBase + 'roulotte?id=' + roulotteID);
};
return obj;
}]);
/**
* #ngdoc overview
* #name MataneCaravaneGoApp
* #description
* # MataneCaravaneGoApp
*
* Module principal de l'application
*/
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
title: 'Accueil',
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/conseils', {
title: 'Nos conseils',
templateUrl: 'views/conseils.html',
controller: 'ConseilsCtrl'
})
.when('/conseil/:conseilID', {
title: 'Conseil',
templateUrl: 'views/conseil.html',
controller: 'ConseilCtrl'
})
.when('/roulottes/type/:type/marque/:marque/dimension/:dimension/couche/:couche/prix/:prix', {
title: 'Roulottes',
templateUrl: 'views/roulottes.html',
controller: 'RoulottesCtrl'
})
.when('/roulottes/type/:type', {
title: 'Roulottes',
templateUrl: 'views/roulottes.html',
controller: 'RoulottesCtrl'
})
.when('/roulotte/:roulotteID', {
title: 'Roulotte',
templateUrl: 'views/roulotte.html',
controller: 'RoulotteCtrl'
})
.otherwise({
redirectTo: '/'
});
});
app.run(['$location', '$rootScope', function($location, $rootScope) {
$rootScope.$on('$routeChangeSuccess', function (event, current) {
$rootScope.title = current.$$route.title;
});
}]);
app.controller('404Ctrl', function ($scope) {
});
app.controller('ConseilsCtrl', function ($scope, services) {
services.getConseils().then(function(data){
$scope.conseils = data.data;
});
});
app.controller('MainCtrl', function ($scope) {
console.log('test');
});
app.controller('RoulotteCtrl', function ($scope) {
});
app.controller('RoulottesCtrl', function ($scope) {
});
My index.html
<!doctype html>
<html class="no-js" >
<head>
<meta charset="utf-8">
<title>MyApp</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="styles/bootstrap.css" />
<link rel="stylesheet" href="styles/main.css">
</head>
<body ng-app="MyApp">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<header class="header">
<ul class="nav nav-pills pull-right">
<li class="active"><a ng-href="#">Accueil</a></li>
<li><a ng-href="#/conseils">Conseils</a></li>
</ul>
<h1 class="text-muted">MyApp</h1>
</header>
<div ng-view=""></div>
<footer class="footer">
<p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
</footer>
<!--[if lt IE 9]>
<script src="scripts/es5-shim/es5-shim.js"></script>
<script src="scripts/json3/lib/json3.js"></script>
<![endif]-->
<script src="scripts/jquery/dist/jquery.js"></script>
<script src="scripts/angular/angular.js"></script>
<script src="scripts/bootstrap/dist/js/bootstrap.js"></script>
<script src="scripts/angular-resource/angular-resource.js"></script>
<script src="scripts/angular-sanitize/angular-sanitize.js"></script>
<script src="scripts/angular-animate/angular-animate.js"></script>
<script src="scripts/angular-touch/angular-touch.js"></script>
<script src="scripts/angular-route/angular-route.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>

The problem is you are creating your module over and over. Check out the creation vs retrieval section in the docs https://docs.angularjs.org/guide/module.
You had a few typos causing you problems. I forget all the steps I took (one was the conseils controller was misspelled), but here is a plunkr that renders the main view:
app.controller('ConseilsCtrl', function ($scope, services) {
http://plnkr.co/edit/hkR8Wp?p=preview
links aren't quite right yet, but I'll leave that to you.

Related

ngRoute loading just one view

var app = angular.module("Signup", ['ngRoute', "ngAnimate"]);
app.config(function($routeProvider) {
$routeProvider
.when('/signup', {
templateUrl: "/views/signup.html",
controller: "FormCtrl"
})
.when('/otp', {
templateUrl: "/views/otp.html",
controller: "FormCtrl"
})
.when('/password', {
templateUrl: "/views/password.html",
controller: "FormCtrl"
})
.when('/identity', {
templateUrl: "/views/identity.html",
controller: "FormCtrl"
})
.otherwise({
redirectTo: '/signup'
});
});
app.controller("FormCtrl", [function() {
var store = this;
store.usersData = [];
store.newuser = {
};
this.submit = function() {
store.usersData.push(store.newuser);
console.log(store.usersData);
store.newuser = {};
};
}]);
I have four templates sitting inside my views folder, namely, otp.html, password.html, identity.html, signup.html
And I have an index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="/index.html">
<title>Sign Up | Rupaiya Exchange</title>
<link rel="stylesheet" href="assets/icons/font-awesome-4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/signupform.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.min.js" charset="utf-8"></script>
</head>
<body ng-app="Signup">
Signup
<div ng-view></div>
<!-- <script type="text/javascript">
document.getElementById('showPswd').addEventListener("click", function() {
var pwd = document.getElementById("newPassword");
if (pwd.getAttribute("type") === "password") {
pwd.setAttribute("type", "text");
} else {
pwd.setAttribute("type", "password");
}
});
</script> -->
<script src="assets/js/signup.js" charset="utf-8"></script>
</body>
</html>
But only signup page is getting loaded.
I have checked my code with almost tutorial that I could find on routing and views on the front page of google, but nothing is working.
I am not receiving any error either.
Also, upon clicking on the link <a href="#/otp">Signup<a> my url changes to this http://127.0.0.1:36164/#!/signup#%2Fotp

Can't figure out why angularJS module won't load

I'm using ui router and angular js so when I test the app, I just get a blank screen with an injector:module error. This is the link to the error:
http://errors.angularjs.org/1.3.11/$injector/modulerr?p0=myApp&p1=Error%3A%…dflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.11%2Fangular.min.js%3A17%3A350
Here is my app.js code:
var app = angular.module('myApp', ['ui.router', 'firebase']);
// Creating fireref instance
app.factory('FireRef', function($firebase){
var ref = new Firebase('https://dablog.firebaseio.com/');
return ref;
});
// Creating fireauth instance
app.factory('FireAuth', function($firebaseAuth){
var ref = new Firebase('https://dablog.firebaseio.com/');
return $firebaseAuth(ref);
});
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/site/home');
$stateProvider
.state('site', {
url: '/site',
templateUrl: 'partials/site.html'
})
.state('site.home', {
url: '/home',
templateUrl: 'partials/home.html'
})
.state('site.about', {
url: '/about',
templateUrl: 'partials/about.html'
})
.state('site.projects', {
url: '/projects',
templateUrl: 'partials/projects.html'
})
.state('site.blog', {
url: '/blog',
templateUrl: 'partials/blog.html'
// controller: 'BlogCtrl'
})
.state('site.login', {
url: '/login',
templateUrl: 'partials/login.html'
// controller: 'LoginCtrl'
})
.state('site.newpost', {
url: '/newpost',
templateUrl: 'partials/newpost.html',
// controller: 'NewPostCtrl'
})
.state('site', {
url: '/contact',
templateUrl: 'partials/contact.html'
});
})
Here is my blog.js file where it says "app is not defined":
'use strict'
app.controller('BlogCtrl', function($scope, $firebase, $firebaseArray, FireRef, $state){
var data = $firebaseArray(FireRef);
$scope.posts = data;
$scope.$watch('posts', function(newValue, oldValue){
$scope.posts = $sce.trustAsHtml(data);
})
$scope.login = function() {
$state.go('site.login');
}
$scope.newPost = function(){
$state.go('site.newPost');
}
});
Here is my index.html code:
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<title>Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Angular -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.11/angular.min.js"></script>
<!-- Angular UI Router -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.js"></script>
<!-- Angular Animate -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.13/angular-animate.min.js"></script>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.2.0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.9.1/angularfire.min.js"></script>
<!-- Controllers -->
<script src="js/controllers/BlogCtrl.js"></script>
<script src="js/controllers/LoginCtrl.js"></script>
<script src="js/controllers/NewPostCtrl.js"></script>
<!-- App -->
<script src="js/app.js"></script>
<!-- Styling -->
<link rel="stylsheet" type="text/css" href="css/styles.css">
<link rel="stylsheet" type="text/css" href="css/animate.css">
</head>
<body ng-app="myApp">
<div ui-view></div>
</body>
</html>
You have declared 'use strict', so the app variable is undefined. You need to add
var app = angular.module('myApp');
to the top of BlogCtrl.js
Also, move <script src="js/app.js"></script> so that it's before the controller scripts in index.html. Because you load app.js after BlogCtrl.js, the module defined in app.js is not available in BlogCtrl.js.
I don't have enough reputation to comment, but I do want to add information: do not add var app = angular.module('myApp', []) in blog.js, because the brackets initialize a new app, so Angular will think you're creating a new app and will throw an error, since 'myApp' already exists. Be sure to use var app = angular.module('myApp') instead. Also be sure to link the the .js file in your index file after Angular has been loaded.
I think you need to include this line at the top of blog.js:
var app = angular.module('myApp');
Edited to remove the second parameter: , [].

$route.updateParams is not a function

I am trying to change the route Params in my controller using the updateParams method, but for some reason I am getting an error:
TypeError: $route.updateParams is not a function.
In my controller I have:
App.controller('AddController', ['$scope', '$routeParams', '$route',
function ($scope, $routeParams, $route)
{
$route.updateParams({child: 'all'});
}]);
And this is my routing configuration:
App.config([
'$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/', {
redirectTo: '/'
})
.when('/:page/:child*', {
templateUrl: function($routeParams) {
return 'views/'+ $routeParams.page + '/' + $routeParams.child + '.html';
},
})
.otherwise({
redirectTo: '/'
});
}]);
I have no idea why can't I use the updateParams method, or what am I doing wrong here?
For anyone that is stuck on this like I was, I had to get the 1.4.8 version of angular AND the 1.4.8 version of angular-route to use $route.updateParams
plnkr
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script data-require="angular-route#*" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="routeUpdateParams">
<h1>Hello Plunker!</h1>
Click to load the test view
<div ng-view></div>
</body>
</html>
var app = angular.module("routeUpdateParams", ["ngRoute"]);
app.config(function($routeProvider ){
$routeProvider.when("/test/:testId", {
template:"<h3>test:{{testId}}</h3><button ng-click='reloadRoute()'>reloadRoute</button>",
controller: function($scope,$route,$routeParams) {
$scope.testId = $routeParams.testId;
$scope.reloadRoute = function(){
console.log($route)
$route.updateParams({ testId: 5 });
}
}
});
});

Angularjs ui-router abstract state not invoking controller

I am new to UI-Router and am struggling to get my controller invoked. I am using an abstract state as the parent and it does not seem to call the controller. Below is a simplified version of my code.
I binded $stateChangeError onto the console and am not getting an error on the console. I added onEnter and OnExit attributes to my state and only the onEnter function gets called (not included below).
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />'); </script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.js" ></script>
<script src="app.js"></script>
</head>
<body>
<div ui-view="navbar" ></div>
<div class="container">
<div ui-view="content" ></div>
</div>
<p>We are on the homepage.</p>
</body>
</html>
App.js
var app = angular.module('plunker', ['ui-router']);
app.config(function ($stateProvider, $urlRouteProvider) {
$urlRouteProvider.otherwise("/");
$stateProvider.state('site', {
abstract: true,
views: {
'navbar#': {
template: '<p>This is the {{nav}}</p>',
controller: 'NavBarCtrl'
}
}
});
});
app.config(function($stateProvider) {
$stateProvider
.state('home', {
parent: 'site',
url: '/',
views: {
'content#': {
template: '<p>This is the {{content}}</p>',
controller: 'MainCtrl'
}
}
});
});
app.controller('NavBarCtrl', function($scope) {
$scope.nav = 'Navbar'
});
app.controller('MainCtrl', function($scope) {
$scope.content = 'content'
});
There is a working example
There are two issues. Firstly we have to reference correct module:
// instead of this
// var app = angular.module('plunker', ['ui-router']);
// we need this
var app = angular.module('plunker', ['ui.router']);
And we have to use proper names of the '$urlRouterProvider'
// instead of this
app.config(function ($stateProvider, $urlRouteProvider) {
$urlRouteProvider.otherwise("/");
// we need this
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
Check it working here

AngularJS $routeParams undefined

I am getting undefined for $routeParams. Here is my code:
var ngAddressBook = angular.module('ngAddressBook', ['ngRoute']);
ngAddressBook.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'views/list.html',
controller: 'ngAddressListController'
}).
when('/add', {
templateUrl: 'views/add.html',
controller: 'ngAddressListController'
}).
when('/details/:id', {
templateUrl: 'views/details.html',
controller: 'ngAddressDetailsController'
});
}]);
// add a controller to it
ngAddressBook.controller('ngAddressListController', ['$scope', function ($scope)
{
$scope.contacts = [
{id:1,first_name:'Jane', last_name:'Doe','Phone':'123-456789','Email':'jane#example.com'},
{id:2,first_name:'Jhon', last_name:'Doe','Phone':'123-456789','Email':'jhon#example.com'}
];
$scope.getTotalContacts = function () {
return $scope.contacts.length;
};
}]);
ngAddressBook.controller('ngAddressDetailsController', ['$scope', function ($scope,$routeParams)
{
alert($routeParams);
$scope.id = $routeParams.id;
}]);
index.html
<!doctype html>
<html ng-app="ngAddressBook">
<head>
<title>Ng Addressbook</title>
<link href="main.css" rel="stylesheet" media="screen" />
</head>
<body>
<div ng-controller="ngAddressListController">
<div id="container">
<h1>Ng Address Book</h1>
<div id="content" ng-view>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script>
<script src = "angular-route.min.js"></script>
<script src="main.js"> </script>
</body>
</html>
There is a problem in controller parameter injection. You have not added $routeParams in your array injection list.
ngAddressBook.controller('ngAddressDetailsController', ['$scope','$routeParams', function ($scope,$routeParams)
{
alert($routeParams);
$scope.id = $routeParams.id;
}]);
As I found this on top on google:
apart from the missing injection - asign the object $routeParams and not the Key $routeParams.id
I found the explination here (from Sander Elias)
ngAddressBook.controller('ngAddressDetailsController', ['$scope','$routeParams', function ($scope,$routeParams)
{
$scope.id = $routeParams
alert($routeParams);
}]);

Categories

Resources