I'm new to angular and I'm learning angular from a sample, but when I use the exact copy of the example code, it would not work, why is that?
<html ng-app="tw">
<head>
<meta charset="utf-8" />
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="ProteusThemes" />
</head>
<body>
<script type="text/javascript" src="angular.min.js"></script>
<script>
var twApp = angular.module("tw",[]);
twApp.config(function($routeProvider){
$routeProvider.when('/',{
templateUrl: "templates/home.html",
controller: "HomeController"
})
.otherwise({redirectTo:'/'});
});
twApp.controller("HomeController",['$scope',function($scope){
alert("salam");
}]);
</script>
This it simple home page
Home
<div ng-view></div>
</body>
</html>
And when it runs, I get the following error:
Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=tw&p1=%5B%24injector%3Aunpr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.3.14%2F%24injector%2Funpr%3Fp0%3D%2524routeProvider%0AM%2F%3C%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A6%3A417%0Aab%2Fp.%24injector%3C%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A38%3A7%0Ad%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A36%3A13%0Ae%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A36%3A283%0Ad%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A34%3A490%0Ag%2F%3C%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A35%3A117%0As%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A7%3A300%0Ag%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A34%3A399%0Aab%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A38%3A135%0Atc%2Fd%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A17%3A381%0Atc%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A18%3A179%0AJd%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A17%3A1%0A%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A249%3A428%0Aa%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A163%3A399%0Alf%2Fc%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A32%3A384%0A
http://localhost/angular.min.js
Line 6
Include angular-router as a script, where X.Y.Z is the angular version you are using:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js"></script>
Add ngRoute as a dependecy to your app, when using $routeProvider:
var twApp = angular.module("tw", ['ngRoute']);
You forgot to add routing js and dependency:- 'ngRoute'
var twApp = angular.module("tw",['ngRoute']);
Add in index:-
<script src="angular-route.js"></script> //after downloading
UPDATE Added plunker
Plunker
Related
I'm getting this error on an iPad (first generation, the only iPad I have) while trying to use a very basic use of ngRoute and ngAnimate. It works on desktops and on iPhone(6), but not the iPad. This is the error I'm getting:
Error[$injector:modulerr]http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=ng&p1='undefined%20is%20not%20an%20object
This is the simple app I'm using:
var app = angular.module('openRoute', ['ngRoute', 'ngAnimate']);
app.config(function($routeProvider) {
$routeProvider
.when('/news', {
templateUrl : 'news.html'
})
.when('/info', {
templateUrl: 'info.html'
})
});
And this is the HTML with all the links necessary:
<!DOCTYPE html>
<html lang="sv" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="style2/style.css" />
<script src="style2/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="js/app.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
</head>
<body ng-app="openRoute">
Anyone makes sense out of this?
Unless you have an dependency injection mechanism that i don't see.
You need to give the key to the dependency then the actual setting of the value, see the example below
angular
.module('ModuleName')
.config(['$httpProvider', '$compileProvider', '$resourceProvider',
function($httpProvider, $compileProvider, $resourceProvider) {
// do stuff
}]);
This AngularJS code works while located in the HTML file:
<!DOCTYPE html>
<html lang="en" ng-app="ChgReqApp">
<head>
<link rel="shortcut icon" href="IM/Coins.png" />
<title>TITLE</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Change to min -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script>
angular.module('ChgReqApp', []);
angular.module('ChgReqApp').controller('MainController', function ($scope) {
$scope.ClientInfo = {};
$scope.ChangeRequests = [];
});
</script>
<script src="JS/MainController.js"></script>
</head>
<body ng-cloak ng-controller="MainController">
</body>
</html>
The MainController.js file looks like this and the alert dialog works as expected:
// MainController.js
$(function () {
alert("MainControllerFile");
});
Now, when I move the controller code to the MainController.js file, I get an error:
<!DOCTYPE html>
<html lang="en" ng-app="ChgReqApp">
<head>
<link rel="shortcut icon" href="IM/Coins.png" />
<title>TITLE</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Change to min -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script>
angular.module('ChgReqApp', []);
</script>
<script src="JS/MainController.js"></script>
</head>
<body ng-cloak ng-controller="MainController">
</body>
</html>
//MainController.js
$(function () {
angular.module('ChgReqApp').controller('MainController', function ($scope) {
$scope.ClientInfo = {};
$scope.ChangeRequests = [];
});
});
The error is:
Error: [ng:areq] Argument 'MainController' is not a function, got undefined
http://errors.angularjs.org/1.4.8/ng/areq?p0=MainController&p1=not%20a%20function%2C%20got%20undefined
at ...
I have searched for a solution to this problem but all the discussions I have found relate to some other issue not applicable to the above code. The external js file is valid and the scripts are in the correct order. Any help on this is greatly appreciated.
There is no need for $(function() {}) because Angular has its own "Document Ready business" (just to simplify to the max :P).
The problem is that Angular can't run its "Document Ready Business" because you are putting Angular stuff inside jQuery's "Document Ready" shorthand and that stops the Angular framework from working properly.
You can read more about this in Angular's documentation
Angular initializes automatically upon DOMContentLoaded event or when
the angular.js script is evaluated if at that time document.readyState
is set to 'complete'. At this point Angular looks for the ng-app
directive which designates your application root.
I think you can see how this conflicts with what you are trying to do.
Also as an additional suggestion go like this:
angular.module('ChgReqApp', []).controller('MainController', function($scope) {
$scope.ClientInfo = {};
$scope.ChangeRequests = [];
});
or like this (my preference)
var app = angular.module('ChgReqApp', []);
app.controller('MainController', function($scope) {
$scope.ClientInfo = {};
$scope.ChangeRequests = [];
});
(function() {
angular
.module("ChgReqApp", [])
.controller("MainController", MainController);
MainController.$inject = ["$scope"];
function MainController($scope) {
$scope.ClientInfo = {};
$scope.ChangeRequests = [];
};
})();
you can read more information here : https://github.com/johnpapa/angular-styleguide
This is what I found that FIXED my problem...
the CHROME browser was CACHING the (MainController.js)
I found this out by looking at (Chrome devtools, Network tab,
MainController.js file, Response TAB) (* THE CODE WAS DIFFERENT
*)
OPEN A NEW TAB in Chrome (fixed the cached MainController.js file)
I was having the same problem. I was just trying to put some VALUES in a MainController.js file EXTERNALLY.
<script src="./js/controllers/MainController.js"></script>
For some reason it wasn't working (from this file)...
But...
when I tested directly from the HTML file (it worked)
app.controller('MainController', ['$scope', function($scope) {
// SCOPE
$scope.test = "test(HTML FILE)";
$scope.test2 = 'test2(HTML FILE)';
}]);
...but NOT IN THE EXTERNAL FILE?
DISABLE CACHE (CHROME)
open CHROME, (DevTools), Networks tab, CLICK (ON) (Disable Cache)
try this
<!DOCTYPE html>
<html lang="en" ng-app="ChgReqApp">
<head>
<link rel="shortcut icon" href="IM/Coins.png" />
<title>TITLE</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Change to min -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="JS/MainController.js"></script>
</head>
<body ng-cloak ng-controller="MainController">
</body>
</html>
//MainController.js
angular.module('ChgReqApp').controller('MainController', function ($scope) {
alert('in main controller');
$scope.ClientInfo = {};
$scope.ChangeRequests = [];
});
The markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Angular I</title>
<link rel="stylesheet" href="css/style.css">
<link rel="author" href="humans.txt">
</head>
<body ng-app="app">
<section ng-controller="mainCtrl">
<h1>My App</h1>
<p>{{name}}</p>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-resource.min.js"></script>
<script src="script.js"></script>
</body>
</html>
The script.js
var app = angular.module('friendsList', []);
app.controller('mainCtrl', function($scope) {
$scope.name = "Leon Gaban";
})
I'm including angular.min, angular-route and even angular-resource and animate...
You had wrong ng-app module, it should be ng-app="friendsList" instead of app.
The error is not due to angular versions, it is because you are injecting wrong dependency in your app mdoule. Simply you can not inject mainCtrl inside your module as its controller mainCtrl which you are going to register with your module.
var app = angular.module('friendsList', []);
Also you should have ng-controller="mainCtrl" on html.
<section ng-controller="mainCtrl">
</section>
i am using routing in angular.js
my code is :
//controllers.js
var ar= angular.module('ar', []);
ar.controller('lc', ['$scope', '$http', function($scope, $http){
$http.get('login.json').success(function(data){
$scope.art=data;
})
}])
ar.controller("search", function(){
this.search='a';
this.getdata= function (searchquery) {
console.log(searchquery);
}
});
//main.js (app.js)
var myApp= angular.module('myApp',[
'ngRoute',
'ar'
]);
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'inc/login.html',
controller: 'lc'
}).
otherwise({
redirectTo: '/login'
});
}]);
when i goto the Homepage its not redirect to the Login page and when i click on the login button its not working either.
<!DOCTYPE html>
<html class="no-js" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Home</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>
<script src="js/main.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<ul class="nav navbar-nav pull-right">
<li class="active">Home</li>
<li>Login</li>
</ul>
</div><!--/.navbar-collapse -->
in bottom:
i have include jquery and bootstrap's file.
this is a bootstrap application.
this is live example :
Live example
Routes are specified correctly. What you need is to define the ng-view in your template so that the templates mentioned in specific routes are loaded into the main template
Something like :
<div class="page-container">
<div ng-view></div>
</div>
ng-view will be the place where every template mentioned in the router will be loaded.
i think there might be issue with your path .. its mvc base and routes define your path :)
I'm getting an uncaught object error in my console when trying to load my angularjs app. I don't know if it's related to ng-route.js or not, but that's all the error tells me is uncaught object
Here's my Code
HTML
<!doctype html>
<html class="no-js" lang="en" ng-app="selfservice">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation</title>
<link rel="stylesheet" href="css/app.css" />
<script src="bower_components/modernizr/modernizr.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<div id="template">
<div id="view">
<ng-view></ng-view>
</div>
</div>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script>
//initialize foundation
$(document).foundation();
</script>
</body>
app.js
//Initialize angular module include route dependencies
var app = angular.module("servicedesk", ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl:"partials/login.html",
controller:"login"
});
});
controller.js
app.controller("login", function ($scope) {
return "";
});
ng-app should contain the name of the module. Change ng-app="selfservice" to ng-app="servicedesk".
Angular-route is a separated module, you need to include it inside your servicedesk module declaration like this :
var app = angular.module("servicedesk", ["ngRoute"]);