My code, as below, does not substitute the mg-view with the template from the route configuration.
I get {{message}} to be replaced by 'in controller', which shows the controller is alive, but nothing more happens.
View:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="angularjs/angular.js"></script>
<script src="angularjs/angular-resource.js"></script>
<script src="angularjs/angular-route.js"></script>
<script src="app.js.html"></script>
</head>
<body class="appearanceOrange styleIOS">
<section ng-app="app" ng-controller="pageCtrl">
Current page '{{ message }}'
<div ng-view></div>
</section>
</body>
</html>
Controller:
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/corporate', {
controller:'pageCtrl',
templateUrl:'corporate.html'
})
.otherwise({
redirectTo:'/corporate'
});
});
app.controller('pageCtrl', function ($scope) {
$scope.message = "in controller";
});
Partial:
<section
id="pageCorp"
class="page"
title="Corp France"
background="stripRoll"
style="text-align:center; display: block;">
<div style="padding:200px">
<a href="http://www.corp.fr/go/id/ceeq/" style="color: white">
<img src="rsc/corp.logo.svg" style="width:150px; margin: auto auto;background-color:white;"/><br/>
<span style="font-size:18pt;font-weight:bold">visit our Website</span>
</a>
</div>
</section>
Looks fine to me, as long as your template in corporate.html exists.
Here is a working fiddle.
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.when('/corporate', {
controller: 'pageCtrl',
template: 'hi'
}).otherwise({
redirectTo: '/corporate'
});
});
app.controller('pageCtrl', function($scope) {
$scope.message = "in controller";
});
Edit: Here is another possibility to use the template, with $templateCache: jsfiddle
app.run(function($templateCache) {
$templateCache.put('corporate.html', 'This is the content of the template');
});
After hours of investigation, it comes that legacy javascript was breaking angularjs.
So be careful when converting (migrating) to angularjs, and try to deactivate your legacy javascript code first, prior to enter in a lengthly investigation period…
Thanks to everyone who helped me.
Related
Below is my index.html page which has two buttons which links to 2 different views which i intend to show using angular routing.
Below is my
HTML
<!DOCTYPE html>
<html>
<head>
<title>PR_APP</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.js"></script>
<script src="js/main.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="new_pr_app">
<h2>Please select an option</h2><br>
<div ng-controller="view_controller">
<button id="view_details" ng-click="view()">View Details</button>
</div>
<div ng-controller="update_controller">
<button id="update_details" ng-click="update()">Update Details</button>
</div>
<div ng-view>
</div>
</body>
Below is my main.js file which houses both above mentioned controller and logic for angular routing.
main.js
var app = angular.module('new_pr_app', ['ngRoute']);
app.config('$routeProvider','$locationProvider', function($routeProvider,$locationProvider){
$routeProvider.when("/update",
{
templateUrl:"update.html",
controller: "update_controller"
})
.when("/view",
{
templateUrl: "view.html",
controller: "view_controller"
});
});
app.controller("view_controller",function($scope, $location, http_factory){
$scope.view = function(){
$location.path("/view");
}
$scope.result =[];
http_factory.get_request().then(function(response){
$scope.result = response.data;
});
});
app.controller("update_controller",function($scope, $location, http_factory){
$scope.update_details = function(){
$location.path("/update");
}
$scope.names = [];
http_factory.get_request().then(function(response){
$scope.names = response.data;
});
});
I have another file called services.js which has a service factory to get details from a json file using an http get.
My only problem seems to be in the above main.js which gives the error below everytime index.html loads
angular.js:88 Uncaught Error: [$injector:modulerr]
Your config is wrong. You pass in a string as the first (and second argument), while the .config(..) function, expects a function to be passed in (or an array).
In your code, you simply forgot to wrap the arguments in an array. Here's how it should look:
app.config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider){
$routeProvider.when("/update",
{
templateUrl:"update.html",
controller: "update_controller"
})
.when("/view",
{
templateUrl: "view.html",
controller: "view_controller"
});
}]);
Note the [ and ] wrapping the content
You can check with below code.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.js"></script>
<body ng-app="new_pr_app">
<h2>Please select an option</h2><br>
<div ng-controller="view_controller">
<button id="view_details" ng-click="view()">View Details</button>
</div>
<div ng-controller="update_controller">
<button id="update_details" ng-click="update_details()">Update Details</button>
</div>
<div ng-view>
</div>
<script>
var app = angular.module('new_pr_app', ['ngRoute']);
app.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider){
$routeProvider.when("/update",
{
template:"update template"
// controller: "update_controller"
})
.when("/view",
{
template: "view template"
// controller: "view_controller"
});
}]);
app.controller("view_controller",function($scope, $location){
$scope.view = function(){
$location.path("/view");
}
});
app.controller("update_controller",function($scope, $location){
$scope.update_details = function(){
$location.path("/update");
}
});
</script>
</body>
</html>
I have created simple html files about.html, experiments.html and home.html in a folder named partials but not able to render there view in ng-view also I tried a simple {{ 5+5 }} but that also didn't work id i am using config also along with controller.
https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js'>
https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js">
Demo Angular JS
LOGO
MY WEBSITE
{{ 5 + 5 }}
var app = angular.module('demoApp', ["ngRoute"])
.config(function($routeProvider){
$routeProvider
.when('/about', { templateUrl:'/partials/about.html'})
.when('/experiments', { templateUrl:'/partials/experiments.html'})
.otherwise({ redirectTo:'/home', templateUrl:'/partials/home.html'})
})
.controller(function MainCtrl($scope){
$scope.x = "Hello";
});
</script>
</body>
</html>
Check your modified code.. and DEMO here
updated snippet
var app = angular.module('demoApp', ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when('/', { templateUrl:'partials/about.html',controller : 'MainCtrl'})
.when('/about', { templateUrl:'partials/about.html',controller : 'abtCtrl'})
.when('/experiments', { templateUrl:'partials/experiments.html',controller : 'exptCtrl'})
.otherwise({ redirectTo:'/other', templateUrl:'partials/other.html'})
});
app.controller('MainCtrl', function($scope) {
$scope.x = "Hello";
});
app.controller('abtCtrl', function($scope) {
$scope.x = "About";
});
app.controller('exptCtrl', function($scope) {
$scope.x = "exptCtrl";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<div ng-app="demoApp" >
<h2 style="background-color:#ccc">
{{5+5}}
</h2>
<div style="background-color:#bbb; padding:10px;">
About
Expt
Other
</div>
<div ng-view="" id="ng-view"></div>
<script type="text/ng-template" id="partials/about.html">
<h1>About Page</h1>
</script>
<script type="text/ng-template" id="partials/experiments.html">
<h1>Experiment Page</h1>
</script>
<script type="text/ng-template" id="partials/other.html">
<h1>Other Page</h1>
</script>
</div>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.min.js"></script>
<body ng-app="myApp">
<p>Main
</p>
Red
Green
Blue
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template: "<div>first view</div>"
})
.when("/red", {
template: "<div>second</div>"
})
.when("/green", {
template: "<div>third</div>"
})
.when("/blue", {
template: "<div>fourth</div>"
});
});
</script>
</body>
</html>
This is how we are configuring routeProvider
I'm trying to create a single page app with angularjs to which I'm very new. I've pieced together this code based on a number of tutorials, but it doesn't work and I'm not quite sure why. I'm not getting any errors that I can see. The intention is to have the home.html file load on the initial load. Then based on the routes, load in different templates.
script.js
angular.module("myApp", ['ngRoute']).config(['$routeProvider', function($routeProvider){
$routeProvider.when("/view", {
templateUrl: "/view.html",
controller: "ViewCtrl"
})
.otherwise({
templateUrl: "/home.html",
controller: "HomeCtrl"
});
}]);
angular.module("myApp").controller("ViewCtrl", ['$scope', function($scope){
$scope.message = "In the view";
}]);
angular.module("myApp").controller("HomeCtrl", ['$scope', function($scope){
$scope.message = "At home";
}]);
angular.element(document).ready(function(){
angular.bootstrap(document, ['myApp']);
})
index.html
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.0-beta.4" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<script data-require="angular-route#1.4.0-beta.4" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div id="content" ng-app="myApp"></div>
</body>
</html>
home.html
<div ng-controller="HomeCtrl">
{{message}}
</div>
view.html
<div ng-controller="ViewCtrl">
{{message}}
</div>
http://plnkr.co/edit/eLZQueX3OyPCXo2tQGWS
Couple of mistakes in your code. Please look the below changes
1) Add ng-view directive for loading partial content
<div id="content" ng-app="myApp"></div>
should be
<div id="content" ng-app="myApp" ng-view></div>
2) Template url not starts with slash (/)
templateUrl: "/view.html",
templateUrl: "/home.html",
Should be
templateUrl: "view.html",
templateUrl: "home.html",
3) No need to bootstrap the app manually, ng-app automatically do this.
4) No need to mention the controller in router level if you mentioned in template (vice versa)
Working Demo: http://plnkr.co/edit/n19eCFwRc9WQUt6SskPU?p=preview
I'm new to Angular and I want to setup very basic routing. My cart.html has the text: "Hello Cart" and by going to #/Step I want to change this to "Hello World".
(My console is not giving me any error messages)
I have: someurl.com/page and when I change it to: someurl.com/page#/Step nothing happens.
This is the HTML
<div class="row" ng-app="ecom">
<div class="large-12 columns" ng-include="'cart.html'">
<div ng-view></div>
</div>
</div>
This is the JS
var ecom = angular.module('ecom', ['ngRoute', 'ngResource']);
ecom.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/Step', {
template: 'hello world'
});
});
Having the ng-include on the parent div is messing it up.
One way to solve this is to add another route on "/" and set that routes templateUrl to "cart.html"
(function() {
var ecom = angular.module('ecom', ['ngRoute']);
ecom.config(function($routeProvider) {
$routeProvider
.when("/", {
template: "hello cart", //remove this line to use cart.html
templateUrl: "cart.html"
})
.when("/step", {
template: "hello world"
});
});
})();
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script>
<script data-require="angular-route#*" data-semver="1.2.20" src="https://code.angularjs.org/1.2.20/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-app="ecom">
To Step
<div>
<div ng-view>
</div>
</div>
</div>
</body>
</html>
Also: here is a plunk
I configured a small angular app in tomcat its working fine, but when i tried to use route-Provider its not working.
I cannot route to my views.
I did not know why ?
Can any one give some small example for that.
My Code files
//this is controllers.js
var myapp = angular.module('sampleapp', []);
myapp.config('$routeProvider',function myRoute($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/admin.html',
controller: 'adminController'
})
when('/showdata', {
templateUrl: 'partials/data-view.html',
controller: 'dataController'
}).
otherwise({
redirectTo: '/'
});
});
adminController = function ($scope) {
$scope.message = "Welcome to Login Page";
}
dataController = function ($scope) {
$scope.message = "Welcome to Show Data Page";
}
myapp.controller(controllers)
my index.html
<html>
<base href="/advangularjs/" />
<head>
<link type="text/css" rel="stylesheet" href="css/default.css">
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="demoweb_angular/controllers.js"></script>
</head>
<body ng-app="sampleapp" style="background-color: #E0EEE0">
Login |
Show Data
<div ng-view align="center" style="border: 1px solid red;">
</div>
</body>
</html>
admin.html
<b>{{ message }}</b>
data-view.html
<b>{{ message }}</b>
Make sure you have added angular-route.js
in your index.html file.
Also Please go through the documentation of ui router for the basic setup
var myapp = angular.module('sampleapp', ['ngRoute']);
u need to add ngRoute dependancy also. Because your sampleapp is depend on ngRoute .
<div ng-view></div>
you need to add this also. the partial are loading to this div. put this inside the body.