i am newbie to angular snap. I have the following requirement:
Slide out menu left side
should contain sub menus
Sub menus also should be collapsible.
Does angular snap will provide all these features?
I started working on example with angular snap slide out menu.
How do we give two different menus in the drawer and when the user clicks on menu1, main div should display page1 and when user clicks on menu2, main div should display page2.
Two small points:
Angular.js is a framework for building single page applications.
Snap.js is a library that provides a "shelf" like menu interface.
Angular Snap is simply an integration of these two components. You aren't limited from using normal JavaScript to show and hide elements on a page based on a users's click.
Rather than tell you how you should get Angular Snap specifically to do this, here's a way to implement a dropdown hide/show action in Angular, which is absolutely compatible with your Snap.js app instance.
Angular.js Dropdown
function dropdown($scope) {
$scope.subitems = [
{
title: 'Menu item one',
url: '#'
},
{
title: 'Menu item two',
url: '#'
},
{
title: 'Menu item three',
url: '#'
},
{
title: 'Menu item four',
url: '#'
}
];
}
<nav class="dropdown-wrap" ng-app ng-controller="dropdown">
Dropdown Menu
<ul ng-repeat="subitem in subitems" ng-show="showDetails">
<li>
{{subitem.title}}
</li>
</ul>
</nav>
To my earlier point, you shouldn't necessarily consider integrating this an end-all be all solution to your issue. There are probably simpler solutions in a few lines of JavaScript, and unless your menu items need to be dynamic, I wonder if it's isn't just producing extra overhead and debugging to have Angular produce markup that could be hard-coded.
Either way, I would take into account all of your requirements and go from there. Don't consider these libraries a limitation--there's no part of either of them that isn't JavaScript, so possibly consider other out of the box or easy to implement solutions that use simple tools that already exist in the browser.
EDIT: Borrowed some code from here
Related
Is there any good bread crumbs plugin for angularJS 1.x with detailed introduction?
I find below：
https://github.com/ncuillery/angular-breadcrumb/wiki/Getting-started
https://www.npmjs.com/package/angular-ui-router-breadcrumbs
But it does not show how to use it clearly.I want to make it work in my whole app too.
For the second one, I have seen form here that
The directive uses the $state service to generate the breadcrumbs by looking at the current state, and the traversing the state hierarchy to construct an array of breadcrumbs that are then used in an ng-repeat to generate the expected output.
But my situation is used for the whole menus. I have one page with $state name index.cars, the other page with $state name index.phones, I want to show the bread crumb cars / phones when I click a button to redirect me from cars to phones page.
What is the best plugin to do so?
Finally, I use angular-breadcrumb ,refer to
https://github.com/ncuillery/angular-breadcrumb/wiki/API-Reference#state-options
I use lable and parent ro set page name and its parent state.
$stateProvider.state('index.phones ', {
url: '/phones ',
ncyBreadcrumb: {
label: 'Phones ',
parent: function($scope) {
//set `$scope.parentStateName = "index.cars"` in your controller when you redirect from cars to phones
return $scope.parentStateName ? $scope.parentStateName : null;
}
},
})
first let me say that I am newbie with ionic, I tried find my solution in Google, but now the information is mixed with ionic 1, ionic 2 and now "ionic 3".
I need do a dropdown menu which I call "create method" with parameters and this method draw menu with options.
I tested different methods, first try modify popups, then modals, but I can't solve my problem.
I need know the best form to do this, I think that I should make external component and use his methods to do what I want. I used Sencha Touch so far now, and I used this code to this:
Ext.create("Amix.view.general.Menu",{
options : options,
callback : callback
});
Ext.define('Amix.view.general.Menu',{
extend: 'Ext.panel',
...
listeners: {
initialize: function(){
Ext.Viewport.add(this);
...
This is what I want:
Also, what is the best form to select item of the DOM? In sencha I used Ext.getCmp() or Ext.select(), $() on jQuery, or document.queryselector on JavaScript.
As per your screenshot, you need ionic Popover. For Ionic 2.x and 3.x there inbuilt component by ionic Popover
You can use this simply importing to your page
import { PopoverController } from 'ionic-angular';
#Component({})
class MyPage {
constructor(public popoverCtrl: PopoverController) {}
presentPopover(myEvent) {
let popover = this.popoverCtrl.create(PopoverPage);
popover.present({
ev: myEvent
});
}
}
See demo here
I am using angularjs with ui-router and need a dashboard pattern with this.
I have a menu and I want to open a widget on clicking this button with its content and when I click 2nd button another widget with it's content should be loaded without disturbing 1st one.
my idea was this.
Routing
$stateProvider
.state("dashboard", {
abstract:true,
url: "/",
templateUrl:partialDir+"dashbord.html",
controller:"dashboardCtrl"
})
.state("dashboard.home",{
url:"home",
views:{
'teacher':{
//teacher's partial and controller alongwith further child routes
},
'Student':{
//student's partial and controller alongwith further child routes
},
//same for employee
}
});
})
DashboardCtrl
it manages an array against click event.click on teacher in menu will send view="teacher"
this array is generating against every click correctly but i want something like this....
<ul ng-repeat="view in views|unique:'name'">
<li><ui-view="{{view.name}}"></ui-view></li>
</ul>
which is not working.
InShort I want to show multiple named views but not at once.wanna show them against click event with separate scope for each widget.
I think I have cleared my app's structure will anyone help n tell me why these named views are not working as I want.Am I doing something wrong?
I am using Hot Towel AngularJs SPA that John Papa created. I wanted to know how can I change the current menu to have sub menus.
[Edited]
The base implementation of HotTowel menu is looping into all routes and show it on the side bar. What I wanted to do is if there are sub-menu for one of the routes then it's content will be grouped in one menu item. similar to dropdowns sub menu
Don't forget that you're working with Models, and Controllers.
The Angular model and controller work in concert with the View John built.
public class HotTowelController : Controller
{
//
// GET: /HotTowel/
public ActionResult Index()
{
return View();
Notice that the Index is the View.
Ok.
look at the url when you run the page.
name
notice that its not loading another page.
That's because it's a SPA framework.
The Index has a Javascript method where we are defining the roles outside of the .NET Framework / MVC
So, we have a modeljs and a controllerjs. Just like MVC we have to use all three. But use those in the APP folder.
The APP Folder
Admin
Common
dashboard
layout
services
viewmodels
views
etc...
So
Go to the Layout Folder
open topnav.html
THen read the viewmodels
shelljs
var routes = [
{ route: '', moduleId: 'home', title: 'Reserve a Seat', nav: 1 },
{ route: 'details', moduleId: 'details', title: 'Poker Details', nav: 2 }];
return router.makeRelative({ moduleId: 'viewmodels' }) // router will look here for viewmodels by convention
.map(routes) // Map the routes
.buildNavigationModel() // Finds all nav routes and readies them
.activate(); // Activate the router
}
Seee what's happening here. We are mapping, knockout and angular have very easy mappings.
http://knockoutjs.com/documentation/plugins-mapping.html
This is an easy way to learn, and the vm is the smae for both only angular your using npm with a much more defined library in open source. both are mit so can't go wrong there.
then look at the config config.route mainjs
What do you see: Are you getting it?
Need more?
in my extjs app, i create a panel, i also add jquery to one page, however when i click the test section in this page, this page don't render test alert, it seems extjs panel forbid the jquery function. is there any solution to load both html and js to panel content.
relative code below:
var feedback=Ext.create('Ext.panel.Panel', {
title: 'Hello',
layout: 'fit',
autoScroll: true,
bodyStyle:{"background-color":"#fed"},
html: '<div id="test">test</div>',
});
....
$("#test").click(function(){
alert('test')
})
By experience, mixing jquery selector and Extjs element can be pain to manage together. I would suggest to use Ext js selector to do what you're trying to achieve in jquery, since it's pretty basic. However, if you still want to use jquery, using on() function could help, the object is maybe not rendered yet when your jquery code is reached.
$("#test").on('click', function(){
alert('test')
})