I am new to angularJS. I tried to and practice some examples and met a very tricky error. I spent a couple of hours to figure out RangeError,but I failed to overcome it. Can anyone help me get out from this trap?
In app.js
var sampleApp = angular.module('phonecatApp', ['ngRoute']);
sampleApp .config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider)
{
$routeProvider.
when('/', {
templateUrl: 'index.html',
}).
when('/addOrder', {
templateUrl: 'add-order.html',
controller: 'AddOrderController'
}).
when('/showOrders', {
templateUrl: 'show-orders.html',
controller: 'ShowOrdersController'
}).
otherwise({
redirectTo: '/addOrder'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}]);
sampleApp.controller('AddOrderController', function($scope) {
$scope.message = 'This is Add new order screen';
});
sampleApp.controller('ShowOrdersController', function($scope) {
$scope.message = 'This is Show orders screen';
});
In index.html
<!DOCTYPE html>
<head>
</head>
<h1>weclome to test!</h1>
<body ng-app="phonecatApp" >
<div ng-view></div>
<script src="//code.angularjs.org/1.2.20/angular.js"></script>
<script src="//code.angularjs.org/1.2.20/angular-route.js"></script>
<script src="static/app.js"></script>
</body>
</html>
In add_order.html
<h2>Add New Order</h2>
{{ message }}
In show_order.html
<h2>Show Orders</h2>
{{ message }}
In addition, the wrong source directory of folder that store js and html files cause the RangeError?
This is error that shows in chrome console
I think you are browsing to /, which is probably index.html, which includes app.js, which will need index.html due to the route, which will require app.js, etc... You may need to put your / template in another html file (let's call it home.html), and change the template for / to home.html
I also had the same issue. Then I tried with putting 'script' tags to 'head' tag. It works fine now.
<!DOCTYPE html>
<html>
<head>
<script src="//code.angularjs.org/1.2.20/angular.js"></script>
<script src="//code.angularjs.org/1.2.20/angular-route.js"></script>
<script src="static/app.js"></script>
</head>
<body ng-app="phonecatApp" >
<h1>weclome to test!</h1>
<div ng-view></div>
</body>
</html>
Split the routing scripts in to a different file.
angular.module('phonecatApp').config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider)
{
$routeProvider.
when('/', {
templateUrl: 'index.html',
}).
when('/addOrder', {
templateUrl: 'add-order.html',
controller: 'AddOrderController'
}).
when('/showOrders', {
templateUrl: 'show-orders.html',
controller: 'ShowOrdersController'
}).
otherwise({
redirectTo: '/addOrder'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}]);
then refer it in your index file may be like :
<script src="static/router.js"></script>
that should fix it.
I was facing similar problem/ error. What worked for me was I used the routes with # . i.e I removes this part from app.js
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
Related
I am trying to build a basic SPA using angularJS, the problem is I am not able to load the template using angularJS, the following is my code
customAngular.js
var app = angular.module("appModule", ["ngRoute"]);
app.config([function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "pages/main.html"
})
.when("/red", {
templateUrl: "pages/about.html"
})
.when("/green", {
templateUrl: "pages/blog.html"
}).otherwise({ redirectTo: '/' })
}]);
HTML PAGE
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/styles/bootstrap.min.css" rel="stylesheet" />
<link href="~/styles/bootstrap-theme.min.css" rel="stylesheet" />
<script src="~/angularJS/angular.min.js"></script>
<script src="~/angularJS/customAngular.js"></script>
</head>
<body ng-app="appModule">
main
Green
red
<div ng-view></div>
</body>
</html>
Can anyone help me to understand the error
UPDATE 1
has bneen modified
UPDATE 2
i have updated the page as per the request, i have changed the angular in to unminified version 1.6
<script src="~/angularJS/angular.v1.6.1.js"></script>
<script src="~/angularJS/angular-route.js"></script>
<script src="~/angularJS/customAngular.js"></script>
and changed my customAngular.js file like this
var app = angular.module("appModule", ["ngRoute"]);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "pages/main.html"
})
.when("/red", {
templateUrl: "pages/about.html"
})
.when("/green", {
templateUrl: "pages/blog.html"
}).otherwise({ redirectTo: '/' })
}]);
now i am able to see the index page like this
index page
but when i move my page to /red, i get an error like this
error page on redirection
You have injected your $routeProvider the wrong way:
app.config([function ($routeProvider) {
/* $routeProvider will be undefined */
...
}]);
Thing is, you mixed two ways of Angular injection:
app.config(function ($routeProvider) {
...
});
And
app.config(['$routeProvider', function ($routeProvider) {
...
}]);
You put [] around your function, so Angular expected to see some component identifiers as strings in the head of the array. So, simply remove the square brackets or add the component identifier, as shown in the two examples above.
Update
You still see an error because, as #Gayathri pointed out in the comments, you are trying to access the URI /red on your server... which doesn't exist. You links should be like:
main
Green
red
See this codepen.
You are missing <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
Here is the code I have, greatly simplified,
and my question is - why am I getting this error message?
[ng:areq] Argument 'SearchController' is not a function, got undefined
http://errors.angularjs.org/1.5.8/ng/areq?p0=SearchController&p1=not%20aNaNunction%2C%20got%20undefined
index.cshtml
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="~/Components/angular/angular.min.js"></script>
<script src="~/Scripts/Common/app.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
app.ts
namespace App {
export let app = angular.module("app", ["ngRoute", "ngSanitize"]);
// Defined custom routes for using "ng-view" directive,
// enable single page application (SPA) functionality
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "/RealSuiteApps/RealForm/-1/MyForm/Search/",
controller: "SearchController",
controllerAs: "vm"
})
.when("/Detail/:id", {
templateUrl: "/RealSuiteApps/RealForm/-1/MyForm/Detail/",
controller: "DetailController",
controllerAs: "vm"
})
.otherwise({ redirectTo: "/" });
});
}
search.cshtml - the HTML returned by calling templateUrl defined above: /RealSuiteApps/RealForm/-1/MyForm/Search/ (simplified for this demo)
<script src="~/Scripts/MyForm/search.controller.js"></script>
<div class="container">
<h1>Hello from Search Controller</h1>
</div>
the controller search.controller.js
namespace App {
/**
* SearchController
*/
class SearchController {
static $inject: string[] = ["DataService"];
constructor(private dataService: DataService) { }
}
app.controller("SearchController", SearchController);
}
Looks like you're loading the search.controller.js file only in your search view, but the route instantiates the controller even before that, and he can't do that if you haven't loaded the script yet.
The solution is to load it at the beginning of your app.
i am new Angular and trying to get a working example setup for Angular UI router
I researched some questions on stackoverflow but dont see the issue specifically. My Issue is that even though in browser debugging and network analysis i am seeing thatm my template html is called, still not seeing any content in browser.No errors in console
AngularJS ui-router - template not displaying
Using Angular 1.4.7 and corrosponding
Please find app.js below
(function(){
angular.module('TestPrj',['ui.router']);
angular.module('TestPrj').config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/ReportB');
$stateProvider
.state('a', {
url: '',
abstract:true,
controller:'mainController',
controllerAs:'main',
templateUrl: 'partials/home.html'
})
.state('a.b', {
url: '/ReportB',
controller:'B',
controllerAs:'B',
templateUrl: "partials/B.html"
});
});
angular.module('TestPrj').run(function($rootScope,$state){
$rootScope.$on("$stateChangeError", console.log.bind(console));
});
})();
Controller b.js :
(function(){
angular.module('TestPrj').controller('B',B);
function B($state){
this.pageName = "Report a B";
}
B.$inject = ["$state","$stateParams","$scope"];
})();
Controller main.js
(function(){
angular.module('TestPrj').controller('mainController',mainController);
function mainController($state,$translate){
}
mainController.$inject = ["$state","$translate"];
})();
index.html
<!DOCTYPE html>
<html>
<head ng-app="TestPrj" lang="en">
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular-ui-router.min.js"></script>
<script type="text/javascript" src="js/lib/angular-translate.min.js"></script>
<script type="text/javascript" src="js/lib/angular-translate-loader-url.js"></script>
<script type="text/javascript" src="js/lib/ui-bootstrap-tpls-0.12.0.min.js"></script>
<script type="text/javascript" src="js/lib/ui-mask.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/claimTypeSelection.js"></script>
<script type="text/javascript" src="js/controllers/main.js"></script>
</head>
<body>
<div ui-view=""></div>
</body>
</html>
partials/home.html
<div class="container">
<div ui-view=""></div>
</div>
partials/B.html
<div>
<div ui-view=""></div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</div>
Also sharing screenshot of my project setup
Angular Setup
Based off the digging I did I think the issue is that you made the first state abstract. There is an issue posted on the github for ui-router you can read here. Also, consider the two plunkr examples
without abstract
$stateProvider
.state('route1', {
url: "/route1",
templateUrl: "route1.html"
})
.state('route1.list', {
url: "/list",
templateUrl: "route1.list.html",
controller: function($scope){
$scope.items = ["A", "List", "Of", "Items"];
}
})
.state('route2', {
url: "/route2",
templateUrl: "route2.html"
})
.state('route2.list', {
url: "/list",
templateUrl: "route2.list.html",
controller: function($scope){
$scope.things = ["A", "Set", "Of", "Things"];
}
})
})
with abstract
$stateProvider
.state('route1', {
url: "/route1",
abstract: true,
templateUrl: "route1.html"
})
.state('route1.list', {
url: "/list",
templateUrl: "route1.list.html",
controller: function($scope){
$scope.items = ["A", "List", "Of", "Items"];
}
})
.state('route2', {
url: "/route2",
templateUrl: "route2.html"
})
.state('route2.list', {
url: "/list",
templateUrl: "route2.list.html",
controller: function($scope){
$scope.things = ["A", "Set", "Of", "Things"];
}
})
})
The second plunkr is a copy of the first except that abstract: true was added to the state and now it doesn't work.
Also, make sure you either clear your browser cache frequently or disable caching while using ui-router. It's pretty bad about serving cached results.
It isn't clear why you are using an abstract state. The abstract state can provide data and enter/exit processing to child states. But it isn't activated. It does need a template.
https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views#abstract-states
In your example the child state does done of these and the abstract state was apparently meant to be used.
It would seem you didn't intend to make it abstract.
Update: The abstract url can't be blank. This is an example of your code with the url set:
.state('a', {
url: '/a',
abstract: true,
controller: 'mainController',
controllerAs: 'main',
templateUrl: 'partials/home.html'
})
http://plnkr.co/edit/11o6qF?p=preview
To see the functionality use this link: http://run.plnkr.co/CUN147Z4YdCKRxRw/#/a/b
Does anyone know how I can route using a search query in Angular? I have tried working with $routeProvider but it doesn't work with search queries.
This is the code I wrote for routing with $routeProvider:
app.config(['$routeProvider', function ($routeProvider){
$routeProvider.when('/?table=table1', {
controller:'PostsCtrl',
templateUrl: 'table1.html'
})
$routeProvider.when('/?table=table2', {
controller: 'PostsCtrl',
templateUrl: 'table2.html'
})
$routeProvider.otherwise({redirectTo: '/?table=table1'});
}]);
app.config(['$locationProvider', function($locationProvider){
$locationProvider.html5Mode(true).hashPrefix('!');
}]);
and the templates they are referring to:
<script type="text/ng-template" id="table1.html">
some code
</script>
and
<script type="text/ng-template" id="table2.html">
some code
</script>
I have a really weird bug, I have set my routes and my controllers. Now I have just a blank page with no errors?
index.html;
<!DOCTYPE html>
<html ng-app="RekenTalent" lang="nl">
<head>
<title>Rekentalent.nl: Ben jij een talent in Rekenen?</title>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="/app/front/assets/stylesheets/style.css">
<!-- AngularJS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-route.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-animate.min.js"></script>
<!-- Controllers -->
<script src="/app/front/controllers/controller.js"></script>
<!-- Router -->
<script src="/app/front/router.js"></script>
</head>
<body ng-view></body>
</html
>
Controller.js:
/**
* RekenTalent
*
* Copyright 2014 - Rekentalent.nl
*/
var RekenTalent = angular.module('RekenTalentControllers', []);
RekenTalent.controller('rekenCtrl', ['$scope', function($scope){
}]);
Router.js:
var RekenTalent = angular.module('RekenTalent', [
'ngRoute', 'RekenTalentControllers'
]);
RekenTalent.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/index', {
templateUrl: '/templates/index.html',
controller: 'rekenCtrl'
}).
otherwise({
redirect: '/index'
});
}]);
And /templates/index.html says just 'hi'. Does anyone know why I get a blank page? It should redirect me to /index.html and /index.html should use /templates/index.html as the template. Whats the problem and the fix?
UPDATE:
when I go to /index it works, so the otherwise param doesn`t work, why not?
change redirect to redirectTo
And it's better to use home.template to avoid all this kind of problems, I mean consider:
You have an index.html that contains your whole included scripts, like angular, jquery , ..., and in the body tag there is ng-view, ok?
Now, if you have any templates such as welcome or whatever for index, write that template in a home.html, OK? Like this:
index.html :
<body ng-app="yourapp">
<div ng-view>
</div>
</body>
Home.html
<div>
Welcome, user. This is index.
</div>
Your app configuration:
yourapp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/home.html',
controller: 'homeCtrl'
})
.otherwise({redirectTo:'/'});
}
And it is a good practice to put all of your templates inside a partials folder, where the father folder contains index.html like this
root
yourAppFolder
1-Assets
Css
Js
2-Partials
home.html
login.html
3-index.html
Found it; redirect should be redirectTo;
var RekenTalent = angular.module('RekenTalent', [
'ngRoute', 'RekenTalentControllers'
]);
RekenTalent.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/index', {
templateUrl: '/app/front/templates/index.html',
controller: 'rekenCtrl'
}).
otherwise({
redirectTo: '/index'
});
}]);
I have this sample of code for example:
.config(['$routeProvider',
function($routeProvider) {
console.log('routeando');
//alert('otherwise' + $routeProvider.route);
$routeProvider.
when('/', { templateUrl: 'home'}).
when('/route1', { templateUrl: 'route1'}).
/*Without the next line, redirectTo doesnt work*/
when('/error', { templateUrl: 'error'}).
otherwise({ redirectTo: '/error'});
}]);
Otherwise is only going to work if you have already a "when" parameter for that route.
Excuse me for my english and have a nice day.