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
Related
My code is as shown below:
index.html
<!DOCTYPE html>
<html>
<head>
<title>quflip</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/login.css">
</head>
<body ng-app="quflipMobWeb">
<ng-view></ng-view>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/services.js"></script>
<script src="js/controller/loginController.js"></script>
<script src="js/controller/homeController.js"></script>
<script src="js/app.js"></script>
<script src="js/controller/driverController.js"></script>
<script src="js/controller/driversController.js"></script>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>
home.html
<div>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>
homeController.js
angular.module('quflipMobWeb.homeController', []).
controller('homeController', function($scope) {
// console.log("home called");
});
app.js
angular.module('quflipMobWeb', [
'quflipMobWeb.services',
'quflipMobWeb.controllers',
'quflipMobWeb.login',
'quflipMobWeb.homeController',
'ngRoute'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when("/home", { templateUrl: "template/home.html", controller: "homeController" }).
when("/login", { templateUrl: "template/login.html", controller: "loginController" }).
otherwise({ redirectTo: '/login' });
}]);
For detailed code, I have given my repository url here:
https://github.com/mrugesh008/testRepo.git
This is the website which I am following for achieving the effect
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav
Your code almost works well. you can just add ng-style:
app.controller('homeController', function($scope) {
console.log("home called");
$scope.myStyle = {
width: '0px'
};
$scope.openNav = function() {
$scope.myStyle.width = '250px';
}
$scope.closeNav = function() {
$scope.myStyle.width = '0px';
}
});
Home.html
<div>
<div id="mySidenav" class="sidenav" ng-style="myStyle">
×
About
Services
Clients
Contact
</div>
<span style="font-size:30px;cursor:pointer" ng-click="openNav()">☰ open</span>
</div>
Demo Plunker
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>
has someone an idea, why :message always throws "undefined"? i call the page with "MyDomain.com/#AMessage"
ctrl.js:
angular.module('AutApp', ['ngRoute'])
.config(function($routeProvider){
$routeProvider.when("/:message",
{
templateUrl: "index.html",
controller: "ctrl"
}
);
})
.controller('ctrl', function($routeParams) {
document.getElementById("test").innerHTML = $routeParams.message;
});
index.html:
<!DOCTYPE html>
<head></head>
<body ng-app="AutApp" ng-controller="ctrl">
<div id = "test"></div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="ctrl.js"></script>
</body>
</html>
Thank you for your help!
You are not using ng-route properly. You must define a view. The template for the view cannot be index.html, as that page is the root of your application. Your controller should be associated with the route. More info on ng-route
<!DOCTYPE html>
<body ng-app="AutApp">
<div ng-view></div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script>
angular.module('AutApp', ['ngRoute'])
.config(function($routeProvider){
$routeProvider.when("/:message",
{
template: '<div id = "test"></div>',
controller: "ctrl"
}
);
})
.controller('ctrl', function($routeParams) {
document.getElementById("test").innerHTML = $routeParams.message;
});
</script>
in Index.html i defined:
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="bwp">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="app/landingController.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
In app.js i defined:
var app = angular.module("bwp", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider.when(
'/main', {
templateUrl: 'app/test.html',
controller: 'testController'
})
.otherwise({ redirectTo: '/main' });
});
Here is the complete testController.js:
(function() {
var app = angular.module("bwp");
var landingController = function ($scope, $http) {
$scope.test = "this is a test";
};
app.controller("landingController", landingController);
}());
In test view I defined:
<h1 ng-controller="landingController">
{{test}}
</h1>
When i render the page i get (through inspect element):
<h1 ng-controller="landingController" class="ng-scope ng-binding">
{{test}}
</h1>
Note that it identifies the controller and the scope.
SO...Angular injects the view but doesn't bind $scope.test as expected. What am I doing wrong?
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.