Question

我正在使用AngularJS，Laravel和UI-Router创建SPA。在Laravel routes.php文件中，我有一条路线＆＃39; /＆＃39;加载index.php，这是我的所有依赖项包含在哪里以及angular引导的位置。作为角度根镜的孩子，我有一个带有＆＃34; ui-view＆＃34;属性。这个div是使用UI-Router加载我的Angular模板的地方。

在我的角度模块.config中，我有几个UI-Router状态设置：

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){

// Routes config using ui-router

$urlRouterProvider.otherwise('/');

$stateProvider
    .state('home', 
    {
        url: '/home',
        templateUrl: 'templates/home.html',
        controller: 'HomeController'
    })

    .state('projects', 
    {
        url: '/projects',
        templateUrl: 'templates/projects/index.html',
        controller: 'ProjectController'
    })
    .state('projects.create', 
    {
        url: '/projects/create',
        templateUrl: 'templates/projects/create.html',
        controller: 'ProjectController'
    });
}]);

我遇到的问题是当我加载第三个状态＆＃34; projects.create＆＃34;时，浏览器不会使用我的js / app.js主模块引导角度。它会触发错误：＆＃34;警告：试图加载角度不止一次＆＃34;。

但是当我加载＆＃34;项目＆＃34;州。此外，通过测试我意识到，如果我改变我的＆＃34; projects.create＆＃34;状态URL到＆＃34; / createproject＆＃34;，而不是＆＃34; / projects / create＆＃34;，这解决了这个问题。

我认为在尝试加载＆＃34; js / app.js＆＃34;时，这是一个路径干扰问题。和其他本地依赖项。我将如何解决此问题，以便应用程序依赖关系URL对UI路由器状态是动态的？

的index.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>AngularJS App</title>

        <!--css-->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>

</head>

<body ng-app="scynergyApp">
    <div class="container">
        <div ui-view>

        </div>


    </div>
</body>
<!--js-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>

    <!--angular core-->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
    <script src="/js/angular-sanitize.js"></script>
    <script src="/js/underscore.js"></script>
    <script src="/js/app.js"></script>


        <!--angular controllers-->
        <script src="/js/controllers/HomeController.js"></script>
        <script src="/js/controllers/ProjectController.js"></script>
</html>

routes.php文件

<?php
// =============================================
// HOME PAGE ===================================
// =============================================
Route::get('/', function(){
return View::make('index');
});

// =============================================
// API ROUTES ==================================
// =============================================
Route::group(array('prefix'=>'/api'),function(){
    Route::post('login','AuthController@Login');
    Route::get('logout','AuthController@Logout');

    Route::resource('projects','ProjectsController', array('except' => array('create', 'edit',       'update')));
});

// =============================================
// CATCH ALL ROUTE =============================
// =============================================
// all routes that are not home or api will be redirected to the frontend
// this allows angular to route them
App::missing(function($exception)
{
    return View::make('index');
});

Answer 1

您的projects.create州映射到templates/projects/create.html网址。

您似乎没有可用的模板，因此它会落入您的全部App::missing，这会再次呈现整个页面。

再次加载页面时，您还会再次运行其所有链接资源，因此您尝试再次运行角度。 Angular检测到这一点，然后吠叫。

只需确保您在指定的网址上有该模板文件，一切都会好的。

Angular + Laravel + UI-Router问题

1 个答案: