使用 angularjs 和 Bootstrap 导航到其他页面 3

Question

我现在正在为我的新 Web 应用程序学习 angularjs 和 bootstrap。我想从一页导航到另一页，我已经相应地编写了脚本。但它不起作用。你们会建议我最好的方法吗？

var myDemoApp = angular.module('myDemoApp', ['ui.router']);

    myDemoApp.config(['$stateProvider', function ($stateProvider)
        {
          var home=
          { 
            url: '/home',
            templateUrl: 'pages/Home.html',
          },

          gallery=
          {
            url: '/gallery',
            templateUrl: 'pages/gallery.html',
          },

          logout=
          {
            url: '/logout',
            templateUrl: 'pages/login (2).html',
          };


    $stateProvider

       .state('home', home)

       .state('gallery', gallery)

       .state('logout', logout);

}]);

这是我的脚本。有什么错误吗？

Answer 1

有a working plunker

上面的解决方案稍作调整，它正在运行：

var app = angular
  .module('myDemoApp', [
    'ui.router'
  ])
  .config(['$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {

      $urlRouterProvider.otherwise('/home');

      var home = {
        url: '/home',
        templateUrl: 'pages/Home.html',
      },

        gallery = {
          url: '/gallery',
          templateUrl: 'pages/gallery.html',
        },

        logout = {
          url: '/logout',
          templateUrl: 'pages/login.html',
        };


     $stateProvider    
      .state('home', home)    
      .state('gallery', gallery)    
      .state('logout', logout);

    }
  ])

所以，我们可以看到，有新的默认导航：

$urlRouterProvider.otherwise('/home');

并且还更改了格式不太好注销模板名称：

templateUrl: 'pages/login.html',

检查一下here

使用 angularjs 和 Bootstrap 导航到其他页面 3

Navigating to other page using angularjs with Bootstrap 3

angularjs

twitter-bootstrap-3

angular-ui-router