I tried searching for this on various threads, but I can't conclusively understand this.
test.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',
{
controller:'SimpleController1',
templateUrl: 'partials/1.html'
})
.when('/xyz',
{
controller:'SimpleController1, SimpleController2',
templateUrl:'partials/2.html'
})
.otherwise({ redirectTo: '/'});
}]);
I tried doing the above snippet, but it's not working. Can I do something like this? If yes, then what is it that I'm doing wrong here?
An AngularJS application can contain one or more controllers as needed, in real application a good approach is to create a new controller for every significant view within the application.
Routing is allows us create Single Page Applications.To do this, we use ng-view and ng-template directives, and $routeProvider services. We use $routeProvider to configure the routes.
Then you must add the ngRoute as a dependency in the application module: var app = angular. module("myApp", ["ngRoute"]); Now your application has access to the route module, which provides the $routeProvider .
Routing in AngularJS is used when the user wants to navigate to different pages in an application but still wants it to be a single page application. AngularJS routes enable the user to create different URLs for different content in an application.
$routeProvider is a simple API which which accepts either when () or otherwise () method. We need to install the ngRoute module. $routeProvider is a function under config (mainApp module) using the key as ‘$routeProvider’. $routeProvider.when defines the URL “/addStudent”.
Routing is used to present different views to the user on the same web page. This is basically the concept used in Single page applications which are implemented for almost all modern day web applications A default route can be set-up for angular.JS routing.
Accessing parameters from the route. Angular also provides the functionality to provide parameters during routing. The parameters are added to the end of the route in the URL, for example, http://guru99/index.html#/Angular/1. The # symbol is the separator between the main application URL and the route.
The ngRoute module routes your application to different pages without reloading the entire application. What do I Need? To make your applications ready for routing, you must include the AngularJS Route module: Then you must add the ngRoute as a dependency in the application module:
Only one controller is allowed and will be assigned to the loading template as the controller in ng-view
. No need to define ng-controller
in the template for a main controller.
If you need to define multiple controllers I suggest you define one main/parent controller and use that in the routeProvider
and then have others already in the template using the ng-controller
directive.
or...
Check into using Angular UI's UI-Router : http://angular-ui.github.io/ which is a much more versatile router.
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