Question

我有一个在快速和角度上运行的应用程序。我想切换到ui-router以利用多个视图，但它似乎没有用。

app.js

app.use(express.static(path.join(__dirname, 'public')));

app.get('/',routes.index);
app.get('/partials/:name', routes.partials);
app.get('/partials/about/:name', aboutRoutes.partials);
app.get('/about', aboutRoutes.us);
app.get('/about/:name', aboutRoutes.main);

//authentication
//app.get('/app', ensureAuthenticated ,appRoutes.app);
app.get('/app',appRoutes.app);
app.get('/app/:name',appRoutes.main);
app.get('/partials/app/:name', appRoutes.partials);
app.use('*',routes.index)

template.hjs

<html lang="en" ng-app="myApp">

<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <link rel="stylesheet" href="/stylesheets/bootstrap.css" />
    <link rel="stylesheet" href="/stylesheets/bootstrapValidator.min.css" />
    <link rel="stylesheet" href="/fonts/font-awesome-4.0.3/css/font-awesome.min.css" />
    <link rel="stylesheet" href="/stylesheets/screen.css" />
    <!-- Style for Newsticker Begin-->
    <link rel="stylesheet" href="/stylesheets/newsticker.css" />
    <link rel="stylesheet" href="/stylesheets/prism.css" />
    <link rel="stylesheet" href="/stylesheets/teamBio.css" />
    <!-- Style for Newsticker End-->
</head>
<body>
    <div >
        {{> header}}
        <div ui-view>{{> maincontent}}</div>
        {{> footer}}
        <script src="/js/jquery.min.js"></script>
        <script src="/bower_components/angular/angular.js"></script>
        <script src="/js/front.js"></script>
        <script src="/js/controllers.js"></script>
        <script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
        <script src="/js/bootstrap.min.js"></script>
        <script src="/js/bootstrapValidator.js"></script>
        <script src="/js/signup-init.js"></script>
        <!-- Scripts for NEWSTICKER Begin -->
        <script src="/js/prism.js"></script>
        <script src="/js/jquery.newsTicker.js"></script>
        <script src="/js/init_newsticker.js"></script>
        <!-- Scripts for NEWSTICKER End -->
        {{> signupModal}}
    </div>
</body>

</html>

front.js

var myApp = angular.module('myApp', [
    'myApp.controllers',
    'ui.router'
])

myApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {

    $locationProvider.html5Mode(true);

    $urlRouterProvider.otherwise({
        redirectTo: '/'
    });

    $stateProvider.
        state('', {
            url: '/',
            templateUrl: '/partials/homepage',
            controller: 'MyCtrl1'
        }).
        state('about.detail', {
            url: '/about/:id',
            templateUrl: function(params){
                return '/partials/about/'+params.id
            },
            controller: 'MyCtrl1'
        }).
        state('funnel', {
            url: '/funnel',
            templateUrl: '/partials/funnel',
            controller: 'MyCtrl2'
        });

});

这对ngRoute工作得很好，但我切换了所以我可以在我再次使用基础后分配视图。我做错了什么？

我的主页上还有一个链接

<div class="col-lg-3 text-center">
                        <a ui-sref="funnel" class="btn btn-warning">TestView</a>
                    </div>

什么都不做

Answer 1

看起来问题可能出在$urlRouterProvider.otherwise({redirectTo: '/'});。尝试将其更改为$urlRouterProvider.otherwise('/');，如文档https://github.com/angular-ui/ui-router/wiki/URL-Routing#otherwise-for-invalid-routes

中所示

ngRoute工作但我想切换到ui-router ....现在我的应用似乎没有初始化

1 个答案: