Bootstrap and AngularJS Simple Code

Question

Hi Guys I have a simple code using Bootstrap and AngularJS that I can't seem to work on. It will just show an alert once the button is clicked. Here is the code:

var myapp = angular.module('myapp',['ui.bootstrap']);

myapp.controller('mainCtrl', ['$scope',mainCtrl]);

function mainCtrl($scope) {
    $scope.testing = function() {
        alert("Button Is Pressed");
    }
}

<!DOCTYPE html>
<html lang="en-US" data-ng-app="myapp">
<head>
<title>Sample Angular JS</title>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script type='text/javascript' src='https://github.com/angular-ui/bootstrap/blob/gh-pages/ui-bootstrap-0.11.2.min.js'></script>
<script type='text/javascript' src='https://code.angularjs.org/1.3.0-rc.1/angular.min.js'></script>

<script type='text/javascript' src='myapp.js'></script>

</head>

<body data-ng-controller="mainCtrl">

<div class="container">
    <button class="navbar-btn btn-danger btn pull-right" data-ng-click="testing()">Test</button>
</div>

</body>
</html>

I am not sure why the button is not working, could it be due to the library I am using? Please advise I am new to AngularJS framework. Thank you.

ui-bootstrap-0.11.2.min.js should be loaded after angular.js — Pankaj Parkar
– Pankaj Parkar, Commented Oct 7, 2015 at 10:08
@PankajParkar OMG that did the trick, thank you so so much :) — Neil
– Neil, Commented Oct 7, 2015 at 10:14

sahbeewah · Accepted Answer · 2015-10-07 10:04:11Z

1

ui-bootstrap requires bootstrap which requires jQuery... you'll be getting a dependency error which causes nothing to work...

answered Oct 7, 2015 at 10:04

sahbeewah

2,6901 gold badge15 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jacek Dominiak Over a year ago

+ the link for the ui.bootstrap seems incorrect as well, try raw.githubusercontent.com/angular-ui/bootstrap/gh-pages/…

Neil Over a year ago

I have already used different kinds of bootstrap libraries and still not working. I used the library that can be downloaded getbootstrap.com/getting-started as well as github.com/angular-ui/bootstrap/tree/gh-pages and yet failed to make it work.

Jacek Dominiak Over a year ago

@Neil try removing the dependency for ui.bootstrap from the module, it will work then. You need to add Jquery and bootstrap js files as sahbeewah mentioned.

Neil Over a year ago

@JacekDominiak thank you for the link, it worked as well using the exact bootstrap link you provided. :)

Pankaj Parkar · Accepted Answer · 2015-10-07 10:17:02Z

0

You should be loading angular.js before loading ui-bootstrap which need angular object. You may also need to add jQuery reference as @sahbeewah suggested.

answered Oct 7, 2015 at 10:17

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

1 Comment

Neil Over a year ago

Yes correct, that sorted out the issues :) I was not aware of the arrangement, thanks a lot again. Now I have the fundamental idea I can work on many projects now. Thanks

Collectives™ on Stack Overflow

Bootstrap and AngularJS Simple Code

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related