9
votes

Bootstrap NavBar avec angularjs

J'essaie d'obtenir une barre NAVER BOOTSTRAP avec AngularJS. J'aimerais avoir la barre NAV dans l'index.html et le reste du contenu de chaque onglet dans la barre NAV dans son propre partiel respectif. J'ai des difficultés à faire apparaître les partiels.

http://plnkr.co/edit/skju4nrnyc56ujqg4lvw?p=Preview


0 commentaires

3 Réponses :


11
votes

Il y a quelques problèmes de votre code. Veuillez comparer mon correctif avec votre version. ( PLNKR )

  1. Vous devez utiliser config () pour enregistrer les règles de routage.
  2. Vous avez besoin de mettre NG-View dans la page HTML et assurez-vous qu'il est à l'intérieur de la portée de NAVCTRL
  3. Le nom du contrôleur dans les règles de routage devrait être une chaîne. Vous avez manqué les citations.
  4. Vous devez utiliser NG-Clic pour déclencher pour charger la page plutôt que HREF. Gardez à l'esprit, le routage est dans la portée de l'angularjs et non HTML.

2 commentaires

+1 pour la perspicacité "Gardez à l'esprit, le routage est dans la portée de l'angularjs et non HTML."


Y a-t-il un moyen d'une manière? Comment puis-je le faire par $ routeProvider?



6
votes

Je vous recommande strictement que vous vous recommandez de passer de pure bootstrap à angularjs compatible bootstrap.

Par exemple - http://mgcrea.github.io/angular-strap/# / NAVBAR


3 commentaires

Convenée longue course à long terme Cela ressemble à une bonne chose à utiliser. J'apprends toujours des choses angulaires, alors faites quelque chose par moi-même, je comprends donc que le cadre est important pour moi.


Dans ce cas, n'utilisez pas de bootstrap. Bootstrap et angular ne joueront pas toujours bien si vous utilisez la version régulière et la plupart des trucs bootstrap peuvent déjà être effectués en angulaire. Cela ne veut pas dire que l'on ne devrait jamais utiliser bootrap avec angulaire bien sûr, mais si vous souhaitez apprendre que vous devriez apprendre à faire les choses de manière angulaire avant d'introduire Bootstrap.


Bon point. Je suis tombé sur ceci lors de la recherche de ma propre solution mais je voulais utiliser angulaire-ui-routeur . Fwiw, j'ai créé une directive de base qui utilise un routeur angulaire-ui et peu d'autre pour vous donner le contrôle de votre Bootstrap Navar: CR-BOOTSTRAP-NAVARBAR



1
votes

Je sais que le poteau est un peu vieux, mais peut aider quelqu'un d'autre menu NAVBAR

C'est une barre NAV avec un menu déroulant implémenté dans Angularjs , Boostrap CSS et UI angular. Le menu déroulant est créé par appel récursif dans une directive personnalisée.

l'index.html: xxx

Le script.js: xxx

et enfin les deux modèles: xxx p> J'espère que ça vous aide.


0 commentaires