1

I have a MEAN project, using AngularJS v1.4.3. I need to insert a dropdown item into the navigation menu, therefore I tried to follow the instructions to install, include and use angular-ui/bootstrap as following:
- install the package with
npm install angular-ui-bootstrap
- add the module to the app
angular.module('usermgmtApp', ['ngRoute', 'ui.bootstrap']);
- use the following code to implement the menu entry for dropdown:

<ul class="nav navbar-nav">
    <li><a href="/">Home</a></li>
    <li uib-dropdown on-toggle="toggled(open)"><!-- Simple dropdown -->
        <a href id="simple-dropdown" uib-dropdown-toggle>
            Click me for a dropdown, yo!
        </a>
        <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
            <li role="menuitem"><a href="#">Action</a></li>
            <li role="menuitem"><a href="#">Another action</a></li>
            <li role="menuitem"><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li role="menuitem"><a href="#">Separated link</a></li>
        </ul>
    </li>
    <li><a href="applications">Next</a></li>

The code for the dropdown section is a snippet copied from https://angular-ui.github.io/bootstrap/ (including the "href" without target, but as I'm learning Angular I take it as it is). That's all I've done and when I run my application it doesn't even bring-up the landing page so I am missing something here, certainly in installing the module (do I have to download some code in /public, do I have to include some "import" in the code somewhere ...). Again, I am confused with the instructions on the angular github an I appreciate your help. Thanks

4
  • Any errors in the console? Commented Dec 17, 2016 at 13:58
  • Maybe you miss to import angular-ui-bootstrap in your index.html like this <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script> Commented Dec 17, 2016 at 15:37
  • I have referenced in index.html the npm-installed module with <script src="node-modules/angular-bootstrap/dist/ui-bootstrap-tpls.mi‌​n.js"></script> . The app doesn't open and I have 2 console errors: Uncaught SyntaxError: Unexpected error (, then Uncaught error: [$injector:modulerr] Commented Dec 17, 2016 at 18:13
  • one error certainly comes from here (in router): angular.module('meanApp', ['ngRoute', 'ui.bootstrap']); but I don't know whcih (order, name of the ui.bootstrap ...) Commented Dec 17, 2016 at 18:41

1 Answer 1

1

It is not rocket science, but possibly useful for newbees that may land here:
- install the angular js package manager (like npm for node js); do from the console, in the project's root folder:
npm install -g bower
bower init (this will create the config file bower.json)
- install the angular-ui-bootstrap from console:
bower install angular-bootstrap --save
(this will create bower_components/angular-ui-bootstrap entry in the project's root folder)
- in app_client/main.js add the 'ui.bootstrap' in the angular.module array
- in app_client/index.html insert, after all other angular js lib files:

<script src="lib/angular/ui-bootstrap-tpls-2.3.1.min.js"></script>
            (the file name should be the same as the one installed by bower in that folder)<br>
    - insert the code where you want to use ui.bootstrap components, following the
    snippet guidance from https://angular-ui.github.io/bootstrap<br>

HTH

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.