所有脚本加载完成后如何初始化角度

Question

Hi I am new to angular and html programming. I am trying to initialize my angular app with the command in my html document.

<script type="text/javascript">
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['MyApp']);
    });
</script>

This works locally when I dont have to download scripts from a separate server but when I do it breaks and I get the error.

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=MyApp&p1…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A381)

I am assuming this is because the scripts have not loaded before executing this call. So I am wondering if there is any command that I can use to run my bootstrap code in when all of the scripts have been loaded. Window.onload or $(document).ready does not work for me :(

Here is my module declaration

angular.module("myApp", ["ui.router"])
    .config(["$locationProvider", ($locationProvider: any) => {
        $locationProvider.html5Mode(false).hashPrefix('!');
    }])
    .config(["$stateProvider", "$urlRouterProvider",
        ($stateProvider: any,
            $routeProvider:any
            ) => {
            $stateProvider
                .state("myapp",
                {
                    url: '/:path',
                    templateUrl: (stateParams) => {
                        return '/Templates?path=' + stateParams.path;
                    },
                })
        }])
    .run(["$rootScope", "$state", ($rootScope, $state) => {
        $rootScope.$on("$stateChangeStart", (event, next, current) => {
        })
        $rootScope.$on("$stateChangeSuccess", function (ev, to, toParams, from, fromParams) {
        });
        $state.go("myapp", { path: 'MyApp.Session' });

    }]);

Any help would be appreciated.

Thanks

Answer 1

You need to define your module before your bootstrap:

<script type="text/javascript">
    var LeadInsightsApp = angular.module('LeadInsightsApp',[]);
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['LeadInsightsApp']);
    });
</script>