How can i call a function from another file in AngularJs? I'm going to use the same header in all my pages, so i need to call the functions that lives in it.
This is my code so far. First, my index:
<!DOCTYPE html>
<html ng-app="adminApp">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin test</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="app/css/admin.css" rel="stylesheet" />
<link type="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.standalone.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
<head>
<base href="/">
</head>
<body>
<div ng-include="'app/components/include/header.html'"></div>
<ng-view></ng-view>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
<script src="app/app.js"></script>
<script src="app/components/home/admin-home.js"></script>
<script src="app/components/include/header.js"></script>
<script src="app/factory/admin-factory.js"></script>
<script src="app/routes/admin-route.js"></script>
</body>
</html>
Then the app.js:
(function(){
'use strict';
angular
.module('adminApp', ['ngResource', 'ngRoute']);
})();
The HTML for the header:
<section class="admin-header">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<h1>Admin test</h1>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" id="login" align="center">
<button type="button" class="btn btn-user" ng-click="open()">
<span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
</button>
</div>
</div>
</section>
<div class="menu-out">
<button type="button" class="btn btn-logout">Logout</button>
</div>
Everything until here is ok. Now my doubt is how to call a funtion to toggle the .menu-out div if the header will be separated as all the pages that will live in it?
I've tried with the file header.js like this:
(function(){
var head = {
templateUrl: '/app/components/include/header.html',
controller: headCtrl
};
angular
.module('adminApp')
.component([], head);
headCtrl.$inject = ["$scope"];
function headCtrl($scope){
$scope.open = function(){
$('.menu-out').toggle();
}
}
})();
But is not working. As you can see i've added the brackets in component, 'cause i don't know if i need to call the header from the routes.js file.
This is the route.js file:
(function(){
'use strict';
angular
.module('adminApp')
.config(config);
config.$inject = ["$routeProvider", "$locationProvider"];
function config($routeProvider, $locationProvider){
$locationProvider.hashPrefix('');
$routeProvider
.when('/', {
template: '<admin-home></admin-home>'
})
.otherwise({
redirectTo: '/'
});
}
})();
I need to use $rootScope? Someone can guide me please. As i've said, i'm using AngularJs, HTML and Javscript.
Thanks in advance.
The first argument of the module.component method should be a string to name the component:
angular
.module('adminApp')
̶.̶c̶o̶m̶p̶o̶n̶e̶n̶t̶(̶[̶]̶,̶ ̶h̶e̶a̶d̶)̶;̶
.component("adminHome", head);
For more information, see
AngularJS angular.module Type API Reference - component
Hey guys ive been trying to use routing, still new to angular though :( I have the first page already made, but am trying to make it when you click enter the next page appears on top of the current page (so basically a new page). The reason I want it to be all 1 page is so I can transfer the data from the first page onto the second page, however I can't seem to get it to load the next page... Here's my html and js so far,, not sure where im going wrong -_-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/kandi.css">
</head>
<body data-ng-app="nameBox" class="ng-scope">
<ng-view></ng-view>
<section class="frontPageBox">
<div data-ng-controller="appearCntrl">
<form action="" method="">
<input type="text" data-ng-bind="name" data-ng-model="name" placeholder="Your Name..." id="name-input">
<a type="button" class="button" href="#/kandi2" style="text-decoration:none;color:#ccc;">Enter</a>
</form>
<p style="color:#999; font-size: 1.1em;">{{"Welcome " + name}}</p>
</div>
</section>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
var app = angular.module("nameBox", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/kandi2", {
templateUrl : "kandi2.html"
});
});
app.controller("appearCntrl", function($scope){
$scope.name = "";
$scope.data = [];
$scope.data.push(name);
});
</script>
</body>
</html>
The problem is because of the ng-view tag
<ng-view></ng-view>
Gives an <!-- ngView: undefined --> element in the DOM, there is no place to attach the view.
You could write something like:
<div ng-view></div>
Then it should work.
I'm a beginner in Angular and I have a problem with the functions. I have a simple code. In that there are two alerts to probe they are not getting called.
HTML
<div data-ng-controller="MainCtrl">
<form novalidate class="simple-form">
Last name:
<input type="text" name="lname" data-ng-model="product.name"><br>
<input type="submit" value="Submit" class="btn btn-sm btn-primary" data-ng-click="mandar()" >
</form>
<button ng-click="mandar()">Remove</button>
</div>
My JavaScript:
var app =angular.module('pdbApp');
app.controller('MainCtrl', function ($scope, $window) {
$window.alert('I am here!');
$scope.mandar=function(){
$window.alert('Hi there!');
};
});
I also have the app.js
angular
.module('pdbApp', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.otherwise({
redirectTo: '/'
});
});
And also my index.html
<html class="no-js">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- endbuild -->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
</head>
<body ng-app="pdbApp">
<div class="container">
<div data-ng-view=""></div>
</div>
<!-- Libraries -->
<script src="js/angular.min.js"></script>
<script src="js/ui-bootstrap-tpls-0.11.2.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<!-- 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/main.js"></script>
<script src="scripts/controllers/about.js"></script>
<!-- endbuild -->
<!-- Some Bootstrap Helper Libraries -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/underscore.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
When I press the mandar button doesn't happen anything.
Can anybody tell me why it is no working?
Seems like you add ng-app="pdbApp" on your page to tell angular to run on the page. Also make sure you have added the angular.js file on the page.
Markup
<div ng-app="pdbApp" data-ng-controller="MainCtrl">
<form novalidate class="simple-form">
Last name: <input type="text" name="lname" data-ng-model="product.name"><br>
<input type="submit" value="Submit" class="btn btn-sm btn-primary" data-ng-click="mandar()" >
</form>
</div>
without any stack trace all we can do is speculate. But as others have said you need to include ng-app within your template so angular knows the scope of the HTML for that app. Also you need ng-controller so angular knows the scope of your controller in the HTML.
However these are all basic things covered in all tutorials, the thing your doing that isn't covered in most is your app definition. This will cause your app to fail if it isn't intentional.
Your doing
var app =angular.module('pdbApp');
This tells angular 'find me an existing application called pdbApp'. However is this is your first decliration of that app your need to tell angular to create it.
You do that by adding an array:
var app =angular.module('pdbApp', []);
The array contains a list of application dependencies if you have any.
Can someone help me on how to fix this?
Seems like I can't get my button to link to another page.
I did some research and try to follow the demo, but it's dead end.
I don't know which part I should fix.
register.html
<!DOCTYPE html>
<html ng-app="starter">
<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-view view-title="Register">
<ion-content>
<div class="bar bar-header bar-stable">
<h1 class="title">Register</h1>
</div>
<div ng-controller="RegistrationCtrl" class="content">
<button class="button button-positive" ng-click="goToNextState()">Go to next state (page)</button>
</div>
</ion-content>
</ion-view>
</ion-pane>
</body>
</html>
after.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-view view-title="After">
<ion-content>
<div class="bar bar-header bar-stable">
<h1 class="title">Register</h1>
</div>
<div ng-controller="AfterCtrl" class="content">
<button class="button button-positive" ng-click="goToPrevState()">Go to prev state (page)</button>
</div>
</ion-content>
</ion-view>
</ion-pane>
</body>
</html>
app.js
var app = angular.module('starter', ['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.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('register', {
url: '/',
templateUrl: 'register.html',
controller: 'RegistrationCtrl'
})
.state('after', {
url: 'after',
templateUrl: 'after.html',
controller: 'AfterCtrl'
});
$urlRouterProvider.otherwise('/');
});
app.controller("RegistrationCtrl", function($scope, $location){
$scope.goToNextState = function() {
$location.path("/after");
};
});
app.controller("RegistrationCtrl", function($scope, $location){
$scope.goToNextState = function() {
$location.path("/after");
};
});
I could not find AfterCtrl controller in your app.js
app.controller("RegistrationCtrl", function($scope, $location){
$scope.goToNextState = function() {
$location.path("/after");
};
});
app.controller("RegistrationCtrl", function($scope, $location){
$scope.goToNextState = function() {
$location.path("/after");
};
});
Also i would suggest to use $state.go("register") and $state.go("after") and also do not forget to inject $state
function($scope, $state)
I ran into a similar issue recently. I found that using
<button class="button button-positive" ui-sref="STATENAME" >Go to prev state (page)</button>
fixed my issue.
I have a main template (index.html) with an Angular ui-view. Inside this main template I import a bunch of Javascript files. I expect these files to be available to the content inside the html templates that will be loaded inside the ui-view, but the JS functions are seemingly inaccessible.
/sample-app/index.html:
<html ng-app="otr">
<head></head>
<body>
<div ui-view></div>
<!-- JS imports -->
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Angular Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.0-rc.1/angular-route.min.js"></script>
<script src="https://code.angularjs.org/1.4.0-rc.1/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.min.js"></script>
<!-- Custom scripts -->
<script src="/sample-app/js/login.js"></script>
<!-- Angular app scripts -->
<script src="app/app.js"></script>
<script src="app/services/authentication.service.js"></script>
<script src="app/services/flash.service.js"></script>
<script src="app/common/cases-model.js"></script>
<script src="app/home/home.controller.js"></script>
<script src="app/login/login.controller.js"></script>
<script src="app/register/register.controller.js"></script>
</body>
</html>
/sample-app/js/login.js
$(function() {
$('#login-form-link').click(function(e) {
$("#login-form").delay(100).fadeIn(100);
$("#register-form").fadeOut(100);
$('#register-form-link').removeClass('active');
$(this).addClass('active');
e.preventDefault();
});
$('#register-form-link').click(function(e) {
console.log('Inside login.js REGISTER');
$("#register-form").delay(100).fadeIn(100);
$("#login-form").fadeOut(100);
$('#login-form-link').removeClass('active');
$(this).addClass('active');
e.preventDefault();
});
});
/sample-app/app/app.js:
(function () {
'use strict';
angular.module('otr', [
'ngRoute',
'ngCookies',
'ui.router',
])
.config(config)
.run(run);
function config($stateProvider, $urlRouterProvider, $httpProvider) {
$stateProvider
.state('otr', {
url: '',
abstract: true
})
.state('login', {
url: '/login',
controller: 'LoginController as vm',
templateUrl: 'app/login/login.view.html'
})
.state('register', {
url: '/register',
controller: 'RegisterController as vm',
templateUrl: 'app/register/register.view.html'
})
.state('home', {
url: '/',
controller: 'HomeController as vm',
templateUrl: 'pages/home2.view.html'
})
;
$urlRouterProvider.otherwise('/login');
$httpProvider.defaults.withCredentials = true;
}
function run($rootScope, $location, $cookies, $http) {
// keep user logged in after page refresh
$rootScope.globals = $cookies.get('globals') || {};
$rootScope.$on('$locationChangeStart', function (event, next, current) {
// redirect to login page if not logged in and trying to access a restricted page
var restrictedPage = $.inArray($location.path(), ['/login', '/register']) === -1;
var loggedIn = $rootScope.globals.currentUser;
if (restrictedPage && !loggedIn) {
$location.path('/login');
}
});
}
})();
The ui-view content loads just fine, but without the JS functions being called.
If I copy/paste the content directly into index.html, everything works as expected
If I place the JS import inside the partial template, that works as well.
What am I missing?
If you want to access stuff outside the , try to create a controller, something like this,
<body>
<div ng-controller="MainCtrl">
<div ui-view></div>
<script src="app/app.js"></script>
</div>
</body>
Without seeing your project structure it's hard to know for sure, but I suspect that you need to refer to your javascript files using absolute paths rather than relative paths.
EG:
<script src="/app/app.js"></script>
I say this because most AngularJS projects store their views in a sub-folder, and when the template gets loaded the relative paths become invalid because they are relative to the root of the project/index.html file and not the active view.
You should declare the app name using ng-app, then associate a controller with an element in the HTML. I would suggest this tutorial because you are missing few of the basics.
You need to do something like this:
<!DOCTYPE html>
<html ng-app="myapp" lang="en">
<head>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div ng-controller="MyCtrl"></div>
</body>
</html>
app.js:
(function () {
var app = angular.module('myapp', []);
app.controller("MyCtrl", function($scope){
$scope.foo = function(){};
this.foo2 = function(){};
})
})();
Presumably, you have a statement somewhere in app.js that looks like this:
angular.module('MyApp', []);
You will need to manually bootstrap your application. If you have any ng-app= markup in your html, remove it -- make sure app.js is the very last script, and add the following to the end of app.js:
angular.element(document).ready(function() {
angular.bootstrap(document, ['MyApp']);
});
If you didn't have ng-app in your markup, then you wouldn't have seen anything anyway, as ng-app is the key that tells angular where it should integrate with your page. And ng-app should not be applied until all of the scripts are loaded.
But even if you had it, it still would have given you an error that the directive is not defined. The reason is that angular.js will begin executing as soon as it is loaded. But the code you've written which attaches the directive to your module has not gotten a chance to execute. Very specifically, it means that there is not yet a directive called 'ui-view' defined in your application.
The reason angular code seems to just work when you put it into index.html is that angular is kind enough to wait for the DOM to be ready before actually trying to hook up components, and that means that any inline scripts have already gotten a chance to execute.
Keep this bootstrapping trick in your bag, as you'll be using it often.
I gave up on trying to get the JavaScript to load and the ui-view to recognize it. I ultimately solved this by creating an Angular directive that duplicated the function of the JavaScript.
Directive:
angular.module('otr')
.directive('loginForm', loginFormDirective)
.directive('registerForm', registerFormDirective)
;
function loginFormDirective() {
return function(scope, element, attrs) {
element.bind('click', function() {
console.log('element: ', element[0].id);
console.log('attributes: ', attrs);
$('#' + attrs.loginForm).delay(100).fadeIn(100);
$("#register-form").fadeOut(100);
$('#register-form-link').removeClass('active');
$('#' + element[0].id).addClass('active');
})
}
}
function registerFormDirective() {
return function(scope, element, attrs) {
element.bind('click', function() {
$('#' + attrs.registerForm).delay(100).fadeIn(100);
$("#login-form").fadeOut(100);
$('#login-form-link').removeClass('active');
$('#' + element[0].id).addClass('active');
})
}
}
My view now has the following code snippet:
<div class="row">
<div class="col-xs-6">
Login
</div>
<div class="col-xs-6">
Register
</div>
</div>
Thanks to all of you who took the time to read my question and post answers!
This is a super late response, but I ran into this same exact issue myself. I have solved this by including the external js libraries before including Angular and Angular UI Router.
Just like the OP, my project consisted of an index.html as well as a ui-view. The partials load into the ui-view properly, but the external js libraries do not take effect inside the partial via ui-view. If the contents from the partial are placed into the index.html, everything works perfectly.
Scripts changed from
<!-- AngularJS -->
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="dist/components.js" type="text/javascript"></script>
<!-- Custom JS Libries -->
<script src="dist/js/custom.js" type="text/javascript"></script>
Scripts changed to
<!-- Custom JS Libries -->
<script src="dist/js/custom.js" type="text/javascript"></script>
<!-- AngularJS -->
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="dist/components.js" type="text/javascript"></script>
Final Outcome and working
<!DOCTYPE html>
<html dir="ltr" data-config='{"style": "calico"}'>
<head>
<link rel="stylesheet" href="dist/all.css">
</head>
<body ng-app="MyApp">
<div ui-view></div>
<!-- Custom JS Libries -->
<script src="dist/js/custom.js" type="text/javascript"></script>
<!-- AngularJS -->
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="dist/components.js" type="text/javascript"></script>
</body>
</html>
This is how i get it solved.
In your app.js, create is on controller,
add the controller name to ur index body
the convert the template js to a method.
then create a scope method in your app.js controller.
In the scope method, call the template js method
Inside the ui-view html template or ur dashboard, use ng-init to call the scope method of your app.js controller using
Here is the working example:
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="zeusWeb" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="zeusWeb" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="zeusWeb" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="zeusWeb" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Screening Manager</title>
<meta name="keywords" content="education, institution, management, portal,screening,application">
<meta name="description" content="education, institution, management, portal,screening,application">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="author" content="K-Devs System Solutions">
<meta name="owner" content="Kazeem Olanipekun">
<meta name="verified by" content="K-Devs System Solutions">
<meta name="googlebot" content="noodp">
<meta name="google" content="translate">
<meta name="revisit-after" content="1 month">
<!-- build:css css/main.css-->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/angular-loading-bar/build/loading-bar.css" />
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css" />
<link rel="stylesheet" href="bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css" />
<link rel="stylesheet" href="bower_components/animate.css/animate.css" />
<link rel="stylesheet" href="bower_components/iCheck/skins/flat/blue.css" />
<link rel="stylesheet" href="bower_components/nprogress/nprogress.css" />
<link rel="stylesheet" href="bower_components/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.css" />
<link rel="stylesheet" href="bower_components/switchery/dist/switchery.css" />
<!--endbower-->
<!--custom:css-->
<link href="template.css" rel="stylesheet">
<link rel="stylesheet" href="app.css">
<!-- endcustom css-->
<!-- endbuild -->
<link rel="shortcut icon" href="images/screening.ico" type='image/x-icon'/>
<link rel="icon" href="images/screening.ico" type="image/x-icon"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[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]-->
</head>
<body data-ng-controller="zeusWebCtrl" class="nav-md footer_fixed">
<!--[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]-->
<data ui-view ng-cloak></data>
<!-- build:js js/vendors.js-->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-mocks/angular-mocks.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="bower_components/jquery-mousewheel/jquery.mousewheel.js"></script>
<script src="bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.js"></script>
<script src="bower_components/iCheck/icheck.js"></script>
<script src="bower_components/nprogress/nprogress.js"></script>
<script src="bower_components/bootstrap-progressbar/bootstrap-progressbar.js"></script>
<script src="bower_components/transitionize/dist/transitionize.js"></script>
<script src="bower_components/fastclick/lib/fastclick.js"></script>
<script src="bower_components/switchery/dist/switchery.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js js/main.js-->
<!-- code inclusion-->
<script src="template.js"></script>
<script src="scripts/index.js"></script>
<script src="scripts/dashboard/dashboard.js"></script>
<script src="app.js"></script>
<!--end inclusion -->
<!-- endbuild -->
</body>
</html>
here is the app.js
'use strict';
// Declare app level module which depends on views, and components
var zeusWeb=angular.module('zeusWeb', ['ui.router', 'angular-loading-bar','dashboard']);
zeusWeb.config(['$stateProvider', '$urlRouterProvider','cfpLoadingBarProvider',function ($stateProvider, $urlRouterProvider,cfpLoadingBarProvider) {
$urlRouterProvider.otherwise("/");
/**
* State for the very first page of the app. This is the home page .
*/
$stateProvider.state('home', {
url: "/",
templateUrl: 'views/dashboard/dashboard.html',
controller: 'dashboardCtrl'
});
/*
$stateProvider.state('dashboard', {
url:'/dashboard',
templateUrl: 'views/dashboard/dashboard.html',
controller: 'dashboardCtrl',
controllerAs:'vm'
});*/
/*
$stateProvider.state('dashboard', {
views:{
'body':{
url:'/embed',
templateUrl: 'view1/embed.html',
controller: 'embed',
controllerAs:'vm'
}
}
});*/
}]);
zeusWeb.controller('zeusWebCtrl',['$scope',function ($scope) {
$scope.test = "Testing";
$scope.appTemplate=function () {
template();
};
}]);
here is the embed ui-view dashboard.html
<div class="container body">
<div class="main_container">
<!--sidebar-->
<section data-ng-include="'views/dashboard/sidebar-nav.html'" data-ng-controller="sideBarCtrl as vm"></section>
<!--sidebar-->
<!-- top navigation -->
<section data-ng-include="'views/dashboard/header.html'"></section>
<!-- /top navigation -->
<!-- page content -->
<div class="right_col" role="main" ui-view="body">
hey
<!-- <script>template();</script>-->
</div>
<!-- /page content -->
<!--footer-->
<section data-ng-include="'views/dashboard/footer.html'"></section>
<!--footer-->
</div>
</div>
<div data-ng-init="$parent.appTemplate()"></div>
Please note that if you are having an asynchronous inject sidebars html based on roles. make sure you have a default sidebar html that will put this insted of the dashboard and also make sure that the default sidebar will be loaded last after all other sidebars has loaded successfully.
in my case, here is a sample example of the sidebars.
school admin html sidebar
<div class="menu_section">
<h3>Live On</h3>
<ul class="nav side-menu">
<li><a><i class="fa fa-bug"></i> Additional Pages <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li>E-commerce</li>
<li>Projects</li>
<li>Project Detail</li>
<li>Contacts</li>
<li>Profile</li>
</ul>
</li>
<li><a><i class="fa fa-windows"></i> Extras <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li>403 Error</li>
<li>404 Error</li>
<li>500 Error</li>
<li>Plain Page</li>
<li>Login Page</li>
<li>Pricing Tables</li>
</ul>
</li>
<li><a><i class="fa fa-sitemap"></i> Multilevel Menu <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li>Level One
<li><a>Level One<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li class="sub_menu">Level Two
</li>
<li>Level Two
</li>
<li>Level Two
</li>
</ul>
</li>
<li>Level One
</li>
</ul>
</li>
<li><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></li>
</ul>
</div>
then, let assume that is the last sidebar of the user, then you then call the default sidebar to call the function
default sidebar html
<div data-ng-init="$parent.appTemplate()"></div>`enter code here