I'm working on an application using HTML, CSS and AngularJS under Ionic and I'm having troubles about routing.
My problem is that the dependancy "ngRoute" in my index.js makes my controller not working.
Here is my html filer (index.html) :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="node_modules/angular-route/angular-route.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/index.js"></script>
</head>
<body ng-app="medathle" ng-controller="ModalCtrl">
<!-- MedAthle logo -->
<div class="logo">
<img src="img/logo_medathle.png">
</div>
<!-- Buttons -->
<div class="index-btn">
<button class="button button-block button-large button-balanced" ng-click="openLogin()">
Se connecter
</button>
<button class="button button-block button-large button-balanced" href="#!menu">
En savoir plus
</button>
</div>
<!-- Login Modal -->
<script id="login.html" type="text/ng-template">
<div class="modal">
<!-- Modal header bar -->
<ion-header-bar class="bar-balanced">
<h1 class="title">Se connecter</h1>
<button class="button button-balanced" ng-click="closeLogin()">Annuler</button>
</ion-header-bar>
<!-- Modal content area -->
<ion-content>
<form>
<div class="login-input">
<div class="email-block">
<label for id="email">
Adresse email
<input class="item-input-wrapper" type="email" id="email">
</label>
</div>
<div class="mdp-block">
<label for id="mdp">
Mot de passe
<input class="item-input-wrapper" type="password" id="mdp">
</label>
</div>
</div>
<div class="login-btn">
<button type="submit" href="#/menu" class="button button-large button-outline button-balanced">Connexion</button>
</div>
</form>
</ion-content>
</div>
</script>
</body>
</html>
And here is my js file (index.js) :
angular.module('medathle', ['ionic', 'ngRoute'])
.config(['$routeProvider',
function($routeProvider) {
// Système de routage
$routeProvider
.when('/menu', {
templateUrl: 'menu.html',
controller: 'ModalCtrl'
});
}
]);
.controller('ModalCtrl', function($scope, $ionicModal) {
// Create and load the Modal
$ionicModal.fromTemplateUrl('login.html', function(modal) {
$scope.loginModal = modal;
}, {
scope: $scope,
animation: 'slide-in-up'
});
// Called when the form is submitted
// Open our new task modal
$scope.openLogin = function() {
$scope.loginModal.show();
};
// Close the new task modal
$scope.closeLogin = function() {
$scope.loginModal.hide();
};
})
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
If I delete 'ngRoute' in my module (index.js file), then it's working. But I don't understand why just a few words can have a such impact on my controller ?
If you can help me I would be very grateful.
ngRoute got deprecated. Now you have to use Angular "ui-route" for routing in Angular 1. The code below may be helpful for you.
**First install angular-ui-router package
--via npm: by running $ npm install angular-ui-router from your console
or
-- via Bower: by running $ bower install angular-ui-router from your console**
**add path of package angular-ui-router path in index file in script tag.**
then use below code in you app module according to your requirement.
**angular.module("angular1App", ["ui.router"])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("category");
$stateProvider
.state("login", {
url: "/main",
templateUrl: "views/login.html",
controller: "LoginCtrl",
})
.state("register", {
url: "/register",
templateUrl: "views/register.html",
controller: "RegisteryCtrl",
});
})**
For more information visit the link below:
https://github.com/angular-ui/ui-router
Related
I am new to ionic and angular. was trying to create a list with json data
{"menu":[{"name":"Mixed Veg Wrap","image":"mix-veg-wrap.jpg","category":"WRAPS, Light Bites","spice_meter":"1","description":"Spicy mixed vegetables :)","rating":"3","price":"35","is_veg":"yes"},{"name":"Egg Wrap","image":"egg-wraps.jpg","category":"WRAPS, Light Bites","spice_meter":"0","description":"Double egg coating with Onion and Sauces!","rating":"4.9","price":"36","is_veg":"no"},{"name":"Cheese Melt Paneer","image":"cmp.jpg","category":"WRAPS, Special","spice_meter":"0","description":"Paneer in Reshmi Masala with melted Cheese","rating":"4.5","price":"91","is_veg":"yes"},{"name":"Prawns Tikka","image":"prawan.jpg","category":"WRAPS, Special","spice_meter":"1","description":"Prawns in spicy tikka masala.","rating":"3.5","price":"110","is_veg":"no"}
Here is my controller the app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])
.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.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
}).controller('ListController', ['$scope', '$http', function($scope, $http) {
$http.get('js/data.json').success(function(data) {
$scope.menu = data;
});
}]);
Here is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-dark">
<h2 class="title">Artist List</h2>
</ion-header-bar>
<div class="bar bar-subheader
item-input-inset bar-light">
<label class="item-input-wrapper">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Search">
</label>
</div>
<ion-content ng-controller="ListController"
class="has-subheader">
<ion-list>
<ion-item ng-repeat='item in menu'
class="item-text-wrap">
<h2>{{item.name}}</h2>
<img ng-src="img/{{item.image}}" />
<h3>{{item.category}}</h3>
<h3>{{item.spice_meter}}</h3>
<h3>{{item.description}}</h3>
<h3>{{item.rating}}</h3>
<h3>{{item.price}}</h3>
<h3>{{item.is_veg}}</h3>
</ion-item>
</ion-list>
</ion-content>
</ion-pane>
</body>
</html>
Nut the resultant o/p is blank list
i checked the console which shows
ionic.bundle.js:17752 XHR finished loading: GET
"http://192.168.1.201:8100/js/data.json".(anonymous function) #
ionic.bundle.js:17752sendReq # ionic.bundle.js:17553serverRequest #
ionic.bundle.js:17269processQueue # ionic.bundle.js:21114(anonymous
function) # ionic.bundle.js:21130Scope.$eval #
ionic.bundle.js:22326Scope.$digest # ionic.bundle.js:22142Scope.$apply
# ionic.bundle.js:22431bootstrapApply # ionic.bundle.js:9373invoke #
ionic.bundle.js:12110doBootstrap # ionic.bundle.js:9371bootstrap #
ionic.bundle.js:9391angularInit # ionic.bundle.js:9285(anonymous
function) # ionic.bundle.js:34050trigger #
ionic.bundle.js:10669eventHandler # ionic.bundle.js:10939
Please help!!
Make sure that the path you are seeing in browser console http://192.168.1.201:8100/js/data.json is correct.
Then while assigning menu use data.menu instead of just data
.controller('ListController', ['$scope', '$http', function($scope, $http) {
$http.get('js/data.json').success(function(data) {
$scope.menu = data.menu; //assigning menu
});
}]);
Im familiar with the standard way of setting up a angularjs project, what I'm trying to do is set the app with separate files for different controllers and directives based on the page. See below for better explanation.
www /
app.js
index.html
login /
loginDirective.js
loginPage.html
This is my apps.js file
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
(function () {
'use strict';
angular.module('app', ['ionic']);
})();
var app=angular.module('app');
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
this is my loginDirective.js
(function () {
'use strict';
var app=angular.module('app');
app.config(function($stateProvider) {
$stateProvider
.state('login', {
url: '/login',
template: '<loginDirective></loginDirective>'
})
})
app.directive('loginDirective', loginDirective);
function loginDirective() {
var directive = {
restrict : 'EA',
templateUrl : 'loginPage.html',
controller : loginController,
controllerAs : 'lg',
bindToController : true
};
return directive;
}
function loginController() {
var lg = this;
lg.test = 'this is a test';
console.log('RETURN = %s', 'test');
}
})();
this is my index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="login/loginDirective.js"></script>
</head>
<body ng-app="app" animation="slide-left-right-ios7">
<div>
<div>
<ion-nav-bar class="bar-dark">
<ion-nav-title>Sample APP</ion-nav-title>
<ion-nav-back-button class="button-icon icon ion-ios-arrow-back">Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view ></ion-nav-view>
</div>s
</div>
</body></html>
last but not least loginPage.html
<html>
<head>
</head>
<body>
<div login-directive></div>
<ion-view view-title="Login" name="login-view" class="scroll-bg" hide-nav-bar="true">
<ion-content class="padding">
<div align="center" class="imagecontent">
<div style="text-align: center">
<img ng-src="img/logos#2x.png" width="250px">
</div>
</div>
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="Username" style="color: #ffffff" ng-model="data.username">
</label>
<label class="item item-input">
<input type="password" placeholder="Password" style="color: #ffffff" ng-model="data.password">
</label>
</div >
<div class="" >
<div class="">
<button class=" button button-block button-dark" ng-click="login(data)">LOG IN</button>
</div>
</div>
</ion-content>
<div style="position: absolute; bottom: 10%; width: 100%">
<div style="text-align: center">
<img ng-src="img/FNC_Logo.png" width="150px">
</div>
</div>
<ion-footer-bar align-title="right" class="footer-bg">
<div class="col text-right" ng-click="doSomething()">
<button class="button footerbtn-bg" ></button>
</div>
</ion-footer-bar>
</ion-view>
</body>
</html>
What am I doing incorrectly that causes my loginPage.html to not show up?
I may be wrong, because I a novice with AngularJS, but if I were you, I firstly would try to change:
templateUrl : 'loginPage.html'
into:
templateUrl : 'login/loginPage.html'
I came to such conclusion, because you included loginPage.js file in index.html, so it tries look loginPage.html in www directory, or in directory where it was called.
I met such case like yours today, but with images.
You state definition has problems:
$stateProvider
.state('login', {
url: '/login',
//This should be kebab-case
template: '<login-directive></login-directive>'
//NOT camelCase
//template: '<loginDirective></loginDirective>'
})
})
But I am not sure why you are using a directive for that state when you could define the state with a controller:
.state('login', {
url: '/login',
templateUrl : 'loginPage.html',
controller : loginController,
controllerAs : 'lg'
});
Try moving <div login-directive></div> into the ion-view.
Also inspect the console to see if console.log('RETURN = %s', 'test'); is actually outputted. At least you'd then know if the state is active or not.
Like #georgeawg said, you're overcomplicating this by using a directive as template. Why you did that in this example is beyond me. Also, your $state config should be in your app.js file.
I'm trying to use a modal triggered from the ion-header-bar to overlay on top of a google map. When I click 'login' it slides in a black screen. I've heard of including bootstrap can cause the problem, however I'm not using bootstrap.
My guess is it has something to do with the google map, however I am at a loss as to what. It could also have something to do with ui-href. I'd be happy to hear suggestions.
I realize that the navigating directly to login or signup will crash the app because the map is not loaded, however I doubt this will be an issue because the app will always load into the googlemap first.
app.js :
angular.module('stuffmobile', ['ionic', 'ngCordova'])
.constant('ApiEndpoint', {
url: 'http://localhost:3000/api'
})
.run(function($ionicPlatform, Map) {
$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.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
Map.init();
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('map', {
url: '/',
templateUrl: 'templates/map.html',
controller: 'MapCtrl',
controllerAs: 'mapctrl'
})
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl',
controllerAs: 'loginCtrl'
})
.state('signup', {
url: '/signup',
templateUrl: 'templates/signup.html',
controller: 'SignUpCtrl',
controllerAs: 'signUpCtrl'
});
$urlRouterProvider.otherwise("/");
});
index.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<!-- compiled css output -->
<link href="css/ionic.app.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src='lib/ngCordova/dist/ng-cordova.js'></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<!-- controllers -->
<script src="js/controllers/map-controller.js"></script>
<script src="js/controllers/login-controller.js"></script>
<script src="js/controllers/signup-controller.js"></script>
<!-- services -->
<script src="js/services/markers-service.js"></script>
<script src="js/services/map-service.js"></script>
<script src="js/services/local-service.js"></script>
<script src="js/services/user-service.js"></script>
</head>
<body ng-app="stuffmobile">
<ion-pane>
<ion-header-bar class="bar-energized">
<h1 class="title">Stuffmapper</h1>
<div class="buttons">
<button class="button button-clear" ui-sref='login'>Login</button>
<button class="button button-clear" ui-sref='signup'>Sign Up</button>
</div>
</ion-header-bar>
<ion-nav-view></ion-nav-view>
</ion-pane>
<!-- Including google maps-->
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
</body>
</html>
login-controller
angular.module('stuffmobile')
.controller('LoginCtrl', function($scope, $ionicModal, $window, $timeout, UserService){
var login = this;
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
//Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
// Execute action on hide modal
$scope.$on('modal.hidden', function() {
// Execute action
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
// Execute action
});
});
login.html
<script id="templates/login.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar>
<h1 class="title">Login</h1>
</ion-header-bar>
<ion-content>
Hello!
</ion-content>
</ion-modal-view>
</script>
Usually the problem is a "conflict" between css.
On my project the problem was the bootstrap's css. To solve i getted a css customized with getbootstrap removing on the css configuration the modal part.
To be precisly the .modal class in bootstrap.css set display: hidden;
On your code i don't see any css inclusion. Only the ionic once. But there is a difference between the ionic js path and the css path.
The first is css/
<link href="css/ionic.app.css" rel="stylesheet">
And the second lib/ionic/js/:
<script src="lib/ionic/js/ionic.bundle.js"></script>
Maybe you need to add lib/ionic/ to the first path:
<link href="lib/ionic/css/ionic.app.css" rel="stylesheet">
I'm following this tutorial to create a simple Ionic to do app.
This is my index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="myApp" ng-controller="todoCtrl">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">To Do</h1>
</ion-header-bar>
<ion-content>
<div class="item item-input-inset">
<label class="item-input-wrapper">
<!-- The actual input tag which is bound to the todoInput using ng-model -->
<input type="text" placeholder="Add New Item" ng-model="todoInput" size="100">
</label>
<!-- Our button thay will call our funtion to add a new todo item -->
<button class="button button-small" ng-click="todoAdd()">
Add Item
</button>
</div>
<div ng-repeat="x in todoList">
<li class="item item-checkbox">
<label class="checkbox">
<!-- this is the checkbox element, you will see it is bound to the done setting in the items array -->
<!-- When clicked it calls the update function to update the item to its done status -->
<input type="checkbox" ng-model="x.done" ng-click="update()">
</label>
<!-- this is a span tag that shows the item text, I am using ng-bind, instead of the span tag we could have used {{x.todoText}} as well -->
<span>{{x.todoText}}</span>
</li>
</div>
<!-- the remove button will call the remove function and remoave all items that are marked done -->
<button class="button button-block button-assertive" ng-click="remove()">
Remove Checked Items
</button>
</ion-content>
</ion-pane>
</body>
</html>
And this my app.js so far:
var app = angular.module('myApp', ['ionic']);
app.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.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
});
app.controller('todoCtrl', ['$scope', function($scope) {
//if local storage is null save the todolist to local storage
if (localStorage.getItem("mytodos") == null){
$scope.todoList = [ {todoText:'Create app', done:false} ];
localStorage.setItem("mytodos", angular.toJson($scope.todoList));
} else {
//get the todolist from local storage
$scope.todoList = angular.fromJson(localStorage.getItem("mytodos"));
}
// Add an item function
$scope.todoAdd = function() {
console.log($scope.todoInput);
};
}]);
When I click on the todoAdd() button, I get undefined inside my console even though I typed something inside the input.
Am I doing any mistakes here?
Solved.
HTML
<input type="text" placeholder="Add New Item" ng-model="form.todoInput" size="100">
<button class="button button-small" ng-click="todoAdd(form)">Add Item</button>
JS
$scope.todoAdd = function(formData){
console.log(formData);
};
I bought a template from wrapbootrap, however the code provided there used the UI Route plugin. The ui route is excellent because you can have states, views, nested views. However it doesnt work with the ADAL Authentication library for Azure authentication.
The following code was the one provided by the theme:
Config.js
function config($stateProvider, $urlRouterProvider, $ocLazyLoadProvider, IdleProvider, KeepaliveProvider, adalAuthenticationServiceProvider, $httpProvider) {
// Configure Idle settings
IdleProvider.idle(5); // in seconds
IdleProvider.timeout(120); // in seconds
$urlRouterProvider.otherwise("/dashboards/dashboard_1");
$ocLazyLoadProvider.config({
// Set to true if you want to see what and when is dynamically loaded
debug: false
});
$stateProvider
.state('dashboards', {
abstract: true,
url: "/dashboards",
templateUrl: "views/common/content.html",
})
.state('dashboards.dashboard_1', {
url: "/dashboard_1",
templateUrl: "views/dashboard_1.html",
requireADLogin: true,
resolve: {
loadPlugin: function ($ocLazyLoad) {
return $ocLazyLoad.load([
{
serie: true,
name: 'angular-flot',
files: ['js/plugins/flot/jquery.flot.js', 'js/plugins/flot/jquery.flot.time.js', 'js/plugins/flot/jquery.flot.tooltip.min.js', 'js/plugins/flot/jquery.flot.spline.js', 'js/plugins/flot/jquery.flot.resize.js', 'js/plugins/flot/jquery.flot.pie.js', 'js/plugins/flot/curvedLines.js', 'js/plugins/flot/angular-flot.js', ]
},
{
name: 'angles',
files: ['js/plugins/chartJs/angles.js', 'js/plugins/chartJs/Chart.min.js']
},
{
name: 'angular-peity',
files: ['js/plugins/peity/jquery.peity.min.js', 'js/plugins/peity/angular-peity.js']
}
]);
}
}
})
index.html
<!DOCTYPE html>
<html ng-app="inspinia">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Page title set in pageTitle directive -->
<title page-title></title>
<!-- Font awesome -->
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Main Inspinia CSS files -->
<link href="css/animate.css" rel="stylesheet">
<link id="loadBefore" href="css/style.css" rel="stylesheet">
</head>
<!-- ControllerAs syntax -->
<!-- Main controller with serveral data used in Inspinia theme on diferent view -->
<body ng-controller="MainCtrl as main">
<!-- Main view -->
<div ui-view></div>
<!-- jQuery and Bootstrap -->
<script src="js/jquery/jquery-2.1.1.min.js"></script>
<script src="js/plugins/jquery-ui/jquery-ui.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<!-- MetsiMenu -->
<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
<!-- SlimScroll -->
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<!-- Peace JS -->
<script src="js/plugins/pace/pace.min.js"></script>
<!-- Custom and plugin javascript -->
<script src="js/inspinia.js"></script>
<!-- Main Angular scripts-->
<script src="js/angular/angular.min.js"></script>
<script src="js/plugins/oclazyload/dist/ocLazyLoad.min.js"></script>
<script src="js/angular-translate/angular-translate.min.js"></script>
<script src="js/ui-router/angular-ui-router.min.js"></script>
<script src="https://code.angularjs.org/1.2.25/angular-route.js"></script>
<script src="js/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<script src="js/plugins/angular-idle/angular-idle.js"></script>
<!--
You need to include this script on any page that has a Google Map.
When using Google Maps on your own site you MUST signup for your own API key at:
https://developers.google.com/maps/documentation/javascript/tutorial#api_key
After your sign up replace the key in the URL below..
-->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDQTpXj82d8UpCi97wzo_nKXL7nYrd4G70"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="js/adal/adal.min.js"></script>
<script src="js/adal/adal-angular.js"></script>
<!-- Anglar App Script -->
<script src="js/app.js"></script>
<script src="js/config.js"></script>
<script src="js/translations.js"></script>
<script src="js/directives.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>
and content.html
<!-- Wrapper-->
<div id="wrapper">
<!-- Navigation -->
<div ng-include="'views/common/navigation.html'"></div>
<!-- Page wraper -->
<!-- ng-class with current state name give you the ability to extended customization your view -->
<div id="page-wrapper" class="gray-bg {{$state.current.name}}">
<!-- Page wrapper -->
<div ng-include="'views/common/topnavbar.html'"></div>
<!-- Main view -->
<div ui-view></div>
<!-- Footer -->
<div ng-include="'views/common/footer.html'"></div>
</div>
<!-- End page wrapper-->
<!-- Right Sidebar -->
<div ng-include="'views/common/right_sidebar.html'"></div>
</div>
<!-- End wrapper-->
However as the UI route doesnt work well with ADAL, I changed config.JS and now my authentication with azure works perfect.
function config($routeProvider, $httpProvider, adalAuthenticationServiceProvider){
$routeProvider.when("/dashboard_1", {
controller: "MainCtrl",
templateUrl: "/views/dashboard_1.html",
requireADLogin: true,
resolve: {
loadPlugin: function ($ocLazyLoad) {
return $ocLazyLoad.load([
{
serie: true,
name: 'angular-flot',
files: [ 'js/plugins/flot/jquery.flot.js', 'js/plugins/flot/jquery.flot.time.js', 'js/plugins/flot/jquery.flot.tooltip.min.js', 'js/plugins/flot/jquery.flot.spline.js', 'js/plugins/flot/jquery.flot.resize.js', 'js/plugins/flot/jquery.flot.pie.js', 'js/plugins/flot/curvedLines.js', 'js/plugins/flot/angular-flot.js', ]
},
{
name: 'angles',
files: ['js/plugins/chartJs/angles.js', 'js/plugins/chartJs/Chart.min.js']
},
{
name: 'angular-peity',
files: ['js/plugins/peity/jquery.peity.min.js', 'js/plugins/peity/angular-peity.js']
}
]);
}
}
}).otherwise({ redirectTo: "/dashboard_1" });
adalAuthenticationServiceProvider.init(
{
instance: 'https://login.microsoftonline.com/',
tenant: 'mysaasapp.onmicrosoft.com',
clientId: '33e037a7-b1aa-42ab-9693-6c22d01ca338',
extraQueryParameter: 'nux=1'
//cacheLocation: 'localStorage', // enable this for IE, as sessionStorage does not work for localhost.
},
$httpProvider
);
}
angular
.module('inspinia')
.config(config)
.run(function($rootScope, $state) {
$rootScope.$state = $state;
});
The problem is that I dont know how to use nested views or layouts pages with the core NG Route, how should I rewrite my index.html/content.html to accomodate this change.
This results in that I get my content rendered but not my left navigation bar or top bar.
In your index.html change uiview by ng-view. Since ng-route does not allow nested views you should include the route to your content.html in the route provider as another state.