Trying to make simple routing on AngularJs. I added ng-app to html once. And all my javascript takes okace in 1 file. My ng-view component doesn't show anything. There is my index.html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script src="js/lib/angular.min.js"></script>
<script src="js/lib/angular-route.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<ul>
<li>
Home
</li>
<li>
Gallery
</li>
<li>
Contribute Photo
</li>
</ul>
<div ng-view></div>
</body>
</html>
My main.js file
const app = angular.module('app', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/pages/home.html',
controller: 'homeController'
})
.when('/gallery', {
templateUrl: '/pages/gallery.html',
controller: 'galleryController'
})
.when('/contribute', {
templateUrl: '/pages/contribute.html',
controller: 'galleryController'
});
})
.controller('homeController', function($scope) {
})
.controller('galleryController', function ($scope) {
});
I tryied to use js libs from websites and localy but it didn't help. Compare with examples in the Internet, but everything i find is similar to mine. In my template files i just put some h1 headers.There is my project directory
Here is working code:
https://plnkr.co/edit/oHY8XMKk5Na13wU5JtNg?p=preview
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.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 : "<br/><h1>page1</h1>"
})
.when("/red", {
template : "<br/><h1>page2</h1>"
})
.when("/green", {
template : "<br/><h1>page3</h1>"
})
.when("/blue", {
template : "<br/><h1>Put your template url by by page url</h1>"
});
});
</script>
<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p>
</body>
</html>
Related
Below is a HTML page, Couldn't get content when click on page 1
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
<script src="JavaScript.js"></script>
</head>
<body ng-app="myapp">
<div class="Container">
<nav class="navbar navbar-default">
<ul class="navbar navbar-nav">
<li>
Page 1
Page 2
Page 3
</li>
</ul>
</nav>
</div>
<div ng-view></div>
<script>
var app = angular.module("myapp", ["ngRoute"]);
app.config(function ($routeProvider){
$routeProvider.when("/page1", {
template : <h1>Page 1</h1>
})
.when("/page2", {
template: <h1>Page 2</h1>
})
.otherwise({
template: <h1>note found</h1>
})
});
</script>
</body>
</html>
Is there any mistake in above code. Is issue with reference.
Can someone please correct it?
Page 3 will not show anything.
The first mistake you missed around quotes for templates in javascript code:
$routeProvider.when('/page1', {
template : '<h1>Page 1</h1>'
})
.when("/page2", {
template: '<h1>Page 2</h1>'
})
.otherwise({
template: '<h1>note found</h1>'
});
And no need to use a exclamation mark in links:
Page 1
Page 2
Page 3
You can use redirectTo() method with otherwise() method. Also, have to put href="#" under <a> tag.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<body ng-app="myApp">
<p>Main</p>
Red
Green
Oranger
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.otherwise({redirectTo:'/'});
});
</script>
<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p>
</body>
</html>
There are a couple of mistakes: First, in the href, you have used capital P whereas in route definition it's small letter i.e p, 2nd you do not need to use ! in the href i.e it should be like href=#page1 and the 3rd one is template should be as string i.e under single/double quote.
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
<script src="JavaScript.js"></script>
</head>
<body ng-app="myapp">
<div class="Container">
<nav class="navbar navbar-default">
<ul class="navbar navbar-nav">
<li>
Page 1
Page 2
Page 3
</li>
</ul>
</nav>
</div>
<div ng-view></div>
<script>
var app = angular.module("myapp", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider.when("/page1", {
template: '<h1>Page 1</h1>'
})
.when("/page2", {
template: '<h1>Page 2</h1>'
})
.otherwise({
template: '<h1> note found </h1>'
})
});
</script>
</body>
</html>
Here is the html code
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Getting Started: Serving Web Content</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- import vue-resource -->
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<div id="app" :style="backgroudcolor"></div>
</body>
and I supposed to set background for the div whose id is 'app' ,and I've tried to bind a style object to its style, but it didn't at all..
here is the definition of the style object:
backgroudcolor: {
backgroundColor: 'red'
}
by the way, I put it in data.
Please help me, I'll be very grateful for that!
Use the right css property name background-color:
new Vue({
el: "#app",
data() {
return {
backgroudcolor: {
'background-color': 'red'
}
}
}
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app":style="backgroudcolor">
test
</div>
I am new to AngularJS. I am doing a project where label name will come from a database. I have to pass label id as a parameter and retrieve label name. When the page loads the value will get initialized in the label. But the problem is the value sets when I use ng-click. But I want this using ng-init/ng-bind, because clicking on the label is not a solution.
Here is the code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.test = function(e){
$scope.label=e.target.id;
}
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<label id="lblID" style="border:10px solid red;" ng-click="test($event)">{{label}}</label>
</div>
</body>
</html>
You should handle DOM manipulation in a directive as below.
DEMO
var app = angular.module('myApp', []);
app.controller('Ctrl', function ($scope) {
$scope.doSomething = function (e) {
alert(e);
};
});
app.directive('myDir', function () {
return function (scope, element, attrs) {
scope.doSomething(element);
};
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.test = function(e){
$scope.label=e.target.id;
}
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="Ctrl">
<label my-dir id="lblID" style="border:10px solid red;" ng-init="test('lblID')">{{label}}</label>
</div>
</body>
</html>
I'm using angular to make page identification before access to the app main,
in the templateUrl: login.html i cant do anything !
note: when I called the ng-app="myApp" will give this error :
Uncaught Error: [$injector:modulerr]
here my code JS:
angular.module('training')
.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'index.html',
controller: 'mainCtrl'
})
.when('/login',{
templateUrl: 'login.html',
controller: 'loginCrtl'
});
})
.controller('loginCrtl',['$scope','$timeout','apiservice','$routeProvider', function($scope,$timeout,apiservice,$routeProvider){
$scope.ppp= function(){
alert('ok');
}
}])
.controller('mainCtrl'......
here my login.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="public/jquery-1.11.2.min.js"></script>
<script src="public/jquery-ui.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<!-- <script src="bower_components/angular-route/angular-route.min.js"></script> -->
<script src="controllers/app.js"></script>
<script src="services/apiService.js"></script>
<script src="controllers/mainCrtl.js"></script>
</head>
<body ng-controller="loginCrtl">
<div class="center" style="width: 500px; height: 300px; background-color: #e5e5e5;">
Veuillez authentifier:<br><br>
Login: <input type="text" id="login"><br><br>
Password: <input type="text" id="pass">
<br><br>
<button id="ValidAccess" ng-click="ppp()">ok</button>
</div>
</body>
<style >
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</html>
my index.html:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Planni</title>
<link rel="stylesheet" type="text/css" href="mystyle/bootstrap-tokenfield.css">
<link rel="stylesheet" type="text/css" href="mystyle/bootstrap.min.css">
<link rel="stylesheet" href="mystyle/bootstrap-datepicker.css">
<link rel="stylesheet" href="mystyle/jquery-ui.css">
<script src="public/jquery-1.11.2.min.js"></script>
<script src="public/jquery-ui.js"></script>
<script src="public/bootstrap-datepicker.js"></script>
<script src="node_modules/lodash/lodash.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/moment/min/moment-with-locales.min.js"></script>
<script src="public/daypilot/daypilot-all.min.js"></script>
<script src="public/bootstrap-tokenfield.js"></script>
<script src="public/bootstrap.min.js"></script>
<!-- <script src="bower_components/angular-route/angular-route.js"></script> -->
<script src="controllers/app.js"></script>
<script src="services/apiService.js"></script>
<script src="controllers/mainCrtl.js"></script>
</head>
<body data-ng-app="training" data-ng-controller="mainCtrl">
....
</body>
</html>
Where your ng-app ? module of you is training call ng-app ='training' not ng-app='myApp'
Promblem of you is not setting it use like this
angular.module('training',['ngRoute'])
Here is set a module
angular.module('training',[])
and here is get a module
angular.module('training')
EDIT
You use like this
angular.module('training',['ngRoute'])
.controller('mainCtrl',mainCtrl)
.controller('loginCtrl',loginCtrl)
function mainCtrl(){
//
}
function loginCtrl(){
//
}
or if you have another module contain loginctr use like this
angular.module('anothermodule',[])
.controller('loginCtrl',loginCtrl)
function loginCtrl(){
//
}
And in training app include it
angular.module('training',['ngRoute','anothermodule'])
first of all, you need to add the ng-app directive to your html file. my recommendation is to add it inside html tag
<html ng-app="training">
then in the js, when you are initializing the module, need to add empty square brackets to the module
angular.module('training',[])
I assume for the router you are using ngRoute. in that case, you need to inject the route module to your training module
angular.module('training',['ngRoute'])
I am trying to redirect to home.html on click of a button in index.html
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/home.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-royal">
<h1 class="title">Index</h1>
</ion-header-bar>
<ion-content>
<div ng-controller="LoginCtrl">
<button ng-click="login()">Login</button>
</div>
</ion-content>
</ion-pane>
</body>
</html>
home.js
var VLogin = angular.module('starter', ['ionic']);
VLogin.controller('LoginCtrl', ['$scope','$location', function($scope, $location) {
$scope.login = function(){
$location.path("#/home.html");
};
}]);
And here is the hierarchy of both files
$location.path() is not working. Where am I going wrong? TIA.
take a look here: http://learn.ionicframework.com/formulas/navigation-and-routing-part-1/
but the simple answer is that you should set up routes
$stateProvider.state('app', {
url: '',
templateUrl: 'app.html',
controller: 'AppCtrl'
}
}).state('login', {
url: '/login',
templateUrl: 'login.html',
controller: 'LoginCtrl'
}
})
and then I would recommend using the $state provider to do something like this
login.controller('LoginCtrl', function($scope, $state) {
$state.go('app',{});
})
This is not the EXACT code, but an overview, I would recommed reading the link provided for additional information