search

silverbux / laravel-angular-admin

Laravel + Angularjs + Bootstrap + AdminLTE binded by Gulp workflow Admin Dashboard Boilerplate / Starter.
http://silverbux.github.io/laravel-angular-admin/
MIT License
924 stars 414 forks source link

How to create a new Angular Component #51

Closed alavin closed 8 years ago

alavin commented 8 years ago

Hi,

Thank you for this build. I am having an issue trying to create a new template.

For example i am trying to create Data Tables template. To do that I've first run the command: php artisan ng:component data-tables

Which create new files in angular/app/components/data-tables/data-tables.component.html angular/app/components/data-tables/data-tables.component.js angular/app/components/data-tables/data-tables.scss

In data-tables.component.html i put some HTML. Basically i copied the default source code from ADMINLTE.

After that I created a new state route in routes.config.js .state('app.datatables', { url: '/data-tables', data: { auth: true }, views: { 'main@app': { template: '' } } })

And finally in nav-sidebar.component.html I updated the row: <li><a ui-sref="app.datatables"><i class="fa fa-circle-o"></i> Data tables</a></li>

Therefore now i am able to click on the link and load /data-tables but i get a blank page.

Is there something that i am missing?

Thanks for you help.

Vince.

silverbux commented 8 years ago

Hi vince, this is a current bug, basically you have to restart gulp && gulp watch whenever you create new file, just control + c the current gulp and enter gulp && gulp watch again

alavin commented 8 years ago

Mmm.. I tried couple of times but no luck.

Is my procedure correct?

alavin commented 8 years ago

in routes.config.js i added

.state('app.datatables', { url: '/data-tables', data: { auth: true }, views: { 'main@app': { template: '<data-tables></data-tables>' } } })

template: '<data-tables></data-tables>' seems doesn't load the file

angular/app/components/data-tables/data-tables.component.html

Indeed if i try to insert something inside template: '<data-tables>Test message</data-tables>'

I can see Test message displayed on the page.

alavin commented 8 years ago

Never mind I've made it works.

My fault i've changed something in index.components.js

silverbux commented 8 years ago

alright, actually i was trying it and i also experienced it, apparently data-tables is a reserved word, probably because of the library data-tables, it's weird when i tried to changed it to thedata-tables it worked. you might want to take a look on that also

alavin commented 8 years ago

Yes indeed . i renamed in datatables without - and it works.

Shame i spent half day on this.

Thanks. Vince.