简体   繁体   English

Angular / Laravel视图和路由

[英]Angular/Laravel views and routing

I'm starting a new project and using Angular. 我正在开始一个新项目并使用Angular。 I'm new to Angular and appreciate any help: 我是Angular的新手,感谢您的帮助:

I've created a new project and added these two lines to my routes.php file: 我创建了一个新项目,并将这两行添加到我的routes.php文件中:

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

I then have a route: 然后我有一条路线:

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

That view has this HTML in it: 该视图中包含以下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>

The home.php file has the below HTML in it: 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>

Inside of my document root/public I have a js folder with controllers, services, and partials. 在我的文件根目录/公共目录中,我有一个包含控制器,服务和局部控件的js文件夹。 I then have two files app.js and config.js. 然后,我有两个文件app.js和config.js。

App.js: App.js:

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

Config.js Config.js

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

How can I have Angular use the HTML files from project/public/js/partials according to the config file without refreshing the page when switching the HTML view? 切换HTML视图时,如何使Angular根据配置文件使用project / public / js / partials中的HTML文件而不刷新页面?

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM