Angular / Laravel视图和路由

时间:2014-09-13 09:11:55

标签: javascript angularjs laravel

我正在开始一个新项目并使用Angular。我是Angular的新手并感谢任何帮助:

我已经创建了一个新项目并将这两行添加到我的routes.php文件中:

Blade::setContentTags('<%', '%>');
Blade::setEscapedContentTags('<%%', '%%>');

然后我有一条路线:

Route::get('/', function()
{
    return View::make('layouts.app');
});

该视图中包含此HTML:

<!doctype html>
<html ng-app="curveApp">
    <head>
        <title>Curve</title>
        <link rel="stylesheet" type="text/css" href="{{ asset('assets/bootstrap/dist/css/bootstrap.css') }}">
        <script src="{{ asset('assets/jquery/dist/jquery.min.js') }}"></script>
        <script src="{{ asset('assets/bootstrap/dist/js/bootstrap.min.js') }}"></script>
        <script src="{{ asset('assets/angular/angular.min.js') }}"></script>
        <script src="{{ asset('js/app.js') }}"></script>
    </head>

    <body>

        @include('home')

    </body>
</html>

home.php文件中包含以下HTML:

<div ng-view>
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle Navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">Curve</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/register">Sign Up</a></li>
                    <li><a href="/login">Sign In</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

在我的文档root / public中,我有一个带有控制器,服务和部分的js文件夹。然后我有两个文件app.js和config.js。

App.js:

var curveApp = angular.module('curveApp', [
    'ngRoute',
    'curveControllers'
]);

Config.js

curveApp.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
            when('/register', {
                templateUrl: 'partials/register.html',
                controller: 'RegisterCtrl'
            });
    }
]);

如何在切换HTML视图时根据配置文件使用Angular使用project / public / js / partials中的HTML文件而不刷新页面?

1 个答案:

答案 0 :(得分:0)

我认为您的href属性必须是href='#/register'而不是href='/register'