Question

我从一个空的body元素开始，然后动态添加包含ng-controller属性的HTML。我想在将html添加到正文后引导Angular应用程序。这适用于角度1.0但不是1.3.8。有什么想法吗？

require(['angular'], function(angular){
  'use strict';


  buildDom();

  function buildDom(){
    $('body').append('<div role="tabpanel" ng-controller="WelcomeController"><span>{{greeting}}</span></div>');
  }



  var app = angular.module('demo', []);

  app.controller('WelcomeController', function($scope) {
        $scope.greeting = 'Welcome!';
  });

  angular.element(document).ready(function() {
      angular.bootstrap(document, ["demo"]);
  });

});

最终结果 - 我看到{{greeting}}而不是欢迎！

Answer 1

引导angularjs和requirejs的正确方法类似于：

'use strict';

require.config({    
    baseUrl: 'js/',
    deps: ['jquery'],

    paths: {
        jquery: '../lib/jquery.min',
        angular: '../lib/angular.min'
    },  

    shim: {     
        'angular': {
            'deps': ['jquery'],
            'exports': 'angular'
        }
    },  
    priority: [
        'angular'
    ]

});

//https://docs.angularjs.org/guide/bootstrap
window.name = 'NG_DEFER_BOOTSTRAP!';

require([
    'angular',
    'app'
], function(angular, app) {
    'use strict';
    var $html = angular.element(document.getElementsByTagName('html')[0]);  
    angular.element().ready(function() {                
        angular.resumeBootstrap([app['name']]);
    });
});

现在你应该有一个名为app.js的单独文件：

define([
    'angular',
    'services',
    'directives',
    'controllers'
    ], function (angular) {
        'use strict';

        return angular.module('myapp', [
            'myapp.services',
            'myapp.directives',
            'myapp.controllers'
        ]);     
});

然后你应该在每个文件（services.js，directives.js和controllers.js）上声明每个角度组件。

手动引导Angular - 不适用于1.3.8

1 个答案: