I'm locked into a jQuery ui issue. I have done a form that I need to autocomplete all the field based on client id. It is like if I'm typing the id of an existing client, all the fields should be autofill with all that's client values from database table like fisrtname , last name, address, date-of-birth, but for the first i'm just trying to test if jquery Ui is working and I got the "$(...).autocomplete is not a function" error in console. It is not from Jquery because I have done also a notification system and i dysplay all notification with Jquery and it is working , I think That it's from jQuery UI. I have tried all possible solutions that I found with no success. Thank's in advance ! Good day to everybody! :)
This is My layouts.app
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="userId" content="{{Auth::check() ? Auth::user()->id : '' }}">
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="{{asset('jqueryui/jquery-ui.min.js')}}" type="text/javascript"></script>
<script>
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
]); !!}
</script>
<!-- Fonts -->
{{-- <link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> --}}
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="{{asset('jqueryui/jquery-ui.min.css')}}">
<link rel="icon" type="image/png" sizes="16x16" href="{{asset('assets/images/favicon.png')}}">
<title>S.C. Amanet Stefany IFN S.R.L.</title>
<!-- Bootstrap Core CSS -->
<link href="{{asset('assets/plugins/bootstrap/css/bootstrap.min.css')}}" rel="stylesheet">
<!-- morris CSS -->
<link href="{{asset('assets/plugins/morrisjs/morris.css')}}" rel="stylesheet">
<!-- Custom CSS -->
<link href="{{asset('css/style.css')}}" rel="stylesheet">
<!-- You can change the theme colors from here -->
<link href="{{asset('css/colors/blue.css')}}" id="theme" rel="stylesheet">
{{-- <link href="{{ asset('css/app.css') }}" rel="stylesheet"> --}}
</head>
<body>
.... this is my content ....
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<script src="{{ asset('js/app.js') }}"></script>
{{-- <script src="{{asset('assets/plugins/jquery/jquery.min.js')}}"></script> --}}
{{-- <script src="{{asset('js/jquery.js')}}"></script> --}}
<!-- Bootstrap tether Core JavaScript -->
<script src="{{asset('assets/plugins/bootstrap/js/popper.min.js')}}"></script>
<script src="{{asset('assets/plugins/bootstrap/js/bootstrap.min.js')}}"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="{{asset('js/jquery.slimscroll.js')}}"></script>
<!--Wave Effects -->
<script src="{{asset('js/waves.js')}}"></script>
<!--Menu sidebar -->
<script src="{{asset('js/sidebarmenu.js')}}"></script>
<!--stickey kit -->
<script src="{{asset('assets/plugins/sticky-kit-master/dist/sticky-kit.min.js')}}"></script>
<!--Custom JavaScript -->
{{-- <script src="{{asset('js/custom.js')}}"></script> --}}
<script src="{{asset('js/custom.min.js')}}"></script>
{{-- <script src="{{asset('js/jquery-ui.js')}}"></script> --}}
<!-- ============================================================== -->
<!-- This page plugins -->
<!-- ============================================================== -->
<!--sparkline JavaScript -->
<script src="{{asset('assets/plugins/sparkline/jquery.sparkline.min.js')}}"></script>
<!--morris JavaScript -->
<script src="{{asset('assets/plugins/raphael/raphael-min.js')}}"></script>
<script src="{{asset('assets/plugins/morrisjs/morris.min.js')}}"></script>
<!-- Chart JS -->
<script src="{{asset('js/dashboard1.js')}}"></script>
<!-- ============================================================== -->
<!-- Style switcher -->
<!-- ============================================================== -->
<script src="{{asset('assets/plugins/styleswitcher/jQuery.style.switcher.js')}}"></script>
</body>
</html>
This is my view with that form
<div class="form-group row ml-1 mb-1">
<label for="example-text-input" class="col-3 col-form-label pt-0" style="min-width: 80px;">Serie B.I./C.I.:</label>
<div class="col-3 pl-0">
<input class="form-control input-height pl-1 pr-1" name="serie" type="text" value="" id="">
</div>
<div class="col-4 pl-0">
<input class="form-control input-height pl-1 pr-1" name="nr_id" type="text" value="" id="cltId" > //this #cltId ----------
</div>
</div>
And this is my resource/js/app.js with the jQuery code that I need
$(document).ready(function(){
$("#cltId").autocomplete({
source: [
'Apple',
'Banana',
'Orange',
]
});
});
Any suggestion ? Have I added something that I shouldn't ? Have I write the code in wrong way ? I can not find the mistake ,any answer will help me lot.
Finally solved, I have moved all the jQuery code in app.js, I have run the command
npm install jquery-ui --save-dev
and I imported it in app.js like :
import $ from 'jquery';
window.$ = window.jQuery = $;
import 'jquery-ui/ui/widgets/autocomplete.js';
IMPORTANT ! note that the autocomplete.js from the ends is work for me because is the widget that I want to use , find out what widget you want and import it there after importing jquery :
Import 'jquery-ui/widgets/here is the widget that you want .js'
But before look to not import jquery anywhere else like layouts or any other js files like bootstrap.js for example.
i'm trying in my app to include a template (already shown) that include other template.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tasks Overview</title>
<!-- Angular framework -->
<script src="assets/js/angular.min.js"></script>
<!-- Main module -->
<script src="app.js"></script>
<!-- Components -->
<!-- Services -->
<script src="app/components/logger/logger-service.js"></script>
<script src="app/components/resource/resource-service.js"></script>
<script src="app/components/integrity_check/integrity_check-service.js"></script>
<script src="app/components/date_utilities/month_translation_utility-service.js"></script>
<!-- History -->
<script src="app/components/history/history-controller.js"></script>
<!-- Period -->
<script src="app/components/period/period-controller.js"></script>
<script src="app/components/period/directives/year_picker/year_picker-directive.js"></script>
<script src="app/components/period/directives/month_picker/month_picker-directive.js"></script>
<!-- Shell -->
<script src="app/components/shell/shell-controller.js"></script>
<!-- Calendar -->
<script src="app/components/calendar/directives/day/day-directive.js"></script>
<script src="app/components/calendar/calendar-controller.js"></script>
<!-- UI libraries -->
<link rel="stylesheet" type="text/css" href="assets/css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/system.css">
<script src="assets/js/jquery-3.1.0.min.js"></script>
<script src="assets/js/materialize.min.js"></script>
<!-- Task entities -->
<script src="app/components/task/task-controller.js"></script>
<script src="app/components/task/tasks-service.js"></script>
<!-- Main -->
<script src="app/components/main/main-controller.js"></script>
<!-- Google material icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<!-- External libraries -->
<script src="assets/js/FileSystem.js"></script>
</head>
<body ng-app="wtd">
<!--History component-->
<div id="history" ng-include="'app/components/history/history_main-view.html'" ng-controller="historyController as vm"></div>
<!--Period component-->
<div id="period" ng-include="'app/components/period/period_main-view.html'" ng-controller="periodController as vm"></div>
<!--Calendar component-->
<div id="calendar" ng-include="'app/components/calendar/calendar_main-view.html'" ng-controller="calendarController as vm"></div>
<!--Shell component-->
<div id="shell" ng-include="'app/components/shell/shell_main-view.html'" ng-controller="shellController as vm"></div>
<!--Main controller-->
<div id="main" ng-controller="mainController"></div>
</body>
</html>
calendar_main-view.html
<div class="col l10 offset-l1 m10 offset-m1 s10 offset-s1">
<!-- List view mode -->
<div ng-if="view.mode.list" ng-include="app/components/calendar/calendar_list-view.html">
</div>
<!-- Grid view mode -->
<div ng-if="view.mode.grid" ng-include="app/components/calendar/calendar_grid-view.html"></div>
</div>
Problem appear on the second level of ng-include (file calendar_grid-view.html). No one xhr call is done by browser to include the file.
What's wrong?
You are missing single quote.
<div ng-if="view.mode.list" ng-include="'app/components/calendar/calendar_list-view.html'">
<div ng-if="view.mode.grid" ng-include="'app/components/calendar/calendar_grid-view.html'"></div>
Make sure view.mode.list and view.mode.grid evaluted to truthy in order to display html.
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.
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
I am starting to teach myself AngularJS and seem to be falling at the first hurdle as my test code returns an error "'angular' is not defined".
I would assume this is because the "angular" library is not loaded when I begin to reference it but I can't see why this would be the case.
My HTML file is as follows
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>FHIR Test Project</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="/favicon.ico">
<!-- 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.css">
<!-- endbuild -->
<!-- build:js scripts/vendor/modernizr.js -->
<script src="../bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
</head>
<body>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class="container-fluid" ng-app="app">
<header ng-include="'templates/nav.html'"></header>
<div ui-view></div>
<div class="jumbotron">
<h1>'Allo, 'Allo!</h1>
<p class="lead">Always a pleasure scaffolding your apps.</p>
<p><a class="btn btn-lg btn-success" href="#">Splendid! <span class="glyphicon glyphicon-ok"></span></a></p>
</div>
<div class="row marketing">
<div class="col-lg-6">
<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>Sass</h4>
<p>Sass is a mature, stable, and powerful professional grade CSS extension language.</p>
<h4>Bootstrap</h4>
<p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
<h4>Modernizr</h4>
<p>Modernizr is an open-souqqce JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.</p>
</div>
</div>
<footer ng-include="'templates/footer.html'"></footer>
</div>
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.js"> </script>
<script src="../bower_components/jquery/dist/jquery.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID.
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
-->
<!-- build:js scripts/plugins.js -->
<!-- endbuild -->
<!-- build:js({app,.tmp}) scripts/main.js -->
<script src="scripts/main.js"></script>
<!-- endbuild -->
</body>
</html>
My JS is in "main.js" as referenced at the last line of the HTML.
The content of "main.js" are
'use strict';
angular.module('app',['ui.router'])
.config(['$urlRouteProvider','$stateProvider',function($urlRouteProvider,$stateProvider)
{
$urlRouteProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templete: 'testing 123'
});
}]);
I've tested your code, the only problem is that $urlRouteProvider is wrong
Solution
main.js
angular.module('app',['ui.router'])
.config(['$urlRouterProvider','$stateProvider',function($urlRouterProvider,$stateProvider) {
$stateProvider
.state('home', {
url: '/',
templete: '<div>testing 123</div>'
});
$urlRouterProvider.otherwise('/');
}]);
bower.json ( bower install)
{
"name": "whatever",
"version": "0.0.0",
"dependencies": {
"angular-ui-router": "~0.2.10",
"angular": "~1.2.18",
"jquery": "~2.1.1",
"modernizr": "~2.8.2"
}
}