2015-04-22 2 views
0

Является новым для Angular JS и пытается реализовать угловые шаблоны. Я успешно объединил все htmls в один JS-файл.

Мой app.js файл:

angular.module('LoginApp').config(function ($routeProvider 
    .when('/login', { 
    templateUrl: '/views/common/login.html', 
    controller: 'LoginCtrl' 
    }) 
    .otherwise({ 
    redirectTo: '/account' 
    }); 
); 

Так отсюда, если я загрузить http://localhost:50/login, я могу увидеть страницу входа на экране и перешедших из /views/common/login.html пути.

Я пытаюсь реализовать то же самое с помощью $ templateCache. У меня есть все htmls, объединенные в JS-файле. Мне нужно отсылать шаблоны из общего JS-файла. Я включил шаблон JS файл в index.html

каскадных JS файл:

angular.module('LoginApp').run(["$templateCache", function($templateCache)  { 
    $templateCache.put("../app/views/commmon/login.html", 
    // contents for login.html ... 
); 
}]); 

Мое Gruntfile

ngtemplates: { 
    myapp: { 
     options: { 
      base: "web", 
      module: "LoginApp", 
     }, 
     src: ['app/views/common/*.html'], 
     dest: 'dist/views/html.js' 
    } 
}, 

Как я могу получить доступ к/см шаблонов от $ templateCache? TIA

ответ

1

Вам не нужно использовать $ templateCache вручную. Если ваш шаблон кэширован, Angular загрузит его автоматически. templateUrl должен быть идентификатором вашего кэшированного шаблона, сгенерированного Grunt.

Смотреть эту Plunker http://plnkr.co/edit/132S5UMLnBzzGGGI85l3

index.html

<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.js"></script> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <div ng-view></div> 
    <script type="text/ng-template" id="login.html"> 
     login.html 
    </script> 
    <script type="text/ng-template" id="account.html"> 
     account.html 
    </script> 
    </body> 
</html> 

script.js

'use strict'; 

angular.module('sandbox', [ 
    'ngRoute' 
]). 
config(['$routeProvider', function($routeProvider) { 
    $routeProvider 
    .when('/login', { 
    templateUrl: 'login.html' 
    }) 
    .otherwise({ 
    redirectTo: '/login' 
    }); 
}]); 
+0

спасибо за ответ. Но здесь я пытаюсь получить доступ к шаблону из общего JS-файла. И есть ли возможность включить идентификатор для каждого шаблона, когда concat происходит из Grunt? – LS2

+0

Как вы можете видеть в своем объединенном JS-файле, ваш идентификатор «../app/views/commmon/login.html», вам просто нужно использовать его в свойстве templateUrl. –

+0

Спасибо Ксавье за ​​ваш своевременный ответ. Отлично работает. – LS2

Смежные вопросы