AngularJS is a framework for creating dynamic web applications. It supports dynamic binding for data manipulation and lets you create templates by using directives, form validations, routing and Dependency Injection.
To avoid these kind of issues, we can use RequireJS module loader framework, which works well for almost all supported browsers. Today we will setup our code environment to work with AngularJS and RequireJS.
I will show you step by step process with code, how you can use RequireJS with AngularJS.
Now I will start describing the steps to create application with angular and require. When we are using RequireJS for module loading, we need to configure RequireJS first.
We can configure require with the help of the function require.config .
paths: you can provide module location and it’s corresponding module name.
shim: you can provide module dependency.
deps: will load the required module when application starts.
priority: you can set important module which should load first before any other module for example JQuery should load first.
After RequireJS configuration, we need to configure AngularJS so that we can use it in the web application. First we need to provide module name for AnuglarJS application which will be used in whole application.
Use define in order to define modules which can be used by other parts of your application.
After AngularJS configuration, it is time to bootstrap your application or initialize your AngularJS application. Angular.bootstrap lets you manually start your application, which gives you more control over your application like how to initialize modules and events before your application starts.
For example in our case we are using domReady, our modules will not execute until it is safe to interact with DOM.
It’s done, our configuration part is completed for AngularJS and RequireJS. Now we will create the modules for the application. For that purpose, I have created separate directory (SAR) which will contain application modules like Homepage module.
This file is the root of this module, this file will call it’s sub modules like config, controller and views. It is better to separate our modules on how they are functionally dependent with each other.
Next module is configuration module for homepage.
In this module, we will provide state (routing) configuration of our homepage.
We can configure with $stateProvider.state function. $stateProvider.state, you can provide name to the state, url for that state, templateUrl html page to be called and you can provide controller as well.