I have created index.html as below:
<html lang="en" ng-app="bootProject" >
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>SASS / Home
</title>
<script src="../../node_modules/angular/angular.min.js"></script>
<script src="../../node_modules/angular-route/angular-route.min.js"></script>
<!-- Bootstrap core CSS -->
<link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../../dist/css/main.css" rel="stylesheet">
<!-- Custom styles for font-awesome css -->
<link href="../../node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div ng-view></div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../node_modules/jquery/dist/jquery.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
angular-route.min.js
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../javascript/main.js"></script>
<script src="//localhost:35729/livereload.js"></script>
</body>
</html>
There is a "home.html" with a navbar that I want to click on "log in" tab and goes in to "log.html" page.
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li>Register</li>
<li>Login</li>
<div><ng-view></div>
</ul>
</div>
And this is my "main.js":
// Module
var weatherApp = angular.module('bootProject',['ngRoute']);
// Route
weatherApp.config(function($routeProvider){
$routeProvider
.when('/home',{
templateUrl:'http://localhost:1337/dist/templates/home.html',
controller: 'homeController'
})
.when('/log',{
templateUrl:'http://localhost:1337/dist/templates/log.html',
controller: 'logController'
})
.when('/dashboard',{
templateUrl:'http://localhost:1337/dist/templates/home.html',
controller: 'dashboardController'
});
});
//Controllers
weatherApp.controller('logController', [ '$scope', '$location',function($scope,$location){
$scope.submit= function(){
var uname = $scope.username;
console.log(uname);
var pass = $scope.password;
if($scope.username =='admin' && $scope.password =='admin'){
$location.path("/dashboard");
}
};
}]);
When I open my project in localhost / dist it shows me just one line which is "angular-route.min.js", but when I open it in localhost/src it shows me the right pages but still I can see that line in log.html page.
Please let me know what my mistake is?
I don't see a .otherwise in your routing. You should be using .otherwise to catch routes that do not match the ones you have specified.
for example, you might use .otherwise({redirectTo:'/home'});
Related
I am new to angular and I am simply trying to switch between two bootstrap defined menu classes on scroll. What I am trying to achieve is that the menu stays fixed to the top with changed background (as provided in bootstrap css) when scroll is not on top of the page. I have tried using ng-class, but nothing is happening. The google chrome inspector doesn't report any errors. Here is what I have so far:
html:
<html lang="en" ng-app = "cvApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>CV creation</title>
<!-- Bootstrap Core CSS -->
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="assets/bootstrap/css/clean-blog.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bitter:400,700">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body style="background-color:#FF0000;">
<div>
<nav class = "navbar navbar-default navbar-custom navbar-fixed-top"
ng-class="{'navbar navbar-default navbar-custom navbar-fixed-top is-fixed is-visible':boolChangeClass}">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" >
<ul class="nav navbar-nav navbar-right">
<li>
Save
</li>
<li>
Export
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</div>
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
<script src="js/angular.min.js?q=123"></script>
<script src="js/angular-route.min.js?q=123"></script>
<script src="app/cvapp.js?q=123"></script>
<script src="app/Controllers/MenuController.js?q=123"></script>
</body>
</html>
module "cvApp" with directive:
var cvApp = angular.module('cvApp', []);
cvApp.directive("scroll", function ($window) {
return function(scope, element, attrs) {
angular.element($window).bind("scroll", function() {
if (this.pageYOffset >= 0) {
scope.boolChangeClass = true;
} else {
scope.boolChangeClass = false;
}
scope.$apply();
});
};
});
I would like some insight on what I am doing wrong and thank you in advance.
In the code that you have provided, i can not see you using the directive in the markup anywhere.
change your markup to :
<nav scroll class = "navbar navbar-default navbar-custom navbar-fixed-top"
ng-class="{'navbar navbar-default navbar-custom navbar-fixed-top is-fixed is-visible':boolChangeClass}"> ...
and it would work.
Here is a basic fiddle for example (doesn't include bootstrap, but you can see that the class is being applied on scroll, the background of nav changes from red to green):
http://jsfiddle.net/Lvc0u55v/13347/
I am trying to make a single page web site with angular, bootstrap. I was trying to include a carousel in the first page and with ngRouting does not work. I have read somewhere here that i need to use ui.bootstrap to make carousel work with routing.
I am a beginner in angular. This is my index.html:
<!DOCTYPE html>
<html lang="en" ng-app="mainApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>My web page</title>
<!-- load angular, ui-bootstrap and angular-route -->
<script src="js/angular.min.1.5.8.js"></script>
<script src="js/angular-animate.min.1.5.8.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/ui-bootstrap-tpls-2.3.0.min.js"></script>
<script src="js/app.js"></script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/modern-business.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation bar-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
CODE
</nav>
<!-- ngRoute -->
<div ng-view></div>
<!-- jQuery and Bootstrap -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
And my app.js:
var app = angular.module('mainApp', ['ngRoute','ui.bootstrap','ngAnimate']);
// angular routing
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "pages/main.html"
})
.when("/prezentare", {
templateUrl : "pages/AnotherPage.html"
})
.when("/green", {
templateUrl : "pages/green.html"
})
.when("/blue", {
templateUrl : "pages/blue.html"
});
});
// angular ui.bootstrap
app.controller('CarouselCtrl', function($scope) {
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$scope.active = 0;
var slides = $scope.slides = [];
slides.push(
{ image_url: '#/img/header1.png' },
{ image_url: '#/img/header2.png' }
);
});
and of course the main.html
<!-- New Carousel - UI-Bootstrap -->
<div ng-controller="CarouselCtrl">
<div style="height: 350px">
<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
<div uib-slide ng-repeat="slide in slides">
<img ng-src="{{slide.image_url}}" style="margin:auto;">
<</div>
</div>
</div>
</div>
<!-- Page Content -->
<div class="container"> other code </div>
Please tell my what i have doing wrong??? The carousel is not showing (only the 2 side arrows). Using ui.bootstrap, the carousel will be responsive too right?
I'm doing a single page application using AngularJS. On my index.html I'm using an ng-view direction to show the header section. The navigation section is defined as a ul element with a bunch of li elements that represents navigation links. I have a ng-class on each li element that needs to set the class to active. Based on my code, it does, but it doesn't appear on the page until after I click on the page. Provided is my code, please help. Thank you in advance
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 1 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/font-awesome.css" />
<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/isotope.css" media="screen" />
<link rel="stylesheet" href="css/style.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="appMod">
<!-- Start: Header -->
<div ng-include="'templates/header.html'"></div>
<!-- End: Header -->
<!-- Start: Content -->
<div ng-view></div>
<!-- End: Content -->
<!-- Start: Footer -->
<div ng-include="'templates/footer.html'"></div>
<!-- End: Footer -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/fancybox/jquery.fancybox.pack.js"></script>
<script src="js/wow.min.js"></script>
<!-- Vendor: Angular, followed by our custom Javascripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-route.min.js"></script>
<!-- parent angular module and controller that supports SPA (Single Page Application) -->
<script src="app/appMod.js"></script>
<script src="templates/TemplateCtrl.js"></script>
<script src="app/home/HomeCtrl.js"></script>
<script src="app/blog/BlogCtrl.js"></script>
<script src="js/functions.js"></script>
</body>
</html>
templates/header.html
<header >
<div class="main-menu" >
<div class="container">
<div class="row">
<div class="col-md-4">
<h1><a class="navbar-brand" href="index.html" data-0="line-height:90px;" data-300="line-height:50px;"> Hidayah
</a></h1>
</div>
<div class="col-md-8">
<div class="dropdown">
<ul class="nav nav-pills" ng-controller="TemplateHeadCtrl">
<li ng-repeat="NavLink in NavLinks" ng-class="IsSelected(NavLink)">
{{NavLink.LinkTitle}}
</li>
<!-- <li id='liHome' class="active"></li>
<li id='liPortfolio'>Portfolio</li>
<li id='liBlog'>Blog</li>
<li id='liContact'>Contact</li>-->
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
templates/TemplateCtrl.js
app.controller("TemplateHeadCtrl", ['$scope','$http', function($scope,$http){
$scope.NavLinks = [
{
"LinkTitle": "Home",
"LinkURL": "#/",
"LinkID": "liHome"
},
{
"LinkTitle": "Portfolio",
"LinkURL": "#Portfolio",
"LinkID": "liPortfolio"
},
{
"LinkTitle": "Blog",
"LinkURL": "#Blog",
"LinkID": "liBlog"
},
{
"LinkTitle": "Contact",
"LinkURL": "#Contact",
"LinkID": "liContact"
},
{
"LinkTitle": "Contact1",
"LinkURL": "#Contact1",
"LinkID": "liContact1"
}
];
/*
$scope.NavLinks = function () {
alert("here")
return $http.get('/NavLinks.json').then(function (response) {
alert("here")
return response.data;
}).catch(function (fallback) {
alert("Oops an error has occured. ")
});
};*/
$scope.SetMaster = function(section){
$scope.SelectedSection = section;
};
$scope.IsSelected = function(section){
return $scope.SelectedSection === section? 'active': '';
};
}]);
Also for some reason the $scope.NavLinks function does not work either. I have it commented it out in my code. The NavLinks.json is located under the same folder of TemplateCtrl.js
$scope.NavLinks = function () {
alert("here")
return $http.get('/NavLinks.json').then(function (response) {
alert("here")
return response.data;
}).catch(function (fallback) {
alert("Oops an error has occured. ")
});
};
Make change in 'templates/header.html' like this:
<li ng-repeat="NavLink in NavLinks" ng-class="{active : IsSelected(NavLink)}">
{{NavLink.LinkTitle}}
</li>
And in 'templates/TemplateCtrl.js':
$scope.IsSelected = function(section){
return $scope.SelectedSection.LinkID == section.LinkID;
};
I am facing one issue.when i am clicking the <li>Course</li> link i am getting the requesting page but when i am refreshing this page again it is not coming using angular.js.its shoqing me the error The requested URL /Gofast/subject was not found on this server..I am getting my home page by typing the url oditek.in/Gofast/.I am explaining my code below.
app.js:
var GoFastoApp=angular.module('GofastoHome',['ngRoute']);
GoFastoApp.config(function($routeProvider,$locationProvider) {
$routeProvider
.when('/',{
templateUrl : 'view/home.html',
controller : 'homecontroller'
})
.when('/deptinfo',{
templateUrl : 'view/info.html',
controller : 'infocontroller'
})
.when('/TimeTable',{
templateUrl : 'view/time.html',
controller : 'timecontroller'
})
.when('/course',{
templateUrl : 'view/course.html',
controller : 'coursecontroller'
})
.when('/subject',{
templateUrl : 'view/subject.html',
controller : 'subjectcontroller'
})
.when('/hod',{
templateUrl : 'view/hod.html',
controller : 'hodcontroller'
})
.when('/faculty',{
templateUrl : 'view/faculty.html',
controller : 'facultycontroller'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: true
});
})
I am adding also base url in my index page.See the code below.
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="GofastoHome">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>...:::WELCOME TO Channabasavashwara Institude of Technology:::...</title>
<!-- PACE LOAD BAR PLUGIN - This creates the subtle load bar effect at the top of the page. -->
<link href="css/pace.css" rel="stylesheet">
<script src="js/pace.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script data-require="lodash.js#*" data-semver="2.4.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script><script src="js/angularjs.js" type="text/javascript"></script>
<script src="js/angularroute.js" type="text/javascript"></script>
<script src="controller/app.js" type="text/javascript"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" style="margin-top:50px">
<div class="container" style="width:1270px;">
<div class="navbar-header navbar-brand">
Computer Science & Engineering
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Edit <span class="caret"></span>
<ul class="dropdown-menu">
<li>Course</li>
<li>Subject</li>
<li>HOD</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Faculty</li>
<li>One more separated link</li>
</ul>
</li>
<li>Department</li>
<li>Time Table</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<script src="controller/HomeController.js" type="text/javascript"></script>
<script src="controller/CourseController.js" type="text/javascript"></script>
<base href="/Gofast/">
</body>
</html>
Here when i am clicking on the course option the required page is coming but when i am reloading the same page again the its throwing the above error.Please help me to resolve this error.
I am trying to make a PhoneGap webapp using angular. I have these three files.
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Device Properties Example</title>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8"/>
<meta name="viewport"
content="width=device-width,height=device-height,user-scalable=no"/>
<!-- Cordova Build Application -->
<script charset="utf-8" src="cordova.js"></script>
<!-- Main Dependencies -->
<script src="vendor/jquery/jquery-1.11.1.min.js"></script>
<!-- Angular Declaration -->
<script src="vendor/angular/angular.min.js"></script>
<script src="vendor/angular/angular-route.min.js"></script>
<!-- Angular App Declaration -->
<script src="assets/js/index.js"></script>
<script src="app/app.js"></script>
<script src="app/controller.js"></script>
<script src="app/factory.js"></script>
<script>
app.initialize();
</script>
<!-- UI KIT -->
<script src="vendor/ui-kit/js/uikit.min.js"></script>
<link rel="stylesheet" href="vendor/ui-kit/css/uikit.min.css"/>
<!-- User Defined Styles -->
<link rel="stylesheet" href="assets/css/kore.css"/>
</head>
<body class="uk-width-1-1">
<div>
<header class="uk-width-1-1" id="eca-main-nav-container">
<nav class="uk-navbar">
<div class="uk-navbar-flip">
<ul class="uk-navbar-nav">
<li><a href="#eca-main-nav" data-uk-offcanvas>
<i class="uk-icon uk-icon-bars"></i>
</a>
</li>
</ul>
</div>
</nav>
</header>
<div ng-view="" id="eca-main-view"></div>
<footer>
<!-- Main Navigation Canvas -->
<aside id="eca-main-nav" class="uk-offcanvas">
<section class="uk-offcanvas-bar">
<ul class="uk-nav uk-nav-offcanvas">
<li>Home</li>
</ul>
</section>
</aside>
</footer>
</div>
</body>
</html>
index.js
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, true);
},
onDeviceReady: function() {
angular.element(document).ready(function() {
angular.bootstrap(document);
});
},
};
app.js
//constants
var appOrigin2 = 'http://event.deremoe.com/api/vendor/events2';
var appOrigin = 'http://event.chart.local/api/vendor/events.json';
var app = angular.module('app',['ngRoute']);
app.config(function($routeProvider){
//chart site
$routeProvider.when('/chart',{
templateUrl:'view/chart',
controller:'chartController'
});
$routeProvider.when('/event',{
templateUrl:'view/event',
controller:'eventViewController'
});
//start route
$routeProvider.otherwise({redirectTo:'/chart'});
});
controller.js
/* chartController
* view/chart.html
*/
app.controller('chartController',['$scope','chartListLoadService',function($scope,chartListLoadService){
alert('this is running');
//chartListLoadService.fetchListJSONP('all',$scope);
//$scope.eventDetail = function(eventId){
// alert(eventId);
//};
}]);
/* eventViewController
* view/event.html
*/
app.controller('eventViewController',['$scope',function($scope){
}]);
It works fine on the browser. The Alert is triggered just fine in the controller. But when I compiled it on Phonegap, the AngularJS is not initialized.
I've read that you need to execute the code after the 'deviceready' in order to work. I looked into this quetions here:
Angular ng-view/routing not working in PhoneGap
and try to use it. But it appears that it doesn't do anything. I can't understand why, or I might be missing something to do this, as well as my ng-app has a specific name and is attached to the app variable as seen.
Kindly help.
You should not use ng-app when manually bootstrapping Angular. See https://docs.angularjs.org/guide/bootstrap.