I am new to AngularJS and trying to build a single-page website based on the tutorial of Charney Kaye. Now I have set up the website as far as I understood it and it starts as intendet, however the navigation does not seem to load the qequested partial but tries to reference a path to a new full html file.
I'm sure I just missed a tiny thing, but I don't seem to be able to put a pin in it. So I'd be greatfull for any hint I might get.
The code I've done so far:
Index.html
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
<!-- Meta-Information -->
<title>Zanas Wetter</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="ACME Inc.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Vendor: Bootstrap Stylesheets http://getbootstrap.com -->
<link rel="stylesheet" href="/vondor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/vondor/bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="/vondor/fonts_awesome/css/font-awesome.min.css">
<!-- Bootstrap Core CSS -->
<link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="../vendor/morrisjs/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Our Website CSS Styles -->
<link rel="stylesheet" href="css/main.css">
</head>
<body ng-app="WeatherApp">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Our Website Content Goes Here -->
<div ng-include='"templates/header.html"'></div>
<div ng-view></div>
<!-- Vendor: Angular, followed by our custom Javascripts -->
<script src="/vendor/angularjs/angular.min.js"></script>
<script src="/vendor/angularjs/angular-route.min.js"></script>
<!-- Our Website Javascripts -->
<script src="js/main.js"></script>
<!-- jQuery -->
<script src="../vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Morris Charts JavaScript -->
<script src="../vendor/raphael/raphael.min.js"></script>
<script src="../vendor/morrisjs/morris.min.js"></script>
<script src="../data/morris-data.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
<script src="../dist/js/jquery.formatDateTime.min.js" type="text/javascript"></script>
<script src="../dist/js/wetterdienst.js"></script>
</body>
</html>
header.html
<!-- Navigation -->
<nav class="navbar navbar-inverse">
<!-- Container -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><i class="fa fa-cloud fa-fw"></i> Weather App</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Station</li>
<li>Datasearch</li>
<li>About
</li>
<!-- <li class="dropdown">
<i class="fa fa-user fa-fw"></i> <span class="caret"></span>
<ul class="dropdown-menu">
<li><i class="fa fa-user fa-fw"></i> Mein Profil</li>
<li><i class="fa fa-gear fa-fw"></i> Nutzer Verwaltung</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i> Abmelden</li>
</ul>
</li> -->
</ul>
</div>
</div>
<!-- ./Container -->
</nav>
main.js
/**
* Main AngularJS Web Application
*/
var app = angular.module('WeatherApp', [
'ngRoute'
]);
/**
* Configure the Routes
*/
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
// Home
.when("/", {templateUrl: "partials/home.html", controller: "PageCtrl"})
// Pages
.when("about", {templateUrl: "partials/about.html", controller: "PageCtrl"})
.when("faq", {templateUrl: "partials/faq.html", controller: "PageCtrl"})
.when("datasearch", {templateUrl: "partials/datasearch.html", controller: "PageCtrl"})
.when("tinkerforge", {templateUrl: "partials/tinkerforge.html", controller: "PageCtrl"})
.when("usercontrol", {templateUrl: "partials/usercontrol.html", controller: "PageCtrl"})
// else 404
.otherwise("/404", {templateUrl: "partials/404.html", controller: "PageCtrl"});
}]);
/**
* Controls all other Pages
*/
app.controller('PageCtrl', function (/* $scope, $location, $http */) {
console.log("Page Controller reporting for duty.");
});
Plus the requiered partials for the sites I wand to display. But as said before it doesn't try to load the partials but a path based on whatever literaly is written behind the href=
As I said, any help is welcome, so thank you for your time and reading so far.
try to use href="#/about" The routing works with #
and if you use angular 1.6 add below for removing '!'
app.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
This is quiet embarresing, but the answer way in the order of the used JavaScript files in the index.html.
Putting the <script src="js/main.js"></script> in the last place seems to have fixed the problem.
Related
I am have made a few apps with node and have used Angular on a few front ends, but i have never combined the two. I am total loss for how to send all the views to the front end when index.html is sent. Currently i have the following code in my server:
...
app.use(express.static('./app'));
app.listen(config.port, function() {
logger.info('Server listening on ' + config.port);
});
....
app.get('/update', auth.isLoggedIn, (req, res) => {
byo.userUpdate(res);
})
app.get('/*', function(req, res) {
res.sendFile(__dirname + '/app/index.html');//'/public/index.html');
})
/////////
HTML Template:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.scss">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"> </script>
<!-- endbuild -->
</head>
<body ng-app="uptimeApp">
<!-- Add your site or application content here -->
<div class="header">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar">asdasd</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Uptime Robot</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<!-- <li>Link</li>
<li>Link</li> -->
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<!--- Main Angular VIEW -->
<div ng-view></div>
</div>
<div class="footer">
<div class="container">
<p><span class="glyphicon glyphicon-heart"></span> from the support team</p>
</div>
</div>
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/byo.js"></script>
<script src="scripts/controllers/about.js"></script>
<!-- endbuild -->
</body>
</html>
byo.js (was main.js):
angular.module('uptimeApp')
.controller('byoCTRL', function () {
this.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
});
About.js:
angular.module('uptimeApp')
.controller('AboutCtrl', function () {
this.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
});
app.js:
angular
.module('uptimeApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider, $locationProvider, $httpProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/byo.html',
controller: 'byoCTRL',
controllerAs: 'byo'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
controllerAs: 'about'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
});
//////
my static file structure is as such:
-app
--images
--scripts
|-controllers
|-service
|-app.js (angular routing file)
--views
|-byo.html
|-about.html
--index.html
When i run my server and naviate to localhost:8080/ the index.html page loads as expected. When i check in dev tools, all css files and js files that are included in the html header/footer are included as expected. However, i do not see any additional html files anywhere. The index page is left with an empty body because the ng-view is not being loaded.
Angular routing:
...
.config(function ($routeProvider, $locationProvider, $httpProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/byo.html',
controller: 'byoCTRL',
controllerAs: 'byo'
})
...
I have the feeling i am missing something very basic but can't figure it out. After researching i found a lot of articles relating to templating engines but i would prefer not to use one(do i have to?). Any help is greatly appreciated and if there is any additional information i can provide please let me know.
Thanks!
Looks like byoCtrl is unknown because of your resource loading order. Try switching your loading order so byo controller is available when ngRoutes config() hits.
<script src="scripts/controllers/byo.js"></script>
<script src="scripts/controllers/about.js"></script>
<script src="scripts/app.js"></script>
Let your express application only send your index.html when you hit the root dir of your domain:
app.get('/', function(req, res) {
res.sendFile(__dirname + '/app/index.html');//'/public/index.html');
})
I have no idea what I am doing wrong, the controller is not being called.
index.html:
<!DOCTYPE html>
<html ng-app="myApp" ng-contoller="mainCtrl">
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.css">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<link rel="stylesheet" href="css/custom.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--http://materializecss.com/-->
</head>
<body>
HERE: {{test}}
<nav>
<div class="nav-wrapper topNavBar">
<img class="responsive-img circle profile_logo" src="images/img2.jpg">
<ul id="nav-mobile" class="left">
<li class="topLeftNavBtn" data-activates="slide-out"><a><i class="material-icons">reorder</i></a></li>
<li><img src="images/omitted.png"> | Albums</li>
</ul>
</div>
</nav>
<div ng-view></div>
<!-- ///////////////////////////////// side collapsible nav /////////////////////////////////////////////// -->
<ul id="slide-out" class="side-nav">
<li>
<div class="left_nav_header">
<img src="images/omitted.png"> | Albums</li>
</div>
</li>
<li><a class="waves-effect" href="#!"><i class="material-icons leftSlidingMenuItemIcon homeLink">home</i>Home</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons leftSlidingMenuItemIcon linked_cameraLink">linked_camera</i>Albums</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons leftSlidingMenuItemIcon person_addLink">person_add</i>Shared with me</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons leftSlidingMenuItemIcon roomLink">room</i>Centres</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons leftSlidingMenuItemIcon live_helpLink">live_help</i>Help</a></li>
</ul>
<!--<i class="material-icons">menu</i>-->
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<script type="text/javascript">
$(".topLeftNavBtn").sideNav();
</script>
<!-- Bower components -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/firebase/firebase.js"></script>
<script src="bower_components/angularfire/dist/angularfire.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.js"></script>
<!-- Angular modules -->
<script src="app.js"></script>
<script src="modules/home/home.js"></script>
<script src="modules/login/login.js"></script>
<script src="modules/albums/albums.js"></script>
</body>
</html>
And here's the app.js file:
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'firebase',
'LocalStorageModule',
'myApp.home',
'myApp.login',
'myApp.albums'
])
// Configuring routing
.config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.otherwise({redirectTo: '/home'});
}])
// Configuring localstorage
.config(['localStorageServiceProvider', function(localStorageServiceProvider) {
localStorageServiceProvider
.setPrefix('tribees')
.setStorageType('sessionStorage');
}])
// Main Ctrl
.controller('mainCtrl',['$scope','$location','localStorageServiceProvider',
function($scope,$location,localStorageServiceProvider){
$scope.test = "REACH"; // THIS IS NOT COMING UP
console.info("REAACH"); // THIS IS ALSO NOT COMING UP
if(!localStorageServiceProvider.isSupported) {
console.warn('LocalStorage is not supported');
} else {
console.info('good to go');
}
$scope.showNav = function() {
console.info("REACH");
// Only show header if the user is not at login screen
return !$location.path().endsWith('/login');
}
}]);
You'll notice that I have a console.info in there, and a $scope.test but they are not being set, so the function is not being called. What am i doing wrong?
You have typo actually.
Change
ng-contoller="mainCtrl"
to
ng-controller="mainCtrl"
I have a Angularized bootstrap menu that fully collapses the entire navbar if it is loaded in a view, but not when in the index.html. When loaded into my index.html, it only collapses the dropdown and not the whole navbar when an item is clicked on.
I need it in the index.html before the views (data-ng-view) since I have content between the menu and views (AdSense). When placed before my views in the index.html page, if I click on a link, I am able to go that link... but the overall menu stays open instead of closing after going to a link. However, the dropdown will of "Categories" will collapse as intended, it is just the overall menu that won't.
I am using AngularUI and have injected 'ui.bootstrap' into the App (that is how it works when loaded in a view). The controllers for my views are tied to the page they relate to.
Example:
when('/home', { templateUrl: './views/home.html', controller: 'homeCtrl' }).
Here is my navigation:
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-ng-init="isCollapsed = true" data-ng-click="isCollapsed = !isCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><h1 id="pfch1">My Title</h1></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" data-ng-class="{collapse: isCollapsed}">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown" data-ng-class="{ open : dd1 }" data-ng-init="dd1 = false" data-ng-click="dd1 = !dd1">
<a class="dropdown-toggle" role="button" aria-expanded="false" href="#">Categories <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>cat1</li>
<li>cat2</li>
<li>cat3</li>
<li>cat4</li>
<li>cat5</li>
<li>cat6</li>
</ul>
</li>
<li>Add Article Link</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<div data-ng-controller="userInfo">
<div data-ng-controller="loginCtrl" data-ng-hide="loggedin">
<input class="btn btn-default" type="submit" value="Login" data-ng-click="login()" />
</div>
<div data-ng-controller="loginCtrl" data-ng-show="loggedin">
<input class="btn btn-default" type="submit" value="Signout" data-ng-click="logout()" />
</div>
</div>
</div>
</form>
</div>
</nav>
Here is the index.html (please note that the menu above is included via an ng-include. I have tried it without the ng-include but it still doesn't collapse):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" data-ng-app="pfcModule">
<head>
<!-- Inform Search Bots that this is a SPA -->
<meta name="fragment" content="!" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="description" content="{{pageDescription | limitTo: 155}}">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<base href="/">
<title>{{pageTitle}}</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/custom.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="css/font-awesome.min.css" rel="stylesheet" />
<!-- Just for debuggidata-ng- purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warnidata-ng-.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[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]-->
<!-- Google Analytics -->
<script></script>
</head>
<body>
<!-- Container start -->
<div class="container">
<!-- Top Menu -->
<div data-ng-include="'templates/topmenu.html'"></div>
<!-- Responsive AdSense included here -->
<div data-ng-view></div>
<!-- Responsive AdSense included here -->
<hr>
<footer>
<p>© My Site 2015 | Terms and Conditions</p>
</footer>
</div>
<!-- Container end -->
<!-- Scripts placed at end of Body for execution -->
<script src="js/libs/angular.min.js"></script>
<script src="js/libs/ui-bootstrap-tpls-0.13.0.min.js"></script>
<script src="js/libs/angular-route.min.js"></script>
<script src="js/libs/angular-resource.min.js"></script>
<script src="js/libs/dirPagination.js"></script>
<!-- Auth0 Scripts -->
<!-- We use client cookies to save the user credentials -->
<script src="//code.angularjs.org/1.2.16/angular-cookies.min.js"></script>
<!-- Auth0 Lock script and AngularJS module -->
<script src="//cdn.auth0.com/js/lock-6.js"></script>
<!-- angular-jwt and angular-storage -->
<script type="text/javascript" src="//rawgit.com/auth0/angular-storage/master/dist/angular-storage.js"></script>
<script type="text/javascript" src="//rawgit.com/auth0/angular-jwt/master/dist/angular-jwt.js"></script>
<!-- Auth0 Scripts -->
<script src="//cdn.auth0.com/w2/auth0-angular-4.0.1.js"> </script>
<!-- Application Scripts -->
<script src="js/app.js"></script>
<script src="js/services/services.js"></script>
<script src="js/controllers/addArticle.js"></script>
<script src="js/controllers/articleID.js"></script>
<script src="js/controllers/articlesCategory.js"></script>
<script src="js/controllers/articlesCount.js"></script>
<script src="js/controllers/articleVoting.js"></script>
<script src="js/controllers/homeArticles.js"></script>
<script src="js/controllers/loginManagement.js"></script>
<script src="js/controllers/modalDependency.js"></script>
<script src="js/directives/directives.js"></script>
</body>
</html>
Here is my App.js:
var pfcModule = angular.module('pfcModule', [
'ngRoute',
'ui.bootstrap',
'auth0',
'angular-storage',
'angular-jwt',
'angularUtils.directives.dirPagination',
'pfcServices',
'pfcAddArticle',
'pfcArticleID',
'pfcArticlesCategory',
'pfcArticlesCount',
'pfcArticleVoting',
'pfcHomeArticles',
'pfcLoginManagement',
'pfcModalDependency',
'pfcDirectives']);
pfcModule.config([
'$routeProvider',
'authProvider',
'$httpProvider',
'$locationProvider',
'jwtInterceptorProvider',
'paginationTemplateProvider',
function ($routeProvider, authProvider, $httpProvider, $locationProvider, jwtInterceptorProvider, paginationTemplateProvider) {
$routeProvider.
when('/home', { templateUrl: './views/home.html', controller: 'pfcHomeArticlesCtrl' }).
when('/categories/:articlecategoryID/:articlecategoryName', { templateUrl: './views/categories.html', controller: 'pfcArticlesCategoryCtrl' }).
when('/article/:articleTitle/:articleID', { templateUrl: './views/article.html', controller: 'pfcArticleIDCtrl' }).
when('/add-article', { templateUrl: './views/add-article.html', controller: 'pfcArticlePostCtrl', requiresLogin: true }).
when('/login', { templateUrl: './views/login.html', controller: 'loginPageCtrl' }).
when('/termsandconditions', { templateUrl: './views/terms.html' }).
otherwise({ redirectTo: '/home' });
$httpProvider.defaults.headers.common['X-ZUMO-APPLICATION'] = '1111111111111111111';
$httpProvider.defaults.headers.common['Content-Type'] = 'Application/json';
authProvider.init({
domain: 'aurl.com',
clientID: '1111111111111111',
callbackURL: location.href,
loginUrl: '/login'
});
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
jwtInterceptorProvider.tokenGetter = function (store) {
return store.get('token');
}
$httpProvider.interceptors.push('jwtInterceptor');
// Pagination provider
paginationTemplateProvider.setPath('js/libs/dirPagination.tpl.html');
}])
.run(function ($rootScope, auth, store, jwtHelper, $location) {
$rootScope.$on('$locationChangeStart', function () {
if (!auth.isAuthenticated) {
var token = store.get('token');
if (token) {
if (!jwtHelper.isTokenExpired(token)) {
auth.authenticate(store.get('profile'), token);
} else {
$location.path('/login');
}
}
}
});
});
In order to cause the menu to collapse when you click one of the links you can toggle the value of isCollapsed with ng-click. The reason it was collapsing when inside a view was likely because it was actually reloading the navigation, not collapsing it.
Modify your navigation like this:
<ul class="nav navbar-nav">
<li ng-click="isCollapsed=!isCollapsed">Home</li>
<li" class="dropdown" data-ng-class="{ open : dd1 }" data-ng-init="dd1 = false" data-ng-click="dd1 = !dd1">
<a class="dropdown-toggle" role="button" aria-expanded="false" href="#">Categories <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li ng-click="isCollapsed=!isCollapsed">cat1</li>
<li ng-click="isCollapsed=!isCollapsed">cat2</li>
<li ng-click="isCollapsed=!isCollapsed">cat3</li>
<li ng-click="isCollapsed=!isCollapsed">cat4</li>
<li ng-click="isCollapsed=!isCollapsed">cat5</li>
<li ng-click="isCollapsed=!isCollapsed">cat6</li>
</ul>
</li>
<li ng-click="isCollapsed=!isCollapsed">Add Article Link</li>
</ul>
Plunker
Morning Folks,
I've been using angularjs for the last few months, and now want to start branching out into the ui router frame so I can start building more fluid and functional apps.
Could anyone point me in the right direction of some good tutorials. I've looked on google for some but alas most of them are some what confusing.
If there was a step by step basic guide out there it would be great.
Here is my html:
<DOCTYPE! html>
<html>
<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="">
<link rel="icon" href="../../favicon.ico">
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.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]-->
<!--<link rel="stylesheet" href="\css\custom.css">-->
</head>
<body ng-app="testApp">
<section class="row">
<section class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<section class="container">
<section class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button><!--End on the menu button-->
<a class="navbar-brand" ui-sref="#">Test APP</a>
</section><!--End of Nav Header-->
<section class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">FX News</a></li>
<li><a ui-sref="contact">Test News</a></li>
<li><a ui-sref="about">Contact Us</a></li>
<li><a ui-sref="contact">Meet Test</a></li>
<li><a ui-sref="about">Logout</a></li>
</ul>
</section><!--End of the nav-collapse menu-->
</section><!--End of the container section-->
</section><!--End of the navMenu section-->
</section><!--End of the Nav row-->
<section class="row" style="padding-top:2em;"><!--Main content area for the app-->
<section class="col-xs-12">
<section ui-view></section>
</section>
</section><!--End of the main content are of the app-->
</body>
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script><!--jquery-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script><!--bootstrap js-->
<script src="http://code.angularjs.org/1.2.13/angular.js" type="text/javascript"></script><!--angular js-->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js" type="text/javascript"></script><!--UI Route-->
<script src="js/app.js" type="text/javascript"></script><!--Custom js for the app-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js" type="text/javascript"></script><!--angular animation-->
</html>
This is the app.js:
// app.js
var testApp = angular.module('testApp', ['ui.test']);
testApp.config(function($stateProvider, $urltestProvider) {
$urltestProvider.otherwise('/home');
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
})
// ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
.state('about', {
// we'll get to this in a bit
});
});
And this is my partial-home.html:
<section class="jumbotron text-center">
<h1>The Homey Page</h1>
<p>This page demonstrates <span class="text-danger">nested</span> views.</p>
</section>
Thanks in advance,
Noob Angular guy.
Pluralsight has some good tutorials for angularJs.
I learnt it from here-
PluralSight
I think so the 4th module has Routing video tutorials.
this article from scotch.io is what I had used as starting point for me.
the best way to learn is start trying it out... so the below code should get you started :
// app.js
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
})
// ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
.state('about', {
// we'll get to this in a bit
});
});
How can we avoid including all .js and .css files in the index.html like in this example :
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<base href="/">
<meta charset="utf-8">
<title>ShowTrackr</title>
<link href="favicon.png" rel="icon" type="image/png">
<link href='http://fonts.googleapis.com/css?family=Roboto|Montserrat:400,700|Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link href="//cdn.jsdelivr.net/ionicons/1.4.1/css/ionicons.min.css" rel="stylesheet">
<link href="stylesheets/animate.css" rel="stylesheet">
<link href="stylesheets/style.css" rel="stylesheet">
</head>
<body>
<div ng-controller="NavbarCtrl" class="navbar navbar-default navbar-static-top" role="navigation" bs-navbar>
<div class="navbar-header">
<a class="navbar-brand" href="/">
<span>Show<strong>Trackr</strong></span>
</a>
</div>
<ul class="nav navbar-nav">
<li data-match-route="/$">Home</li>
<li data-match-route="/add">Add</li>
</ul>
<ul class="nav navbar-nav pull-right" ng-if="!currentUser">
<li data-match-route="/login">Login</li>
<li data-match-route="/signup">Sign up</li>
</ul>
<ul class="nav navbar-nav pull-right" ng-if="currentUser">
<li class="navbar-text" ng-bind="currentUser.email"></li>
<li>Logout</li>
</ul>
</div>
<div ng-view class="{{pageClass}}"></div>
<script src="vendor/angular.js"></script>
<script src="vendor/angular-strap.js"></script>
<script src="vendor/angular-strap.tpl.js"></script>
<script src="vendor/angular-messages.js"></script>
<script src="vendor/angular-resource.js"></script>
<script src="vendor/angular-route.js"></script>
<script src="vendor/angular-animate.js"></script>
<script src="vendor/moment.min.js"></script>
<script src="app.js"></script>
<script src="filters/fromNow.js"></script>
<script src="directives/uniqueEmail.js"></script>
<script src="directives/passwordStrength.js"></script>
<script src="controllers/main.js"></script>
<script src="controllers/detail.js"></script>
<script src="controllers/add.js"></script>
<script src="controllers/navbar.js"></script>
<script src="controllers/login.js"></script>
<script src="controllers/signup.js"></script>
<script src="services/auth.js"></script>
<script src="services/show.js"></script>
<script src="services/subscription.js"></script>
<!--<script src="app.min.js"></script>-->
<!--<script src="templates.js"></script>-->
</body>
</html>
This code comes from this github : https://github.com/sahat/tvshow-tracker
The code is used for a tutorial : http://sahatyalkabov.com/create-a-tv-show-tracker-using-angularjs-nodejs-and-mongodb/
I'd like to do something like :
angular.module("MyApp", ["ngRoute"])
.config(["$routeProvider", function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "views/home.html",
controller: "homeCtrl"
/*
Here say to include in the same time specific .js
(for example the one who contain the 'homeCtrl' controller) and .css
*/
});
}]);
Because with the html code above, there are going to be a lot of server requests and possibly useless (If the user don't use the whole application). I cannot imagine Google didn't think of it.
You can inline the CSS and JS code in the view. If the view is cacheable it is not a big issue.
You may want to take a look at http://webcomponents.org
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/