Question

目前我今天在我的index.html文件中使用ng-template，

<script type="text/ng-template" id="/home.html">
  //html here...
</script>

我也使用ui.router，看起来像这样，

             $stateProvider
                .state('home', {
                    url: '/home',
                    templateUrl: '/home.html',
                    controller: 'mainController',
                    resolve: {
                        postPromise: ['serv', function(serv) {
                            return serv.getAll();
                        }]
                    }
                });

这很好用。问题是我想扩展我的应用程序并了解更多关于最佳实践以及如何实际使用角度。我的背景是.NET MVC，其中有master / view / partial视图。所以我尝试使用angular来做同样的方法，但在我的情况下，我将index.html作为主人，如果你愿意，home.html将是视图或部分。赞美我得到的所有意见。

Answer 1

这确实是一种相同的方法 - 至少是角度为1.x（尚未钻研到2）。：）

当我调查这个时，我遇到的两个不错的消息来源是：

John Papa Angular style guide
Best practices on structuring Angular app

他们应该指向正确的方向。

Answer 2

您可以考虑在index.html文件中使用<ng-view>。

的index.html

<body>

        <ng-include src="'app/views/structure/navigation.tpl.html'"></ng-include>

        <ng-view autoscroll="true"></ng-view>

        <ng-include src="'app/views/structure/footer.tpl.html'"></ng-include >

        <!--Scripts-->
        <!--<script src="bower_components/masonry/dist/masonry.pkgd.min.js"></script>-->
        <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>-->
        <script src="assets/libs/flexslider/jquery.flexslider.js"></script>
        <script src="assets/libs/masonry/masonry.pkgd.min.js"></script>
        <script src="assets/libs/imagesloaded/imagesloaded.pkgd.min.js"></script>
        <script src="assets/libs/angular/angular.min.js"></script>
</body>

在您的模块中，您可以看起来像：

var app = angular.module('myApp', ['ngRoute', 'ngSanitize', 'ui.bootstrap']);

上述内容自然是另一种文件。

现在您可以拥有app.routes文件：

app.config(function($routeProvider, $locationProvider){
    $routeProvider.when('/',{
        templateUrl: "app/views/misc/home.tpl.html",
        controller: "HomeController"
    })
    .when('/about',{
        templateUrl: "app/views/misc/about.tpl.html",
        controller: "AboutController"
    })
   .when('/hobbies',{
         templateUrl: "app/views/pages/hobbies.html",
         controller: "HobbiesController"
   }).otherwise({redirectTo:'/'});

    $locationProvider.html5Mode(true);

现在你需要一个控制器：

    app.controller('HomeController', function($scope, ROOT) {
    $scope.Root = ROOT;
    console.log("In Home Controller")
    $scope.top = {

        backstretch: [
            ROOT+'/assets/img/big/big-1.jpg',
            ROOT+'/assets/img/big/big-2.jpg',
            ROOT+'/assets/img/big/big-4.jpg'
        ]
    };
});

现在，因为我使用了HomeController，我将在本例中使用它。

我的路线文件说when('/')转到文件路径app/views/misc/home.tpl.html，控制器是HomeController。由于我在app.module文件中使用var app = angular.module，我只能写app.controller('HomeController)，现在所有内容都已连接起来。

在home.tpl.html我需要做的就是放置<div>个标签。

根据项目的大小将描绘设计。项目越大，您想要的模块越多。

带有ui.router的ng-template，单独的文件

2 个答案: