NG-模板，ui.router，單獨的文件

在我使用的是在今天這個樣子我index.html文件ng-template的那一刻，NG-模板，ui.router，單獨的文件

<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，其中有主視圖/局部視圖。所以我試圖在這裏用角度做同樣的方法，但在我的情況下，我有index.html作爲主，home.html將是視圖或部分，如果你願意。 Appriciate我得到的所有輸入。

來源

2016-03-31 Dejan.S

如果你將'views'分割成不同的'.tpl.html'文件和'templateUrl：'path/to/view.tpl.html'' – Daniel

這裏確實是一個相同的方法 - 至少在角度1.x（還沒有研究到2）。 :)

兩個漂亮的來源我遇到回來時，我一直在尋找這個是：

他們一起應指向正確的方向。

來源

2016-03-31 15:20:57 st2rseeker

-1

你可能會考慮在你的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>標籤。

根據項目的大小將描述設計。項目越大，您想要製作的模塊就越多。

來源

2016-03-31 15:33:52 Drew1208

可能會更好，不是我真正想要的，我是與'ui.route'一起工作 –

NG-模板，ui.router，單獨的文件

回答

相關問題