I am trying this simple tutorial to try UI Bootstrap:
https://scotch.io/tutorials/how-to-correctly-use-bootstrapjs-and-angularjs-together
But I am running into two problems.
SyntaxError: expected expression, got '<' at ui-bootstrap-1.3.3.js:5:0
This is the first problem. I have not edited anything in the file, yet it says unexpected token for the very first line <!DOCTYPE html>
And the other one is as below:
Error: [$injector:modulerr] Failed to instantiate module app due to:
[$injector:modulerr] Failed to instantiate module ui.bootstrap due to:
[$injector:nomod] Module 'ui.bootstrap' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
I saw answers to all the related questions, some of them suggesting to include the other dependencies while other suggesting to make sure of the order of the dependencies. Tried everything but no joy.
Below is my html and js code. Please have a look
HTML
<html>
<head>
<style type="text/css">
#import "css/bootstrap.css";
#import "css/style.css";
</style>
<script src="js/angular.js"></script>
<script src="js/angular-animate.js"></script>
<script src="js/angular-touch.js"></script>
<script src="js/ui-bootstrap-1.3.3.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div class="container" ng-app="app" ng-controller="mainController">
<div class="text-center">
<p>Example of Angular and the normal Bootstrap JavaScript components</p>
<p class="text-success">This will work</p>
</div>
<h2>Buttons</h2>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary" ng-model="bigData.breakfast" btn-checkbox>
Breakfast
</label>
<label class="btn btn-primary" ng-model="bigData.lunch" btn-checkbox>
Lunch
</label>
<label class="btn btn-primary" ng-model="bigData.dinner" btn-checkbox>
Dinner
</label>
</div>
<pre><code>{{ bigData | json }}</code></pre>
<h2>Collapse</h2>
<a href="#" class="btn btn-primary" ng-click="isCollapsed = !isCollapsed">
Toggle Panel
</a>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#" ng-click="isCollapsed = !isCollapsed">
Collapsible Group Item #1
</a>
</h4>
</div>
<div collapse="isCollapsed">
<div class="panel-body">Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<pre><code>{{ isCollapsed }}</code></pre>
</div>
</body>
</html>
JS
angular.module('app', ['ngAnimate', 'ngTouch', 'ui.bootstrap'])
.controller('mainController', function($scope) {
// BUTTONS ======================
// define some random object
$scope.bigData = {};
$scope.bigData.breakfast = false;
$scope.bigData.lunch = false;
$scope.bigData.dinner = false;
// COLLAPSE =====================
$scope.isCollapsed = false;
});
Not sure what's going wrong.
Edit
Version details area as follows
Bootstrap v3.3.6
angular
angular-animate
angular-touch
all are having version AngularJS v1.5.3
Make sure ui-bootstrap-1.3.3 is loaded correctly in your app.
Please find working plunker below:
http://plnkr.co/edit/evG4XQ9ih9Cx0d1WF6YU?p=preview
you are missing ui-bootstrap-tpls.js file.
add this file in your page.
see example working plunkr
In my case, in a legacy application (AngularJS 1.3), it was because I put angular-ui-bootstrap to bower.js rather than package.js.
After I put it to package.js, ran npm install, copied to some source directory, and added to imports, it worked.
import '../js/dependencies/ui-bootstrap-tpls-0.14.3.min'
It is probably not the right way to do it, though.
I think it should be imported from bower_modules.
import '../bower_components/angular-ui-bootstrap/???';
But, the Bower hosting does not work anymore and an attempt to install through bower install fails with HTTP 502.
Also, what's weird, it worked unless I registered a provider:
.config(['$tooltipProvider', function ($tooltipProvider) { ...
This way, Angular started complaining that '$tooltipProvider' is not known.
Hope this helps, although I do not know much about the old AngularJS, so take it as potentially mediocre solution.
Related
I need to translate my HTML into different languages based on user preference. For that, I am using Angular JS translate method. The example when I write inside notepad and saved as ".html" is working fine. But when I pasted the same code inside my Salesforce Visualforce page, its behavior changes.ie. When I click on the button"IT" to translate the content to "Italics" the contents are translating to Italics but within seconds the contents are again going back to their preferred language "EN". I have given below my screenshot of output.
I have given below my code, can anyone say what's wrong in this.
<!DOCTYPE html>
<html ng-app="app">
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.5.2/angular-translate.js"></script>
<script>
// Code goes here
var app = angular.module('app', ['pascalprecht.translate']);
app.config(['$translateProvider',
function($translateProvider) {
$translateProvider.translations('it', {
'Purchase order': "Ordine di acquisto ",
'Number:': "Numero:",
'Customer data': "Dati Cliente",
'Surname / Company':"Cognome/Società",
'Name':"Nome",
'Piazza way':"Via/Piazza",
'City':"Città",
'VAT tax code':"Codice Fiscale/Partita IVA",
'Phone':"Telefono",
'E-Mail':"E-Mail",
'CAP':"CAP"
});
$translateProvider.preferredLanguage("en");
}
]);
app.controller('AppController', function ($translate) {
// this.browser = navigator.userAgent;
this.useLang = function (lang) {
$translate.use(lang);
}
});
</script>
<div ng-controller="AppController as app">
<h3 translate> Purchase order </h3>
<p translate>Number:</p>
<h3 translate>Customer data</h3>
<p><span translate>Surname / Company</span>_________</p>
<p> <span translate>Name</span>__________</p>
<p><span translate>Piazza way</span>____________</p>
<p><span translate>CAP</span>_______<span translate>City</span>______</p>
<p><span translate>VAT tax code</span>__________</p>
<p><span translate>Phone</span>____________</p>
<p><span translate>E-Mail</span>_________</p>
<button ng-click="app.useLang('it')">IT</button>
<button ng-click="app.useLang('en')">EN</button>
</div>
</body>
</html>
try this
{{'variable_name' | translate }}
After going through the solutions provided in developer forums, finally I found the solution for my problem. Actually the reason behind my content going back to "english" from "italics" is "page refreshing". To stop the page from refreshing I need to set the <button> type as "button".
ie <button type="button">
Code change
<button type="button" ng-click="app.useLang('it')">IT</button>
<button type="button" ng-click="app.useLang('en')">EN</button>
I did the change in my code and it stopped the page from refreshing, which in turn gave my expected result.
I have inherited some AngularJS code. It has this
function MainCtrl($scope)
{
// code goes here
};
angular
.module('inspinia')
.controller('MainCtrl', MainCtrl)
Now I want to add a custom controller which combines a datepicker and timepicker into one control. The GitHub project is here and there is a demo Plunk here.
The demo Punk declares its controller as
var app = angular.module('app', ['ui.bootstrap', 'ui.bootstrap.datetimepicker']);
app.controller('MyController', ['$scope', function($scope) {
How do I add that into my existing controller? What is the combined declaration? Preferably one that I can use it with ng-stricti-di on my ng-app.
[Update] here's my best guess, which I can't test until I get home in 10 hours or so. How does it look?
var myApp=angular.module('myApp', ['$scope','ui.bootstrap','ui.bootstrap.datetimepicker']);
myApp.controller('MainCtrl', function($scope)
{
// code goes here, and can use ui.bootstrap and ui.bootstrap.datetimepicker
// which were injected into the app's module
}]);
[Update 2[ When I change it to
angular
.module('inspinia' ['ui.bootstrap', 'ui.bootstrap.datetimepicker'])
.controller('MainCtrl', MainCtrl)
I get
Error: [$injector:nomod] http://errors.angularjs.org/1.5.0/$injector/nomod?p0=undefinedError: [$injector:nomod] http://errors.angularjs.org/1.5.0/$injector/nomod?p0=undefined
Despue index.html having
<script src="js/bootstrap/bootstrap.min.js"></script>
How do I get this project to use ui boostrap and its datepicker?
Please review these steps:
You don't need to inject your $scope in your app declaration just
inject external modules you want to use, for this case:
'ui.bootstrap' and 'ui.bootstrap.datetimepicker'.
angular.module('myApp', ['ui.bootstrap','ui.bootstrap.datetimepicker'])
What is the combined declaration?
Because 'ui.bootstrap.datetimepicker' depends only on 'ui.bootstrap.dateparser' and 'ui.bootstrap.position' but you need also the bootstrap templates and functionality that are included into the ui.bootstrap-tpls.js.
Make sure to include the above files required in you index.html
<link rel="stylesheet" ref="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.0/ui-bootstrap-tpls.js"></script>
<!-- make sure you download this file from the github project -->
<script src="datetime-picker.js"></script>
How do I add that into my existing controller?
When you declare your controller this inherit all module dependencies you had declared (injected) for the app, so you don't need to do this again. In your controller you should create an object literal to store the date-time selected for the user and a variable to control when the date-picker is open, like this:
angular.module('myApp').controller('MainCtrl', ['$scope', function($scope) {
$scope.myDatetime = {
dateSelected: new Date(),
isOpen: false
}
}]);
Call the date-time picker directive in your html:
<html ng-app-="myApp">
<head> .... </head>
<body ng-controller="MainCtrl">
<div class="input-group">
<input type="text" class="form-control" datetime-picker="MM/dd/yyyy HH:mm" ng-model="myDatetime.dateSelected" is-open="myDatetime.isOpen" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="myDatetime.isOpen = !myDatetime.isOpen"><i class="fa fa-calendar"></i></button>
</span>
</div>
</body>
</html>
I hope this help you.
Based on your comment under the question, your confusion is with the way the two pieces of code handle their dependency injection. So before I go further, if you haven't read the documentation on dependency injection, then stop right here and go read it. It will have all of your answers and more and it's something you need to know if handling Angular for longer than five minutes.
To answer the specific case you have, the top code you listed uses implicit injection for the controller which works but is not safe for minification nor is it recommended. The code sample you found uses array dependency inject for the controller which is better and safe for minification. The app declaration in the second sample is just standard module dependency injection and shouldn't look any different than what you already have in your application.
So to use the code you found all you have to do is add the correct module dependencies to your app something like:
angular.module('inspinia', ['ui.bootstrap', 'ui.bootstrap.datetimepicker']);
angular.module('inspinia').controller('MainCtrl',MainCtrl);
function MainCtrl($scope) { }
Your controller appears to already have the correct dependencies so it doesn't need to be changed (which is say it doesn't need anything outside of $scope). I used the code from your first example to show how your current code would be updated but ideally you would use the second version of dependency inject for your controller.
The update you have with the error is because the ui.bootstrap module is not part of bootstrap but part of the angular-bootstrap project. You need to include those js in your page.
It would be remiss of me if I didn't go ahead and mention there is a third way to do dependency injection using the $inject service. It is preferred in a number of popular style guides because it is easy to use a task runner to automate. This is arguably the best option to use for this reason.
Here is minimal app, that you will need to use this datepicker
Html:
<body ng-app="inspinia">
<div ng-controller="MainCtrl as ctrl">
<h1>Datepicker Demo</h1>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup ng-model="ctrl.dt" is-open="ctrl.opened" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="ctrl.open()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</div>
</body>
JavaScript:
(function() {
'use strict';
angular.module('inspinia', ['ui.bootstrap']);
angular.module('inspinia').controller('MainCtrl', MainCtrl);
function MainCtrl() {
this.open = function() {
this.opened = true;
};
this.opened = false;
}
})();
Here I created a plunker for you, so you can try:
http://plnkr.co/edit/jEwT39sKcKtr8jbQa0uc?p=preview
I've been playing around with the bootstrap Collapse (angular UI implementation) to show and hide a well in a MEAN.io application. The show and hide code below works but it doesn't animate the transition between the two states. I'd like to get a smooth animated transition but so far everything I've tried hasn't worked. Thanks in advance for any help you can provide.
<button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<hr>
<div uib-collapse="isCollapsed">
<div class="well well-lg">Some content</div>
</div>
You are probably missing the dependency to ngAnimate in your Angular application:
angular.module('app', ['ngAnimate', 'ui.bootstrap']);
Remember to load the corresponding JavaScript as well:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
Guys I am beginner in AngularJs and javascript.
In my project, I am using this plugin https://github.com/mikejacobson/angular-bootstrap-scrolling-tabs
but I am facing error and I am not able to find the root cause even after spending too much time.
Here's my HTML code -
<div class="scrolling-tabs-container" ng-controller="MainController as main">
<div scrolling-tabs-wrapper>
<tabset ng-show="main.tabs.length" style="z-index: 50px;">
<tab ng-repeat="t in main.tabs" active="t.active" class="tabclass">
<tab-heading style="padding: 5px">{{t.title}}
<a ng-click="removeTab($index)" href=''>
<i class="selected-tab"></i>
<i class="icon-remove"></i>
</a>
</tab-heading>
<div ng-bind-html='to_trusted(t.content)'></div>
</tab>
</tabset>
</div>
</div>
I have included the required javascript files and css files but I am facing this error when I am trying to click left scroll arrow-
TypeError: stc.$leftScrollArrow.add is not a function
at ElementsHandler.p.setElementReferences (scrolling-tabs.js:231)
at ElementsHandler.p.initElements (scrolling-tabs.js:170)
at __initTabsAfterTimeout (scrolling-tabs.js:525)
at angular-1.3.15.min.js:16298
at completeOutstandingRequest (angular-1.3.15.min.js:4924)
at angular-1.3.15.min.js:5312(anonymous function) # angular-1.3.15.min.js:11654
Has someone used this plugin? Can someone help me understanding this issue? Please help.
Amarpreet, make sure jQuery is loaded before angular, as the Issue on GitHub
says
I'm building an app in Angular JS and Bootstrap.
http://numerology.andrewgolightly.com/
Enter some details and look at the results. There is a dismissable alert on the results page that is not being dismissed when the cross is clicked on.
I basically copied the code from http://getbootstrap.com/components/#alerts-dismissable
<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<span class="glyphicon glyphicon-info-sign"></span> This number represents who you are at birth and the native traits that you will carry with you through life. The most important number that will be discussed here is your Life Path number. The Life Path describes the nature of this journey through life.
</div>
Anyone know why it isn't being dismissed on my site?
You have only included the Bootstrap css, but for the dismissable functionality (and lots of other functionality in Bootstrap) you also need to include the js file.
You have to add jquery.js and bootstrap.js
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
in your head section