Angular-Meteor - 如何在基于包的设计中包含 ng 模板？

Posted 2023-03-08

【中文标题】Angular-Meteor - 如何在基于包的设计中包含 ng 模板？

【英文标题】：Angular-Meteor - How can I include ng template in package-based design?

【发布时间】：2015-11-19 11:05:24

【问题描述】：

我有一个 Angular-Meteor 应用程序正在运行。我想将 Angular 模板和关联的控制器打包到 Meteor 包中，并通过添加该包将这些模板注入我的主应用程序中。

什么是最好的方法？

2015-08-26 更新 - 我想出了如何添加模板，如下所述。但是如何让 Meteor 包将模板的 Angular 控制器注入到基础应用程序中呢？

一个关键的搭配是 Angular UI-router。

我有一个基础应用程序，其中包含名为 packageprefix:packagename 的包。在这个包中，我的代码位于包文件夹的根目录中： myPackagedPage.ng.html - Angular HTML 模板 myPackagedPage.js - 关联的 Angular 控制器

从我的主应用程序中，我尝试像这样创建到我的 Angular 模板的路由：

angular.module('parentModule',[
    'angular-meteor',
    'ui.router',
    'angularify.semantic.sidebar'
])

.config(['$urlRouterProvider', '$stateProvider', '$locationProvider',
function($urlRouterProvider, $stateProvider, $locationProvider)
    console.log("app.js config!");
    $locationProvider.html5Mode(true);

    $stateProvider
        .state('home', 
            url: '/',
            templateUrl: 'client/views/home/home.ng.html',
            controller: 'HomeCtrl'
        )

        .state('myPackagedPage', 
            url: '/myPackagedPage',
            templateUrl: 'packageprefix_packagename/myPackagedPage.ng.html',
            controller: 'MyPackagedPageCtrl'
        )
    ;

    $urlRouterProvider.otherwise('/');

])

应用程序成功找到 myPackagedPage.ng.html 文件并呈现它。但是如何添加控制器呢？

我尝试将它添加到我的包中，但没有调用控制器函数。

console.log("myPackagedPage.js loaded");
angular.module('parentModule')

.controller('MyPackagedPageCtrl', ['$scope',
    function($scope)
        console.log("MyPackagedPageCtrl");
    ])
;

我收到一个错误：

Argument 'MyPackagedPageCtrl' is not a function, got undefined

【参考方案1】：

我现在有这个工作。这是对我有用的方法，将 Meteor 包中的 Angular Controller + 模板注入到包含的应用程序中。

在我的 package.js 中，我有这个

Package.onUse(function(api) 
    api.versionsFrom('1.1.0.3');
    api.use('angular:angular@1.4.4', 'client');
    api.use("urigo:angular@0.9.3", 'client');
    api.use("session@1.1.0", 'client');

    //api.use('angularui:angular-ui-router@0.2.15', 'client');
    api.addFiles('interests.js', 'client');
    api.addFiles('interests.ng.html', 'client');

    api.export("InterestsCtrl", "client")
);

请注意，您必须导出控制器，以便父应用程序可以访问它。

在我的名为 ramshackle:bigd-interests 的包中，我在根级别有以下文件：package.js、interests.ng.html 和 interests.js。 interests.js 将 Angular 控制器、到模板的 Anguilar UI-router 路由和侧边栏链接注入到父应用程序中。它通过使用 Meteor Session 来实现这一点。我使用了其他方法来做到这一点，但 Session 是唯一有效的方法。请注意正确确定会话变量名称的范围。

//add controllers
var controllers = Session.get("BIGD.controllers");
if (!controllers) controllers = ;

var interestsCtrlSpec = "'$scope', InterestsCtrl";

InterestsCtrl = function($scope)
    console.log("InterestsCtrl running");
;
controllers.InterestsCtrl = interestsCtrlSpec;
Session.set("BIGD.controllers", controllers);

//add routes
var routes = Session.get("BIGD.routes");
if (!routes) routes = ;
routes.interests = 
    url: '/interests',
    templateUrl: 'ramshackle_bigd-interests_interests.ng.html',
    controller: 'InterestsCtrl'
;
Session.set("BIGD.routes", routes);

//add sidebar links
//the key determines sorting order
var sidebar = Session.get("BIGD.sidebar");
if (!sidebar) sidebar = ;
sidebar["interests"] = 
    url: '/interests',
    templateUrl: 'ramshackle_bigd-interests_interests.ng.html',
    controller: 'InterestsCtrl',
    rank: 5
;
Session.set("BIGD.sidebar", sidebar);

var interestsItem = label: 'Interests', link: '/interests', icon: "rocket";

在我的父应用程序的 app.js 中，我从会话中动态加载控制器和路由，如下所示：

angular.module('bigdam',[
    'angular-meteor',
    'ui.router',
    'angularify.semantic.sidebar',
    'nvd3',
    'leaflet-directive',
    'ui.router.history'
])

    .config(['$urlRouterProvider', '$stateProvider', '$locationProvider',
    function($urlRouterProvider, $stateProvider, $locationProvider)
        //console.log("app.js config!");
        $locationProvider.html5Mode(true);

        //add a static state
        $stateProvider
            .state('home', 
                url: '/',
                templateUrl: 'client/views/home/home.ng.html',
                controller: 'HomeCtrl'
            );

        //add the dynamic routes/states from other Meteor packages
        for (var stateId in routes) 
            var route = routes[stateId];
            $stateProvider
                .state(stateId, route);
        

        $urlRouterProvider.otherwise('/');
    ])
;

//Declare the controllers from plugins
for (var controllerId in controllers) 
    var controllerSpec = controllers[controllerId];
    var controllerSpecArray = eval("[" + controllerSpec + "]")
    angular.module('bigdam').controller(controllerId, controllerSpecArray);

所以现在，当我创建一个新的 Meteor 包并遵循上述约定时，它的控制器、路由和侧边栏链接会被加载到主应用程序中。