So I've been racking my brains for some time, looked at each and every line and I can't seem to find any mistake. Here are my codes:
HTML:
<body ng-app='myApp'>
<div class="wrapper">
<nav>
<ul ng-controller="pathController">
<li ng-click="changePath('about')">About</li>
<li ng-click="changePath('contacts')">Contacts</li>
<li ng-click="changePath('login')">Log In</li>
<li ng-click="changePath('register')">Join Now</li>
</ul>
</nav>
</div>
<script src="node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="node_modules/angular/angular.min.js" type="text/javascript"></script>
<script src="node_modules/angular-route/angular-route.min.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="scripts/controllers/pathController.js" type="text/javascript"></script>
</body>
app.js:
var app = angular.module("myApp", ['ngRoute', 'ngController']);
app.config(["$locationProvider", "$routeProvider"],
function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix("");
$routeProvider.when('/', {
templateUrl: "index.html"
})
})
About that 'ngController' dependency - I added it afterwards, in the process of checking different things which could possibly fix it.
and pathController.js:
app.controller('pathController', function($scope) {
$scope.changePath = function(pth) {
window.location.pathname = pth;
}
})
As you can see, $routeProvider is not the issue. Please take a look and see if you can solve my problem.
P.S. I am sorry, I forgot to add the error that I am getting, I only wrote it in the title, here it is:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.7.4/ ...
Thanks in advance!
Try
var app = angular.module("myApp", ["ngRoute"]);
app.config(["$locationProvider", "$routeProvider",
function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix("");
$routeProvider.when('/', {
templateUrl: "index.html"
})
}]
)
You have made below error:
app.config(["$locationProvider", "$routeProvider"], <-- this ] bracket should not be closed here.
Here is the working plunkr
Related
I am having a problem with injecting the uibModal dependency in my app.js:
Angular Version: 1.5.7
ui.boostrap Version: 1.3.3
Bootstrap Version: 3.3.6
I keep getting this error:
angular.js:13708 Error: [$injector:unpr] Unknown provider: $uibModal Provider <- $uibModal <- ModalController
App.js:
var app = angular.module('App', ['ui.bootstrap', 'ui.bootstrap.tpls']);
app.controller('ModalController', ['$scope', '$uibModal ', function($scope, $uibModal) {
$scope.showModal = function() {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: '../HTML/templates/login-modal.html',
controller: 'newModalController',
show: true
});
};
}]);
app.controller('newModalController', function($scope, $uibModalInstance) {
$scope.close = function() {
$uibModalInstance.dismiss('close');
};
});
Index.html:
<html lang="en">
<head>
<title>App</title>
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/angular.bootstrap/1.3.3/ui-bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/angular.bootstrap/1.3.3/ui-bootstrap-tpls.min.js"></script>
<script src="../resources/js/app.js"></script>
</head>
<body ng-app="App">
<header>
<nav>
<div class="row" ng-controller="ModalController">
<img src="../resources/img/logos.png" alt="logo" class="logo">
<ul class="nav-list">
<li>Learn More</li>
<li>Take Action</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
You also need ui-bootstrap-tpls for modal.
To anyone who needs help with this using the versions:
Angular Version: 1.5.7
Angular Animate: 1.5.7
ui.boostrap-tpls Version: 1.3.3
Bootstrap Version: 3.3.6
In your main index.html include the scripts. You only need angular, angular-animate, ui.boot-tpls, and bootstrap:
<html lang="en">
<head>
<title>App</title>
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="../vendors/js/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.js"></script>
<script src="../vendors/js/ui-bootstrap-tpls-1.3.3.min.js"></script>
<script src="../resources/js/app.js"></script>
</head>
<body>
...
</body>
</html>
first of all you have two controllers doing the same thing .when you can simply have one but in this case it's not the problem just a bad design.
try rewriting your first controller so instead of this
app.controller('ModalController', ['$scope', '$uibModal ', function($scope, $uibModal) {
do this :
app.controller('ModalController', function ($scope, $uibModal) {
dont forget to remove the ']' at the end of the controller
hope this helps !
I started learning AngularJS so I created two html pages:
index.html
<!DOCTYPE html>
<html ng-app="TodoApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="Scripts/app.js"></script>
<title>Angular Tutorial</title>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
and list.html
<input type="text" ng-model="test">
<h1>Hello: {{test}}</h1>
The app.js looks like this
var TodoApp = angular.module("TodoApp", ["ngResource"]).
config(function ($routeProvider) {
$routeProvider.
when('/', { controller: ListCtrl, templateUrl: "list.html" }).
otherwise({ redirectTo: '/' });
});
var ListCtrl = function ($scope, $location)
{
$scope.test = "testing";
};
Unfortunately, when I open the index.html page it is blank. What can be the cause of the problem?
As you mentioned the error:-
1) Add angular-route.js file in main page.
2) Add 'ngRoute' dependency in angular main app.
Doc:-https://docs.angularjs.org/tutorial/step_07
also you need to mention the controller in your HTML with ng-controller="ListCtrl" to initialize it.
And do not declare your controller that way, you must do
todoApp.controller('ListCtrl', ['$scope', 'dep1', 'dep2', function($scope, dep1, dep2) {
$scope.test = "testing";
}]);
It seems that you are missing the controller's definition:
TodoApp.controller('ListCtrl', ListCtrl);
This should fix your issue
You can also take a look at yeoman. It will help you to start with angularjs in zero time.
http://yeoman.io/codelab.html
I don't know why my template is not being rendered anymore. I get a blank page. It worked before then after some tweaks it stopped working. I've reversed most of the code and i still don't get why is not working . There is no kind of error in the console. How am I supposed to debug this kind of behavior ?
Here is the controller
'use strict';
/* Controllers */
var crmControllers = angular.module('crmControllers', []);
crmControllers.controller('TimelineCtrl', ['$scope', '$routeParams', '$http',
function($scope, $routeParams, $http) {
var emailsId
emailsId = $routeParams.emailsId;
$http.get('http://local.sf.com:8080/timeline/API?emailsId=' + emailsId,
{withCredentials: true}).success(function(timelines){
angular.forEach(timelines, function(timeline) {
var inboxIfr
inboxIfr = 'http://local.sf.com:8080/messages/inbox?email='+
timeline.Email+'&toEmail='+timeline.ToEmail+'&subject='+timeline.Subject
timeline.inboxIfr = inboxIfr
$scope.inboxIfr = inboxIfr
console.log(inboxIfr);
});
});
}]);
inboxIfr shows up in the console log which means that the loop is happening but it's just not rendered.
Html
<body>
<ul ng-repeat="timeline in timelines">
<p>hello <p/>
<iframe class="container well well-small span6"
style="height: 400px;"
ng-src="{{timeline.inboxIfr}}"></iframe>
</ul>
app.js
'use strict';
/* App Module */
var crmApp = angular.module('crmApp', [
'ngRoute',
'crmControllers',
]);
crmApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/timeline/:emailsId', {
templateUrl: 'partials/time.html',
controller: 'TimelineCtrl'
}).
otherwise({
redirectTo: '/timeline:emailsId'
});
}]);
index.html
<!doctype html>
<html lang="en" ng-app="crmApp">
<head>
<meta charset="utf-8">
<title>SF</title>
<!--<<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">-->
<!--<link rel="stylesheet" href="css/app.css">-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/controllers.js"></script>
<!--<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>-->
<!--<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>-->
<script src="js/app.js"></script>
<html>
</head>
<body>
<div ng-view></div>
</body>
</html>
Edit : I've added some dummy text above ng-repeat="timeline in timelines"> and it's being rendered so the real issue is that nothing is rendered inside the ng-repeat loop .
Edit: I've reduced time.html to this and it's still not being rendered . Only the first paragraph is being rendered ("I can see this")
<p>I can see this</p>
<li ng-repeat="timeline in timelines">
<p>I can't see this <p/>
</li>
The default route isn't pointing to a valid route:
app.js:
.otherwise({
redirectTo: '/timeline:emailsId'
});
shoud be:
.otherwise({
redirectTo: '/timeline/:emailsId'
});
EDIT: More HTML/Angular mistakes:
Remove body tags in Angular templates.
Don't use ng-repeat with <ul> tags. Rather use it with <li> or other block-elements like <div>
You use ng-repeat with the scope variable timelines, but you never set $scope.timelines
I have a very simple app. When I start the app it works fine, both angular and angular-route are loaded, the config function is executed and "otherwise" works as intended.
However, both boxes and versions do not work and no HTML is injected. The main page just says
<!-- ngView: -->
and that's it.
THERE ARE 0 ERROR MESSAGES!!! The console is just empty as a desert.
I tried everything and it should work but it doesn't. I even tried replacing the browserify calls and including angular directly in the html - no success.
HTML:
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<title>app</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="mainheader">
<div class="client-logo"></div>
<div class="logo"></div>
</header>
<nav class="mainmenu">
<ul>
<li class="active">Boxes</li>
<li>Versions</li>
</ul>
</nav>
<div ng-view></div>
<footer></footer>
</body>
<script src="./js/bundle.js"></script>
</html>
My JS:
'use strict';
require('angular/angular');
require('angular-route/angular-route');
var controllers = require('./controllers');
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/boxes', {
tamplate: 'views/boxes.html',
controller: 'boxController'
})
.when('/versions', {
tamplate: 'views/versions.html',
controller: 'versionsController'
})
.otherwise({
redirectTo: '/boxes'
});
}
]);
app.controller('boxController', controllers.boxController);
app.controller('versionsController', controllers.versionsController);
Example view:
<h2>Boxes</h2>
<p>{{ message }}</p>
Example controler:
'use strict';
exports.boxController = function($scope) {
$scope.message = 'Box Controller';
console.log('boxes');
};
exports.versionsController = function($scope) {
$scope.message = 'Versions Controller';
console.log('versions');
};
I'm as stupid as they come, the problem is a spelling error, it's tEmplate!
Thanks for the responses.
Hi I'm following the Angularjs tutorial and up to step 7 is where the tutorial stop working for me. My index.html just became blank and I have no idea why.
here's the codes
index.html
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<link rel="stylesheet" href="css/app.css">
<!--<link rel="stylesheet" href="css/bootstrap.css">-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body >
<div ng-view></div>
</body>
</html>
controller.js
'use strict';
/* Controllers */
var phonecatApp = angular.module('phonecatControllers', []);
phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',
function PhoneListCtrl($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
}]);
phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.phoneId = $routeParams.phoneId;
}]);
app.js
'use strict';
/* App Module */
var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers'
]);
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
phone-list.html
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
</div>
<div class="span10">
<!--Body content-->
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
<img ng-src="{{phone.imageUrl}}">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
also here's the console errors I got but don't understand
GET file:///C:/Users/John/Desktop/Angular-Family/app/lib/angular/angular- route.js index.html:9
Uncaught ReferenceError: phonecatControllers is not defined controllers.js:7
Uncaught Error: No module: ngRoute
any ideas?
EDIT2:
Failed to load resource file:///C:/Users/John/Desktop/Angular-Family/app/app.js
Failed to load resource file:///C:/Users/John/Desktop/Angular- Family/app/controllers.js
Uncaught Error: [$injector:modulerr] Failed to instantiate module phonecatApp due to:
Error: [$injector:nomod] Module 'phonecatApp' 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.
http://errors.angularjs.org/1.2.0-rc.2/$injector/nomod?p0=phonecatApp
at http://angular.github.io/angular-phonecat/step-7/app/lib/angular/angular.js:78:12
at http://angular.github.io/angular-phonecat/step-7/app/lib/angular/angular.js:1330:36
at ensure (http://angular.github.io/angular-phonecat/step- 7/app/lib/angular/angular.js:1268:38)
at module (http://angular.github.io/angular-phonecat/step-7/app/lib/angular/angular.js:1328:14)
at http://angular.github.io/angular-phonecat/step-7/app/lib/angular/angular.js:3071:26
at Array.forEach (native)
at forEach (http://angular.github.io/angular-phonecat/step- 7/app/lib/angular/angular.js:224:11)
at loadModules (http://angular.github.io/angular-phonecat/step-7/app/lib/angular/angular.js:3065:5)
at createInjector (http://angular.github.io/angular-phonecat/step-7/app/lib/angular/angular.js:3007:11)
at doBootstrap (http://angular.github.io/angular-phonecat/step-7/app/lib/angular/angular.js:1152:20)
http://errors.angularjs.org/1.2.0-rc.2/$injector/modulerr?p0=phonecatApp&p1…2Fangular- phonecat%2Fstep-7%2Fapp%2Flib%2Fangular%2Fangular.js%3A1152%3A20) angular.js:3097
You are defining the controllers on the phonecatControllers module. However that module is not defined. So when the angular app attempts to inject the module it is unable to find it.
Try changing the following line from this.
var phonecatApp = angular.module('phonecatControllers', []);
to this
var phonecatControllers = angular.module('phonecatControllers', []);
In addition to the that it appears angular is unable to load the ngRoute dependency as well. The script reference appears to be present. You may want to check and make sure lib/angular/angular-route.js is not returning a 404.
Update**
I think the problem now is mismatched versions of angular and angular-route. There is a service that the route provider is looking for that is not available.
I was able to get it working using the same scripts from that tutorials demo.
Working Plunker Example
<script src="http://angular.github.io/angular-phonecat/step-7/app/lib/angular/angular.js"></script>
<script src="http://angular.github.io/angular-phonecat/step-7/app/lib/angular/angular-route.js"></script>
This is by no means an ideal solution, but should help you keep moving forward with the tutorial. You could of course download the contents of these file to your local machine.
phonecatControllers.controller, change this to
phonecatApp.controller
good luck