add icon to menu item

[ghost]

Hi,

how to add icon before menu item via ui-navbar?

[blackat]

Do you mean before each single item in the menu enclosed in a li element? Roughly you should change the template to add a span with the icon

<li ng-class="{divider: leaf.name == 'divider'}">
    <a ui-sref="{{leaf.link}}" ng-if="leaf.name !== 'divider'"><span class="leaf.icon"></span>{{leaf.name}}</a>
</li>

then add the icon class to the model, for instance

{
    icon: "glyphicons glyphicons-car"
    name: "state 2",
    link: "state2"
}

I can put this as enhancement.

[ghost]

you are right. just make it more powerful.

发自我的 iPhone

在 2015年10月17日，11:29，Eugenio Lentini [email protected] 写道：

Do you mean before each single item in the menu enclosed in a li element? Roughly you should change the template to add a span with the icon

{{leaf.name}}

then add the icon class to the model, for instance

{ icon: "glyphicons glyphicons-car" name: "state 2", link: "state2" } I can put this as enhancement.

— Reply to this email directly or view it on GitHub.

[ghost]

one more thing: remove # from URL, see below:

https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag

I tried, it works, but once refresh page(press F5), the nav disappeared.

On Sat, Oct 17, 2015 at 11:36 AM, Sam Sun [email protected] wrote:

you are right. just make it more powerful.

发自我的 iPhone

在 2015年10月17日，11:29，Eugenio Lentini [email protected] 写道：

Do you mean before each single item in the menu enclosed in a li element? Roughly you should change the template to add a span with the icon

{{leaf.name}}

then add the icon class to the model, for instance

{ icon: "glyphicons glyphicons-car" name: "state 2", link: "state2" }

I can put this as enhancement.

— Reply to this email directly or view it on GitHub https://github.com/blackat/ui-navbar/issues/3#issuecomment-148924961.

Regards,

Sam Sun

[ghost]

more powerful one, hehehe....

http://odetocode.com/blogs/scott/archive/2014/05/20/using-resolve-in-angularjs-routes.aspx

On Sat, Oct 17, 2015 at 3:48 PM, Sam Sun [email protected] wrote:

one more thing: remove # from URL, see below:

https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag

I tried, it works, but once refresh page(press F5), the nav disappeared.

On Sat, Oct 17, 2015 at 11:36 AM, Sam Sun [email protected] wrote:

you are right. just make it more powerful.

发自我的 iPhone

在 2015年10月17日，11:29，Eugenio Lentini [email protected] 写道：

Do you mean before each single item in the menu enclosed in a li element? Roughly you should change the template to add a span with the icon

{{leaf.name}}

then add the icon class to the model, for instance

{ icon: "glyphicons glyphicons-car" name: "state 2", link: "state2" }

I can put this as enhancement.

— Reply to this email directly or view it on GitHub https://github.com/blackat/ui-navbar/issues/3#issuecomment-148924961.

Regards,

Sam Sun

Regards,

Sam Sun

[blackat]

Hi, in order to remove the hashbang (#) from the url you have to activate the html5 mode

angular.module('wkfsfrcApp', ['ui.navbar', 'ui.router'])
    .config(['$urlRouterProvider', '$locationProvider',
            function($urlRouterProvider, $locationProvider) {
                $urlRouterProvider.otherwise('/');
                $locationProvider.html5Mode(true);
            }])

Once you have done that you will see that the url will be rendered in a different way by the framework

<a ui-sref="state1">go to state 1</a>

with html5=true is rendered

<a href="state1">go to state 1</a>

with html5=false is rendered

<a href="#/state1">go to state 1</a>

If you activate the html5 mode you need to provide the url rewrite on the backend, here you can find some useful information for different servers.

For an example on how to set up express you can use yeoman to generate a full stack angular project.

Hope it helps :wink: