angularjs – Angular Laravel UI-Router问题

发布时间：2020-12-17 17:14:08 所属栏目：安全来源：网络整理

导读：我正在使用AngularJS,Laravel和UI-Router创建SPA.在Laravel routes.php文件中,我有一个单独的路由’/’来加载index.php,这是我所有的依赖项都包含在哪里以及angular被引导的地方.作为角度根镜的孩子,我有一个带有“ui-view”属性的div.这个div是使用UI-Route

我正在使用AngularJS,Laravel和UI-Router创建SPA.在Laravel routes.php文件中,我有一个单独的路由’/’来加载index.php,这是我所有的依赖项都包含在哪里以及angular被引导的地方.作为角度根镜的孩子,我有一个带有“ui-view”属性的div.这个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'
    });
}]);

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

但是当我加载“项目”状态时,它工作正常.此外,通过测试我意识到,如果我将“projects.create”状态URL更改为“/ createproject”,而不是“/ projects / create”,这就解决了问题.

我假设在尝试加载“js / app.js”和其他本地依赖项时这是一个路径干扰问题.我将如何解决此问题,以便应用依赖关系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');
});

解决方法

您的projects.create状态映射到templates / projects / create.html url.

看起来你没有那个模板可用,所以它落入了你的全部App :: missing,它再次呈现整个页面.

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

只需确保在指定的URL上有该模板文件,一切都会好的.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!