CODEWITHSUNDEEP
angularjsnode.jsangular-ui
Ginger Opariti
Ginger Opariti

Reputation: 1292

Install angular-ui

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

Upvotes: 1

Views: 529

Answers (1)

Ginger Opariti
Ginger Opariti

Reputation: 1292

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

Upvotes: 1

Related Questions