Menu
I encountered a problem where my AngularJS webpages don't load properly sometimes. When this happens, the code in the corresponding controller does not run. It only happens rarely. I suspect that this could be due to the loading order of AngularJS files. Perhaps there are other possible causes. Please alert me if you can think of any. Below is my code showing the loading order of the html page;
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="vendor/dialogs.min.js" type="text/javascript"></script>
<script src="lib/angular/angular-sanitize.min.js"></script>
<script src="vendor/angular-translate.min.js"></script>
<link href="vendor/dialogs.css" rel="stylesheet">
Is there anything wrong?
626
ts file is loaded first, here we bootstrap the root module i.e. app. module. ts. In this module, we specify a component as the bootstrap component and tell angular to load this component and all its dependencies at start up and register it's selector app-root.
In order to run any angular component, it has to go through one cycle of events. This lifecycle of events is called Angular Lifecycle Hooks because it hooks up each data flow of the component. The Angular component lifecycle starts with the initialization of components and ends at the destruction of components.
AngularJS starts automatically when the web page has loaded. The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application. The ng-model directive binds the value of the input field to the application variable name.
AngularJS Directives The ng-app directive initializes an AngularJS application. The ng-init directive initializes application data. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
First Load angular library:
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-route.min.js"></script>
<script src="vendor/dialogs.min.js" type="text/javascript"></script>
<script src="lib/angular/angular-sanitize.min.js"></script>
<script src="vendor/angular-translate.min.js"></script>
After that load your controllers, services, filters, directives
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
Finally, now you can load your app init file
<script src="js/app.js"></script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
