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>
Related
my main directory folder name is angularjs and there have many files, file lists are given billow.
1.index.html
2.main.html
3.blue.html
4.red.html
5.green.html
i want to create routing using AngularJs, i have do that but facing error what i have wrong.
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "index.html"
})
.when("/red", {
templateUrl: "red.html"
})
.when("/green", {
templateUrl: "green.html"
})
.when("/blue", {
templateUrl: "blue.html"
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular-route.min.js"></script>
<body ng-app="myApp">
<p>Main</p>
Red
Green
Blue
<div ng-view></div>
</body>
and i want to remove # simble from routing path
Try replacing your code with below.
<p>Main</p>
Red
Green
Blue
<div ng-view></div>
If you want to remove the exclamation mark, you should add a config to the $locationProvider as below.
.config(function ($routeProvider,$locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
Refer,
Exclamation mark after hash (#!) in angularjs app
AngularJS v1.7.4
I am new to AngularJS and creating a simple app but not sure why one route works (shows the static html from a partial file as well as {{message}} correctly), but the other two routes only show static html and not {{message}} which is being set using $scope.message.
Additionally errors such as
The controller with the name 'ContactController' is not registered.
and
The controller with the name 'AboutController' is not registered.
Are seen in the console when trying to go to 'Contact' and 'About' pages respectively.
For the three routes I have three html files and three controller files. I have made sure to include <body ng-app="gmsApp">.
Files are being loaded as
<script src="./js/bootstrap.bundle.min.js"></script>
<script src="./js/angular.js"></script>
<script src="./js/angular-route.js"></script>
<script src="./js/controllers/about.controller.js"></script>
<script src="./js/controllers/contact.controller.js"></script>
<script src="./js/controllers/home.controller.js"></script>
<link href="./css/bootstrap.min.css" rel="stylesheet" />`
Following advise from other posts I am using the 'regular' js files and not 'minified' versions of angular and angular-route.
The code in main html file is:
var app = angular.module("gmsApp", ['ngRoute', 'gmsApp.controllers']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'partials/home.html',
controller: 'HomeController'
}).
when('/about', {
templateUrl: 'partials/about.html',
controller: 'AboutController'
}).
when('/contact', {
templateUrl: 'partials/contact.html',
controller: 'ContactController'
}).
otherwise({
redirectTo: '/home'
});
}]);
/js/controllers/home.controller.js
angular.module('gmsApp.controllers', [])
.controller('HomeController', function ($scope) {
$scope.message = 'Main page of the app';
});
/js/controllers/about.controller.js
angular.module('gmsApp.controllers', [])
.controller('AboutController', function ($scope) {
$scope.message = 'This is about us page';
});
/js/controllers/contact.controller.js
angular.module('gmsApp.controllers', [])
.controller('ContactController', function ($scope) {
$scope.message = 'Contact Us page ...';
});
/partials/home.html
<div ng-controller="HomeController">
<h3>Home page</h3>
<p>{{message}}</p>
</div>
/partials/about.html
<div ng-controller="AboutController">
<h3>About Us</h3>
<p>{{message}}</p>
</div>
/partials/contact.html
<div ng-controller="ContactController">
<h3>Contact Us</h3>
<p>{{message}}</p>
</div>
The error come from the fact that you are recreating your module in each of your controller. This line should be present in only one of your files (could be your main file):
angular.module('gmsApp.controllers', [])
Then in "/js/controllers/home.controller.js,"/js/controllers/about.controller.js" and "/js/controllers/contact.controller.js", you should use it like this:
angular.module('gmsApp.controllers')
Note that this time you don't use the "[]". The difference between the two is that here you will access the already created module.
From angularjs docs:
Beware that using angular.module('myModule', []) will create the
module myModule and overwrite any existing module named myModule. Use
angular.module('myModule') to retrieve an existing module.
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.
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.