I have an angularjs SPA application with an index.html page as the main template and the rest of the views are loaded as subviews in an ng-view tag. I'm using a twitter bootstrap template for the site so the template has a login page thats different from the rest of the pages. Is there a way to have multiple main template pages, one for the login page and one for everything else? I've been trying to figure out how to specify a different page in the route provider but I haven't been able to figure out how to specify a page rather than a partial view as the templateURL or if thats even possible.
I'm new to angularjs so i'm not sure what the best way to handle this situation.
Thanks
You are on the right track with RouteProvider
angular.module('mymodule', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider.
when('/index.html/page1/', {templateUrl : './templates/template1.html'}).
when('/index.html/page2/', {templateUrl : './templates/template2.html'}).
otherwise({redirectTo : '/index.html/page1/'});
});
You would have to do this using ng-include. Your main view should look like
<body ng-app>
<div id='topNav' ng-include='templateUrl' ng-controller='topNavController'></div>
<div id='left' ng-include='templateUrl' ng-controller='leftNavController'></div>
<div ng-view>
</body>
The templateUrl can be from server or preloaded onto the client using <script> tag.
The javascript would look like.
function topNavController($scope, $route, $location) {
//Check using $route or $location if login view is loaded
// if yes $scope.templateUrl='loginTopNavTemplateUrl'
//else $scope.templateUrl='mainNavTemplateUrl'
}
Check documentation for ng-include, $route and $location to see how how these elements work.
Related
I have been working a bit with Angular and I tried to implement simple routing.
I have a basic HTML which contains reference to all the required scripts and a ng-view tag.
For some reason, when the page is loaded, the template isn't shown in the ng-view location. Why isn't it shown, and how to fix it?
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js"></script>
<script src="routCtrl.js"></script>
</head>
<body ng-app='ngRouteTest'>
<div ng-view></div>
</body>
and the the script file:
var ngRouteTest = angular.module('ngRouteTest',['ngRoute']);
ngRouteTest.config(function($routeProvider){
$routeProvider
.when('/',
{templateUrl : '/routView1.html'})
});
You need to redirect to that page so that routing will come to know which page to render inside ng-view directive.
There are multiple ways to do it.
Define one more otherwise to redirect to /.
$routeProvider.otherwise({redirectTo: '/'})
Add anchor to page that will redirect to /.
<body ng-app='ngRouteTest'>
Home Page
<div ng-view></div>
</body>
Having default url on page in <head> tag.
<base href="/"/>
Okay first you need to run your code from a server, so to test it locally use http-server which is really easy to prepare.
Then you will need to change your templateUrl path from:
{templateUrl : '/routView1.html'}
to:
{templateUrl : './routView1.html'}
After starting a local host and ruining the code from there it worked perfectly fine.
The issue was with the chrome related security when you make local ajax calls.
So one has this problem should do one of the following things:
1.Disable web-security in chrome.
2.Start a local host to test.
I'm trying to migrate my application from AngularJS 1.0.8 to 1.2.14 and it seems like there is some "new" URL decoding in 1.2.
I have following routing:
$routeProvider.when('/title/:simpleName/:simpleVersion', {templateUrl: 'partials/public/view/spec.html', controller: SpecificationCtrl});
$routeProvider.when('/title/:simpleName', {redirectTo: '/title/:simpleName/latest'});
And in one of my directives, I'm creating anchors like this:
link: function(scope, elem, attr) {
elem.html('...')
}
where simpleName can be some string like x/y++_test.
In Angular 1.0.8, if user clicks on such link, browser contains following URL:
.../title/x%252Fy%252B%252B_test
and everything works fine. But with Angular 1.2, browser for a second contains again the escaped form and then URL in browser changes to
.../title/x/y++_test
which is problem as it may not match my routing rules and routing parameters. When this change happens, according to Chrome Dev Tools, the page as such is not reloaded and controllers are created just once when the totally decoded URL is displayed.
Is there some new change that causes? How could I make it working the same way as in 1.0.8 ? I've searched Angular's changelog but haven't found any mention of url decoding.
Update:
I've created to Plunks with Angular 1.0.8 and 1.2.13 to demonstrate the issue (the only difference is that the link is hardcoded in HTML code instead of being generated by directive). Simply click on "here" link in the plunk and watch the displayed URL:
Plunk with Angular 1.0.8
Plunk with Angular 1.2.13
Try this:
<a ng-href="#/title/{{encodeURIComponent(simpleName)}}">...</a>
And inside the controller in case you haven't done it:
$scope.encodeURIComponent = encodeURIComponent;
I'm learning Angularjs and I have 2 templates pages - a login.html page and an index.html page.
I'm using this directive - https://github.com/pablojim/highcharts-ng to create a chart on my index.html page.
The problem i'm having, is that I don't want to have to include <script src="js/highcharts-ng.js"></script> in my login.html page because it's not used on that page, but with the code I have below, I get an error if i don't have this script included.
How can I move the 'highcharts-ng into just 1 controller rather than into my entire app?
app.js
var myezteam = angular.module('myezteam', ['highcharts-ng']); //<-- Don't want highcharts-ng here
dashboard.js
myezteam.controller('DashboardController', ['$scope', '$http', 'myezteamBase', function($scope, $http, myezteamBase) {
...
I tried this but it gives me this error: Uncaught SyntaxError: Unexpected token -
myezteam.controller('DashboardController', ['$scope', '$http', 'myezteamBase', 'highcharts-ng', function($scope, $http, myezteamBase, highcharts-ng) {
...
Simplest approach is use a different module declaration on each page with different dependencies as required
Keep in mind you need to change the way of thinking about "loading" because angular is for SPA (single page applications), you usually load all the app at once it doesn't matter if you are at login view or any other view.
I'll recommend you to check this kind of structure https://github.com/angular-app/angular-app where they have different "modules" with their own dependencies for different sections of the app, anyway the whole app gets loaded at once.
If you would prefer to have a login page that doesn't load all the app yet, maybe you could just have that page as plain html/jquery and after login, redirect to angular app.
try this method for solution Uncaught SyntaxError
myezteam.controller('DashboardController',
['$scope', '$http', 'myezteamBase', 'highcharts-ng',
function($scope, $http, myezteamBase, highcharts)
you can change name of parameter in your function when define dependency with array method
I have AngularJS setup to use HTML5 routes and it works great on urls like website.com/foo but when I create routes for sub pages, eg: website.com/foo/bar it only shows the correct page when clicking a link to it on my site. If I type the url into my browser and attempt to directly access it I get a blank page section where the ng-view content should be loading.
app.when('/promotion/events', {
templateUrl: '/assets/tpl/promotion/events/home.html',
controller: PromotionEventsCtrl
});
It appears to be a bug in Angular 1.1.5 that is effecting URL parsing in HTML5 routes. Rolling back to 1.1.4 fixes the problem.
More information here: https://github.com/angular/angular.js/issues/2833
How does angular know to make a request for the template view that contains 'ng-view' element?
If I navigate in my application say directly to
http://localhost/Categories/List/accessories
. A request is still made to '/ or the index template' as this contains the 'ng-view' element needed to render all the views.
When I navigate from the index to /Categories/List/accessories no request is made for the index again.
Below is my basic routing which has been copied in part from the Angular MVC "CookBook" example on GitHub
angular.module('myApp', ['myApp.ctrl.list'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: '/Home/Splash',
});
$routeProvider.when('/Categories/List/:slug', {
templateUrl: '/Categories/List',
controller: 'listCtrl',
});
$routeProvider.otherwise({
redirectTo: '/'
});
}]);
With your routing configuration, I believe your example url is missing a pound sign (#), so it should look like:
http://localhost/#/Categories/List/accessories
The part after the # sign is the path intended to be resolved by AngularJS (ie. the routing configuration you have defined)
When you enter the above URL into the address bar of the browser, the browser automatically looks for index.html on localhost. Most browsers, if not all, are set to look for index.html when only the domain name is present in the URL.
What about the part after the # sign? You might ask. The path after the # sign does not get sent to the server, by definition, and thus the browser could care less of what that part is consisted of.
In the second scenario you mentioned, AngularJS does not request for index.html because it's been cached the first time it was loaded and that cached copy is used.
Is your locationProvider configured for HTML5?
$locationProvider.html5Mode(true);
See Using HTML5 pushstate on angular.js