ng模板，带有ui.router，单独的文件

ng-template with ui.router, separate files

本文关键字：单独 router 文件 ui 模板 带有 ng      更新时间：2023-11-02

目前我正在像今天这样在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();
                        }]
                    }
                });

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

这里确实是一种类似的方法——至少在angular 1.x中是这样（尚未深入研究2）。：）

当我调查这件事时，我遇到了两个很好的消息来源：

  1. John Papa Angular风格指南
  2. 构建Angular应用程序的最佳实践

它们应该一起指向正确的方向。

您可以考虑在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>标签。

将根据项目的规模来描述设计。项目越大，你就越想让它模块化。

相关文章：