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');
})
Related
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"
it's my first App that I'm writing with Ionic Framework and I came across a problem with UI router. It's quite simple survey app, I just want someone - after selecting face from survey to answer some additional questions. I need questions to be a child of survey because of resolve data. Problem is that when I want to go to questions state from it's parent survey only URL changes and nothing happens. No error, just nothing. It seems really easy, just replace what view with another but somehow I can get it working. Can you please help me, I'm struggling whole day now.
My routes:
'use strict';
angular.module('main', [
'ionic',
'ngCordova',
'ui.router',
// TODO: load other modules selected during generation
])
.config(function ($stateProvider, $urlRouterProvider) {
// ROUTING with ui.router
$urlRouterProvider.otherwise('/survey');
$stateProvider
// this state is placed in the <ion-nav-view> in the index.html
.state('main', {
url: '/main',
template: '<ion-view view-title="main"></ion-nav-view>',
// templateUrl: 'main/templates/<someTemplate>.html',
// controller: 'SomeCtrl as ctrl'
})
.state('survey', {
url: '/survey',
templateUrl: 'main/templates/survey.html',
controller: 'SurveyCtrl',
resolve: {
questions: function($stateParams, $http) {
return $http.get('http://localhost:3100/api/surveys/new').then(function(response){
return response.data;
});
}
}
})
.state('survey.question', {
url: '/questions',
views: {
'questions': {
templateUrl: 'main/templates/questions.html',
controller: 'QuestionsCtrl',
}
},
params: {
selectedFace: null
}
})
});
Index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<!-- ionic meta tags -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<!-- custom meta tags -->
<meta name="format-detection" content="telephone=no"> <!-- no auto telephone linking -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:700" rel="stylesheet">
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- can be saved to home screen on ios -->
<title>Store Satisfaction</title>
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css main/styles/app.css -->
<!-- inject:css -->
<link rel="stylesheet" href="main/styles/main.css">
<!-- endinject -->
<!-- endbuild -->
</head>
<body ng-app="storeSatisfaction">
<!-- the current view will be rendered in the <ion-nav-view> directive -->
<ion-nav-view></ion-nav-view>
<!-- will be a 404 during development -->
<script src="cordova.js"></script>
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/ionic/release/js/ionic.js"></script>
<script src="bower_components/ionic/release/js/ionic-angular.js"></script>
<script src="bower_components/ngCordova/dist/ng-cordova.js"></script>
<script src="bower_components/angular-dynamic-locale/src/tmhDynamicLocale.js"></script>
<script src="bower_components/angular-translate/angular-translate.js"></script>
<script src="bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
<script src="bower_components/localforage/dist/localforage.js"></script>
<script src="bower_components/underscore/underscore.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js scripts/app.js -->
<!-- inject:js -->
<script src="main/main.js"></script>
<script src="main/controllers/survey-ctrl.js"></script>
<script src="main/controllers/questions-ctrl.js"></script>
<script src="main/constants/config-const.js"></script>
<script src="app.js"></script>
<!-- endinject -->
<!-- endbuild -->
</body>
</html>
survey.html
<ion-view title="survey">
<!-- do you want padding? -->
<ion-content>
<!-- content goes here -->
<a ui-sref="main">test</a>
<div class="main-image polygon">
<div class="main-text">
<p class="sub-header">smth</p>
<p class="main-header">smth</p>
</div>
</div>
<ion-list>
<ion-item class="item item-icon">
<a><img src="main/assets/images/smile1.png" class="smiley-face" ng-click="proceedSurvey('very_good', 'positive')"></a>
</ion-item>
<ion-item class="item item-icon">
<img src="main/assets/images/smile2.png" class="smiley-face" ng-click="proceedSurvey('good', 'positive')">
</ion-item>
<ion-item class="item item-icon">
<img src="main/assets/images/smile3.png" class="smiley-face" ng-click="proceedSurvey('neutral', 'negative')">
</ion-item>
<ion-item class="item item-icon">
<img src="main/assets/images/smile4.png" class="smiley-face" ng-click="proceedSurvey('bad', 'negative')">
</ion-item>
<ion-item class="item item-icon">
<img src="main/assets/images/smile5.png" class="smiley-face" ng-click="proceedSurvey('very_bad', 'negative')">
</ion-item>
</ion-list>
<div class="footer-text">
Pomóż nam przekraczać nasze granice
</div>
<ui-view name="questions"></ui-view>
</ion-content>
</ion-view>
SurveyCtrl.js
'use strict';
angular.module('main')
.controller('SurveyCtrl', function ($scope, $state) {
$scope.proceedSurvey = function(rate, type) {
var params = {rate: rate, type: type};
$state.go('survey.question', {selectedFace: params})
}
});
I'm trying to run a simple CRM app, based on the MEAN stack web-book. Upon loading the page I get the following error in the console:
Error: [$injector:modulerr] http://errors.angularjs.org/1.4.7/$injector/modulerr?p0=userApp&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.7%2F%24injector%2Fmodulerr%3Fp0%3DuserCtrl%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.4.7%252F%2524injector%252Fnomod%253Fp0%253DuserCtrl%250AI%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A6%253A416%250Ade%252F%253C%252F%253C%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A24%253A186%250Aa%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A23%253A252%250Ade%252F%253C%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A23%253A1%250Ah%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A37%253A427%250Am%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A7%253A320%250Ah%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A37%253A275%250Ah%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A37%253A444%250Am%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A7%253A320%250Ah%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A37%253A275%250Afb%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A41%253A35%250Azc%252Fd%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A19%253A463%250Azc%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A20%253A274%250AZd%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A19%253A83%250A%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A293%253A238%250Aa%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A174%253A399%250AHf%252Fc%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A35%253A212%250A%0AI%2F%3C%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A6%3A416%0Ah%2F%3C%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A38%3A184%0Am%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A7%3A320%0Ah%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A37%3A275%0Ah%2F%3C%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A37%3A444%0Am%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A7%3A320%0Ah%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A37%3A275%0Afb%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A41%3A35%0Azc%2Fd%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A19%3A463%0Azc%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A20%3A274%0AZd%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A19%3A83%0A%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A293%3A238%0Aa%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A174%3A399%0AHf%2Fc%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A35%3A212%0A
angular.min.js (line 6, col 416)
This is my app.js file (the main app module)
angular.module('userApp', [
'ngAnimate',
'app.routes',
'authService',
'mainCtrl',
'userCtrl',
'ngRoute',
'userService'
]);
and my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>User CRM</title>
<base href="/">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/custom/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">
<link rel="stylesheet" href="assets/cs/style.css">
<script type="text/javascript" src="assets/libs/angular/angular.min.js"></script>
<script type="text/javascript" src="assets/libs/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="assets/libs/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" src="app/controllers/mainCtrl.js"></script>
<script type="text/javascript" src="app/controllers/userCtrl.js"></script>
<script type="text/javascript" src="app/services/authService.js"></script>
<script type="text/javascript" src="app/services/userService.js"></script>
<script type="text/javascript" src="app/app.routes.js"></script>
<script type="text/javascript" src="app/app.js"></script>
</head>
<body ng-app="userApp" ng-controller="mainController as main">
<header>
<div class="navbar navbar-inverse" ng-if="main.loggedIn">
<div class="container">
<div class="navbar-header">
<span class="glyphicon glyphicon-fire text-danger"></span> User CRM
</div>
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-user"></span> Users</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li ng-if="!main-loggedIn">Login</li>
<li ng-if="main.loggedIn" class="navbar-text">Hello {{ main.user.name }}!</li>
<li ng-if="main.loggedIn">Logout</li>
</ul>
</div>
</div>
</header>
<main class="container">
<div ng-view></div>
</main>
</body>
</html>
I have loaded the local dependencies using bower (angular, angular-route, angular-animate), and the rest of the are local .js files, so I can't really figure out what the problem is.
The whole project can be found at this Git Repo. The angular part of the code is located in the /public folder.
Any feedback/ideas appreciated.
You are trying to inject userCtrl in your app, I could not find it in the git repo you
angular.module('userApp', [
'ngAnimate',
'app.routes',
'authService',
'mainCtrl',
'userCtrl',
'ngRoute',
'userService'
]);
Angular DI, is looking for a service / controller / factory any component that is names userCtrl, which it can not find.
Angular DI does not look for files, rather components with the string names of your components.
Your controller and your services have to be part of your userApp module, not separates MainCtrlor userService modules.
Change
// This declares a new module named 'mainCtrl'
angular.module('mainCtrl', [])
angular.module('userService', [])
angular.module('autService', [])
to
angular.module('userApp')
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
Im scaffolding an app for a prototype. I have everything together, but when I do grunt serve I get my index page but the view doesn't initialize. Ive compared it to other apps i have running, but i can't find anything wrong. Any of you see anything wrong.
I should mention, I used Yeoman to generate the basic scaffold, but I have been systematically stripping various things (Primarily Bower) from it as we are not allowed to use it on our network. So I have been rebuilding a basic seed app that likes our network and plays well with our CI server.
app.js
'use strict';
angular.module('angularApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ui.router'
])
.run(['$rootScope', '$state', '$stateParams',
function($rootScope, $state, $stateParams) {
// It's very handy to add references to $state and $stateParams to the $rootScope
// so that you can access them from any scope within your applications.For example,
// <li ng-class="{ active: $state.includes('contacts.list') }"> will set the <li>
// to active whenever 'contacts.list' or one of its decendents is active.
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$state.transitionTo('home');
}
])
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider.state('home', {
//name: 'home',
url: '/',
templateUrl: 'views/main.html',
controller: 'MainCtrl'
});
}
]);
main.js
'use strict';
angular.module('angularApp', [])
.controller('MainCtrl', function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
});
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 charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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 -->
<link rel="stylesheet" href="libs/sass-bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="libs/ng-grid-2.0.7/ng-grid.css" />
<!-- endbuild -->
<!-- build:css({.tmp,app}) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body ng-app="angularApp">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div ui-view></div>
test
<a ui-sref="home">home</a>
<!--[if lt IE 9]>
<script src="libs/es5-shim/es5-shim.js"></script>
<script src="libs/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- build:js scripts/vendor.js -->
<script src="libs/jquery-1.10.2/jquery.js"></script>
<script src="libs/angular-1.2.10/angular.js"></script>
<script src="libs/sass-bootstrap/dist/js/bootstrap.js"></script>
<script src="libs/angular-resource/angular-resource.js"></script>
<script src="libs/angular-cookies/angular-cookies.js"></script>
<script src="libs/angular-sanitize/angular-sanitize.js"></script>
<script src="libs/ui-router-0.2.8/release/angular-ui-router.js"></script>
<script src="libs/ngStorage/ngStorage.js"></script>
<script src="libs/ng-grid-2.0.7/ng-grid-2.0.7.min.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->
</body>
</html>
main.html
<div class="header">
<ul class="nav nav-pills pull-right">
<li class="active"><a ng-href="#">Home</a></li>
<li><a ng-href="#">About</a></li>
<li><a ng-href="#">Contact</a></li>
</ul>
<h3 class="text-muted">angular</h3>
</div>
<div class="jumbotron">
<h1>'Allo, 'Allo!</h1>
<p class="lead">
<img src="images/yeoman.png" alt="I'm Yeoman"><br>
Always a pleasure scaffolding your apps.
</p>
<p><a class="btn btn-lg btn-success" ng-href="#">Splendid!</a></p>
</div>
<div class="row marketing">
<h4>HTML5 Boilerplate</h4>
<p>
HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.
</p>
<h4>Angular</h4>
<p>
AngularJS is a toolset for building the framework most suited to your application development.
</p>
<h4>Karma</h4>
<p>Spectacular Test Runner for JavaScript.</p>
</div>
<div class="footer">
<p>♥ from the Yeoman team</p>
</div>
Two things that I see would break your angular bootstrap process:
First, include your app.js last:
<script src="scripts/controllers/main.js"></script>
<script src="scripts/app.js"></script>
Then, .config should come before .run:
'use strict';
angular.module('angularApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ui.router'
])
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {}
])
.run(['$rootScope', '$state', '$stateParams',
function($rootScope, $state, $stateParams) {}
]);