I am new in angularjs.
I tried to load multiple page because login page is different design(without left menu, header,footer, nav bar) but other pages are have inculde header, footer, navbar like this.
For example, I have index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="vendor/theme_files/js/jquery.min.js"></script>
</head>
<body class="nav-md" ng-app="myApp" >
<div class="container body">
<div class="main_container">
<!-- left menu -->
<div left-menu></div>
<!-- /left menu -->
<!-- top navigation -->
<div top-navigation></div>
<!-- /top navigation -->
<!-- page content -->
<div class="right_col" role="main" >
<!-- page content -->
<div id="right-content" ng-view=""></div>
<!--<div ng-view=""></div>-->
<!-- footer content -->
<div footer-content></div>
<!-- /footer content -->
<!-- /page content -->
</div>
</div>
</div>
<script src="vendor/angular/angular.js"></script>
<script src="vendor/angular-resource/angular-resource.js"></script>
<script src="vendor/files/angular-route.js"></script>
<script src="vendor/angular-ui-router/release/angular-ui-router.js"></script>
<script src="js/app.js"></script>
</body>
</html>
app.js:
var app = angular.module('myApp', ['ngRoute', 'ngStorage', 'lbServices', 'ui.router']);
app.config(['$routeProvider', '$httpProvider',
function($routeProvider, $httpProvider) {
$routeProvider.when('/login', {
templateUrl : 'views/login.html',
controller : 'userController'
}).when('/register', {
templateUrl : 'views/register.html',
controller : 'userController'
}).when('/offerletter', {
templateUrl : 'views/offerLetter.html',
controller : 'offerLetterController'
}).otherwise({
redirectTo : '/login'
});
$httpProvider.interceptors.push(['$q', '$location', '$localStorage',
function($q, $location, $localStorage) {
return {
'request' : function(config) {
config.headers = config.headers || {};
if ($localStorage.token) {
config.headers.Authorization = $localStorage.token;
}
return config;
},
'responseError' : function(response) {
if (response.status === 401 || response.status === 403) {
$location.path('/signin');
}
return $q.reject(response);
}
};
}]);
}]);
app.directive('leftMenu', function() {
return {
restrict : 'A',
templateUrl : "views/pages/left-menu.html",
replace : true
};
//
});
app.directive('topNavigation', function() {
return {
restrict : 'A',
replace : true,
templateUrl : "views/pages/top-navigation.html",
scope : {
user : '='
}
};
});
app.directive('rightContent', function() {
return {
restrict : 'A',
replace : true,
templateUrl : "views/pages/content.html"
};
});
app.directive('footerContent', function() {
return {
restrict : 'A',
replace : true,
templateUrl : "views/pages/footer.html"
};
});
Now I need login.html which is totally different from index.html (don't need index's header, footer, sidebar) . How to combine login.html?
don't style your page in the index. Keep index.html as just a blank container. then style your login and other pages in their respective html pages. Use the ionic tabs app as an example of how the structure should be done.
Related
Hi I am new for AngularJs, I am trying to navigate from one page to another when tapped on button and I followed the below code for my requirement but it's not working.
Html files--->
index.html,main.html,london.html,paries.html,others.html
Js files-->
AngularFile.js,Others.js
I kept button on london.html file.
When I taped on it I wanted to navigate from london.html file to others.html file, but where did I make a mistake?
Can some on help me please?
index.html:-
<!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>
<head>
<script src="angularFile.js"></script>
<script type="others.js"></script>
</head>
<body ng-app="myApp">
<p>main</p>
City 1
City 2
<p>Click on the links.</p>
<p>Note that each "view" has its own controller which each gives the "msg" variable a value.</p>
<div ng-view></div>
</body>
</html>
london.html:
{{msg}}
<input type="Button" ng-click="changeMe()" value="Go to other"/>
others.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<h1>Wel come to Others page</h1>
</body>
</html>
angularFile.js
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/main", {
templateUrl : "main.htm",
})
.when("/london", {
templateUrl : "london.htm",
controller : "londonCtrl"
})
.when("/paris", {
templateUrl : "paris.htm",
controller : "parisCtrl"
});
});
others.js:
app.controller("londonCtrl", function ($scope,$location) {
$scope.msg = "I love London";
$scope.changeMe = function(){
$location.path('/others')
};
})
;
You need to register the view in the $routeProvider setup
app.config(function($routeProvider) {
$routeProvider
.when("/main", {
templateUrl : "main.htm",
})
.when("/london", {
templateUrl : "london.htm",
controller : "londonCtrl"
})
.when("/others", {
templateUrl : "others.html"
})
.when("/paris", {
templateUrl : "paris.htm",
controller : "parisCtrl"
});
});
then go to it $location.path('/others');
Here's a sample plunker
https://plnkr.co/edit/oo05d6H6AxuJGXBAUQvr?p=preview
I have created an array of items and when I click on each item details page will be displayed ,for all the items in the array I have used same details page,can anyone look at my plunker and explain why the templateURL is not working when I click on an item?
var app = angular.module("myApp", ["ngRoute"]);
app.controller('mobileController', function($scope) {
$scope.items = [{
name: 'Iphone',
}, {
name: 'Oneplus'
}, {
name: 'Moto'
}];
});
app.config(function($routeProvider) {
$routeProvider
.when('/item/:itemName', {
templateUrl: 'details.html',
controller: 'ItemCtrl'
});
app.controller('ItemCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.itemName = $routeParams.itemName;
}
]);
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="script.js"></script>
<body ng-app="myApp" ng-controller="mobileController">
<h2> Welcome to Mobile Store</h2>
<p>Search:<input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="item in items|filter:test">{{ item.name }}
</li>
</ul>
<div ng-view></div>
</body>
</html>
here is my details page
<!DOCTYPE html>
{{itemName}}
is it because of a mismatch?
.when('/item/:itemName', {
a href="/items/{{item}}"
there's an extra s there
Summary of problems:
Your ItemCtrl is currently defined inside your module's config function. Move it out of there
app.config(function($routeProvider) {
$routeProvider
.when('/item/:itemName', {
templateUrl: 'details.html',
controller: 'ItemCtrl'
});
}); // you were missing this
app.controller('ItemCtrl', ['$scope', '$routeParams',
Your route is /item/:itemName and since you're not using HTML5 mode, you need to create your href attributes with a # prefix. For example
ng-href="#/item/{{item.name}}"
Fixed demo here ~ https://plnkr.co/edit/rKHsBMFcXqJUGp8Blx7Q?p=preview
I am relatively new to Angularjs, and am building a website. When I try to inject todo.html into the body tags of index.html nothing happens. I am not getting any errors in the console. I have read many of the similar posts to mine, and have already tried
Remove the ng-include from the body of index.html
Moved the links for angualrjs and bootstrap from the body of index.html to the head
Originally I used Ng-route but it did not work, so I implemented ui-router
I have tried both ng-route and ui-router,and both run without any errors. I don't think it has anything to do with either.
index.html
<html ng-app="todoApp">
<head>
<!-- META -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->
<title>Todo App</title>
<!-- Angular ans JS links-->
<script src="vendor/angular/angular.min.js"></script>
<script src="vendor/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="app/app.js"></script>
<script src="app/services/todo.service.js"></script>
<script src="app/controllers/todo.controller.js"></script>
<!-- <script src="vendor/angular-route/angular-route.min.js"></script>-->
<!--Jquery and Bootstrap Links-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://npmcdn.com/tether#1.2.4/dist/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU"
crossorigin="anonymous"></script>
<!-- css links -->
<link href="vendor/bootstrap-css-only/css/bootstrap.min.css" rel="stylesheet"><!-- load bootstrap -->
<link rel="stylesheet" href="assets/css/todoApp.css">
<link rel="stylesheet" type="text/css" href="assets/css/Header-Picture.css">
</head>
<body >
<div ng-include="'app/views/header.html'"></div>
<!--<div ng-include="'app/views/footer.view.html'"></div>
-->
<ui-view></ui-view>
<!--<div ui-view></div>-->
</body>
</html>
App.js
var todoApp = angular.module('todoApp', [
'ui.router'
]);
todoApp.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('todo', {
url: "/",
templateUrl: 'views/todo.html',
controller: 'TodoController'
})});
todo.controller.js
todoApp.controller('TodoController', ['$scope', 'Todos', function TodoController($scope, Todos) {
$scope.formData = {};
console.log("in the TodoController");
// when landing on the page, get all todos and show them
Todos.get()
.success(function(data) {
$scope.todos = data;
});
// when submitting the add form, send the text to the spring API
$scope.createTodo = function() {
if(!$scope.todoForm.$valid) {
return;
}
Todos.create($scope.formData)
.success(function(data) {
$scope.formData = {}; // clear the form so our user is ready to enter another
$scope.todos.push(data);
});
};
// delete a todo after checking it
$scope.deleteTodo = function(id) {
Todos.delete(id)
.success(function(data) {
angular.forEach($scope.todos, function(todo, index){
if(todo.id == id) {
$scope.todos.splice(index, 1);
}
});
});
};
// when submitting the add form, send the text to the node API
$scope.saveTodo = function(todo) {
Todos.update(todo)
.success(function(data) {
$scope.editedTodo = {};
});
};
$scope.editedTodo = {};
$scope.editTodo = function(todo) {
$scope.editedTodo = todo;
}
$scope.revertTodo = function() {
$scope.editedTodo = {};
}
}]);
You should be using otherwise to force the first state to be loaded as below
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('todo', {
url: "/",
templateUrl: 'todo.html',
})
$urlRouterProvider.otherwise('/');
});
Your index.html will look like
<div ng-include="'app/views/header.html'"></div>
<ui-view>
</ui-view>
LIVE DEMO
I added the code posted by #Aravind to my project which I belive was an improvement on my own and was correct. But the issue was the file path to the todo.html. The file path in the original was views/todo.html
the correct path is app/views/todo.html
My original code:
todoApp.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('todo', {
url: "/",
templateUrl: 'views/todo.html',
controller: 'TodoController'
})});
Current Working Code
todoApp.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('todo', {
url: "/",
templateUrl: 'app/views/todo.html',
})
$urlRouterProvider.otherwise('/');
});
I am trying to figure out how to transition from one url to another using ion-nav-view. Visual Studio compiles the code and doesnt throw any errors when trying to load the templates/events.html in the tab. Any suggestions are welcome
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>SlidingTransitionwithAPI</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"> </script>
<script src="cordova.js"></script>
<script src="lib/angular-ui-router/release/angular-ui-router.js"></script>
<script src="lib/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="lib/ionic-ion-swipe-cards/ionic.swipecards.js"></script>
<script src="lib/collide/collide.js"></script>
<script src="lib/ionic-ion-tinder-cards/ionic.tdcards.js"></script>
</head>
<body ng-app="starter" no-scroll>
<ion-nav-view>
</ion-nav-view>
</body>
app.js:
angular.module('starter', ['ionic', 'starter.controllers', 'ionic.contrib.ui.tinderCards', 'ui.router'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleLightContent();
}
});
})
.config(function ($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
.state('FindEvents', {
url: '/findEvents',
templateUrl: 'templates/events.html',
controller: 'EventsCtrl'
})
.state('favorites', {
url: '/favorites',
templateUrl: 'templates/favorites.html',
controller: 'FavoritesCtrl'
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/findEvents');
});
controllers.js:
angular.module('starter.controllers', [])
.directive('noScroll', function () {
return {
restrict: 'A',
link: function ($scope, $element, $attr) {
$element.on('touchmove', function (e) {
e.preventDefault();
});
}
}
})
.controller('EventsCtrl', function ($scope, $state) {
var cardTypes = [
{ image: './images/event1.jpeg', title: 'New Apple Release' },
{ image: './images/event2.jpeg', title: 'Digital Conference' },
{ image: './images/event3.jpg', title: 'Skyline Sessions' },
{ image: './images/event4.jpg', title: 'Secret Rooftop Party' },
{ image: './images/event5.jpeg', title: 'Smoking Lights' },
{ image: './images/event6.jpg', title: 'Antibes Color Run' },
{ image: './images/event7.jpg', title: 'Tomorrowland' },
{ image: './images/event8.jpeg', title: 'Steve Aoki Lighting Up Town' },
{ image: './images/event9.jpeg', title: 'Nice Yacht Party' },
{ image: './images/event10.jpg', title: 'Night Pool Party' },
];
$scope.cards = [];
$scope.addCard = function () {
for (var p = 0; p < 10; p++) {
var newCard = cardTypes[p];
newCard.id = Math.random();
$scope.cards.push(angular.extend({}, newCard));
}
}
$scope.addCard();
$scope.cardDestroyed = function (index) {
$scope.cards.splice(index, 1);
};
$scope.cardSwipedLeft = function (index) {
console.log('Left swipe');
}
$scope.cardSwipedRight = function (index) {
console.log('Right swipe');
}
$scope.cardDestroyed = function (index) {
$scope.cards.splice(index, 1);
console.log('Card removed');
}
//Transitioning between states
$scope.Favorites = function () {
$state.go('favorites');
}
});
events.html:
<ion-view view-title="Time 'N Joy '" ng-controller="EventsCtrl">
<ion-content ng-app="starter" >
<ion-pane>
<div class="bar bar-header bar-dark">
<button class="button button-clear button-icon icon ion-navicon"></button>
<div class="h1 title" font="6" color="white">Event Finder</div>
<button class="button button-clear" ng-click="Favorites()">
<i class="icon ion-heart"></i>
</button>
</div>
<td-cards>
<td-card id="td-card" ng-repeat="card in cards" on-destroy="cardDestroyed($index)"
on-swipe-left="cardSwipedLeft($index)" on-swipe- right="cardSwipedRight($index)"
on-partial-swipe="cardPartialSwipe(amt)">
<div class="title">
{{card.title}}
</div>
<div class="image">
<div class="no-text overlayBox"><div class="noBox boxed">Trash</div></div>
<img ng-src="{{card.image}}">
<div class="yes-text overlayBox"><div class="yesBox boxed" id="centerMe">Save</div></div>
</div>
</td-card>
</td-cards>
</ion-pane>
</ion-content>
</ion-view>
It is probably something very straigh forward but I have gone through countless examples and documents but cant find the error.
I am new to AngularJs and for stackoverflow too,hope will get a solution for my problem here. I`m trying to display the details of an experiment(in the same page)based on the name of the experiment which is coming from the URL when the name is clicked(index.html). Here the problem is,when I click an experiment name,it is coming in the URL but not able to fetch its details.Can anyone help me to solve.Here is my code.
//experiments.json
[
{
"sl_no" : "1",
"name" : "BCD adders",
"objective" : "It deals with the desinging of reversible BCD adders."
},
{"sl_no" : "2",
"name" : "Online Banking",
"objective" : "It deals with the online Transactions."}
]
//index.html
<!DOCTYPE html>
<html ng-app="experimentApp">
<head>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/controller.js"></script>
</head>
<body>
<div id="main">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<br>
<ul class="nav navbar-nav navbar-left">
<div>
<ul ng-controller="ExperimentListCtrl">
<li ng-repeat="experiment in experiments">
<a href="#/{{experiment.name | encodeURI}}">
<strong>{{experiment.sl_no}}. {{experiment.name}}</strong><br>
</a>
</li>
</ul>
<div ng-include="experiment-detail.html"></div>
</div>
</ul>
</div>
</nav>
</div>
</body>
</html>
//controller.js
// create the module and name it experimentApp
var experimentApp = angular.module('experimentApp', ['ngRoute']);
// configure our routes
experimentApp.config(function($routeProvider) {
$routeProvider.
when('/:experimentName', {
templateUrl : 'experiment-detail.html',
controller : 'ExperimentDetailCtrl'
}).
otherwise({
redirectTo: '/'
});
});
experimentApp.factory('experiments', function($http){
function getData(callback){
$http({
method: 'GET',
url: 'experiments.json',
cache: true
}).success(callback);
}
return {
list: getData,
find: function(name, callback){
getData(function(data) {
var experiment= data.filter(function(entry){
return entry.name === name;
})[0];
callback(experiment);
});
}
};
});
experimentApp.controller('ExperimentListCtrl', function ($scope, experiments){
experiments.list(function(experiments) {
$scope.experiments = experiments;
});
});
experimentApp.controller('ExperimentDetailCtrl', function ($scope, $routeParams,
experiments){
experiments.find($routeParams.experimentName, function(experiment) {
$scope.experiment = experiment;
});
});
experimentApp.filter('encodeURI', function(){
return window.encodeURI;
});
//experiment-detail.html
<div>
<strong>{{experiment.sl_no}}. {{experiment.name}}</strong><br>
</br></br>
<strong>Aim :</strong>{{experiment.objective}}
</div>
You need to encode the experiment.name only, so change :
experimentApp.filter('encodeURI', function(){
return window.encodeURI;
});
to :
experimentApp.filter('encodeURI', function(stringToEncode){
return encodeUri(stringToEncode);
});