Multiple master page angularjs - javascript

I'm starting a new project and am going to be using angularjs.
The page structure is the follow:
/views
loginView.html
mainView.html
loginMaster.html
mainMaster.html
My problem is set the other master page(mainMater.html) after the login.
The routing function is follow:
mainapp.config(['$routeProvider',function($routeProvider) {
$routeProvider.when('/login', {
controller : 'loginController',
templateUrl : '/views/loginView.html'
}).when('/', {
controller : 'mainController',
templateUrl : '/views/mainView.html'
}).otherwise({
redirectTo : '/login'
});
}]);

AngularJS is great for single page applications, which means if you exit the context of javascript by loading an entirely new page, you'll have to setup the context again. I would recommend you to have just one master page (load the page from the server once and perhaps have something like:)
<html ng-app="myApp">
...
<body>
<div class="container" ng-view>
and keep changing the entire view within the ng-view context. Have the login screen, signed in experience, all of it in the same place.

Related

change ngview from within function

I am using templates to build my app. Basically have one main page, and then I am loading others pages thru it using ng-view. The href links in the index.html work fine. But I also want to be able to change ng-view within js functions as well. How is this done?
I tried to go to the red page using $location.path, but nothing seems to happen besides printing to the console. Before that i tried using $window.location.href(), which did go to the page, but dropped the index.html container, breaking the app.
edit:
As pointed out in Siddhesh's answer comments, it works if not used with $locationProvider.html5Mode(true);. But I would like to keep clean urls. So I'm looking for a way to keep it, IF that's possible.
index.html
<head>
<base href="/testing/onetest/">
<script>
app.controller('masterController',function($location){
setTimeout(change, 3000);
function change() {
console.log("changing in 3 seconds");
$location.path('/red');
}
});
</script>
</head>
<body ng-app="app" ng-controller="masterController">
Main
Red
Green<br>
<div ng-view></div>
</body>
app.js
var app = angular.module("app", ["ngRoute"]);
app.config(function($routeProvider,$locationProvider) {
$routeProvider
.when("/", {
templateUrl : "home.html",
controller : 'mainController'
})
.when("/red", {
templateUrl : "red.html"
})
.when("/green", {
templateUrl : "green.html"
});
$locationProvider.html5Mode(true);
});
For angular js version less than 1.6
$window.location.href= '#red';
For angular js version 1.6 or more
$window.location.href= '#!red';
Try this and see if it works. This might help you to change the ng-view from function. It worked for me.

Login Page without Index.html Design - ngRoute (AngularJS)

I'm using ngRoute to do the routing of my AngularJS application (myApp) but I have a problem: I don't know how to NOT APPLY my index.html design (with all my sidebars) to my login.html page, which seems to be applied by default if it is defined as a view. I want a simple design for my login.html page: only two fields to fill out, without the design of my index.html, which is applied to all the views in myApp. Thereby, I don't know how to do my routing to accomplish such task. Thank you very much.
<-- This is a sample of how I do my routing in myApp (for only one view - "/view1") -->
Sample of app.js:
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'ngResource',
'ui.bootstrap',
'ngCookies',
'myApp.view1',
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
For each view there is a .js file associated where I defined its routing and controllers. For instance, for view "/view1" - view1.js:
'use strict';
angular.module('myApp.view1', ['ngRoute', 'ngResource'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', ['$scope', function($scope) {
// something
}]);
And a sample of my index.html:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<script src="view1.js"></script>
<-- MORE SCRIPTS ARE LOADED -->
</head>
<body class="hamburg" ng-controller="MasterCtrl">
<-- SIDEBARS ARE DEFINED -->
<div id="content-wrapper">
<div class="page-content">
<!-- Main Content -->
<div class="row">
<div class="col-xs-12">
<div class="widget">
<div class="widget-body">
<div ng-view></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Given the situation above looks like you want two page layout (page design or page template), the first one is now used in index.html, and the second one you want to use in login.html which just has two fields to fill out. So angular-ui/ui-router (doc url: https://github.com/angular-ui/ui-router/wiki) could be the solution to this issue.
The idea behind that is ui-router has a very powerful tool named ui-view which you can see it as a layout or template. So when the path is on any page other than login page like /index or /home use one ui-view, and on /login page then use another different ui-view.
For a rough example:
index.html page:
<html>
<head></head>
<body>
<div ui-view="layout"></div>
</body>
</html>
I assume you will reuse the head part, so just wrap every thing from the body in the original index.html and put into the new index.html. Same to the login page login.html.
config file:
$stateProvider
.state('index', {
url: '/index',
views: {
layout: {
templateUrl: "/path/to/index.html"
}
},
controller: 'indexController'
}
.state('login', {
url: '/login',
views: {
layout: {
templateUrl: "/path/to/login.html"
}
},
controller: 'loginController'
})
So what does the code above do is very similar to what you did with $routeProvider, it defines on which url use which controller and to load which view.
Hope this can help you, if any question let me know please.
You need to create your login page as a diferente ngApp, store your sesion on the localSotarge in case of a successfull login and then redirect to you main ngApp.
In your main ngApp, validate if a session exists in the localStorage and redirecto to the loginApp if it dont.
I know it sounds a bit like overdoing stuff, but I have not found any other solution in my 3 years working with AngularJS. Now, keep in mind that this is necesary because you need to NOT TO APPLY your index.html, and the only way to do that is using another ngApp.
Routing is used for injecting views in angular SPA. What I get from from your question is you need a login dialog.
For that you may look ngDialog or uibDialog
In your case you need to load new layout. I understand, for login and for application there is mostly different layout. This operation is equal to redirecting page to new location. With new angular app and controllers for login. You can use:
$window.location.href="new/layout/template".
Read more # Angular Dev Docs.

AngularJS routing to static file

I have a simple angularjs app, with ngRoute module for routing in html5Mode.
How can I have a link to some static file on my page, and not to have it intercepted by angular routing module?
Here's the example:
HTML:
<head>
<base href='/'></base>
</head>
<body ng-app="crudApp">
Home
User
users.html
<div ng-view></div>
JS routing:
$routeProvider
.when('/', {
templateUrl: 'app/components/home/homeView.html',
controller: 'HomeController'
})
.when('/user', {
templateUrl: 'app/components/user/userView.html',
controller: 'UserController'
})
.otherwise({
redirectTo: '/'
});
When I click on User link I get routed to localhost:8080/user, and my controller and template work fine. When I click on users.html link I get routed to home, but I want to invoke a static home.html page.
From the AngularJS docs, you have 3 options:
Html link rewriting
(...)
In cases like the following, links are not rewritten; instead, the browser will perform a full page reload to the original link.
Links that contain target element
Example: link
Absolute links that go to a different domain
Example: link
Links starting with '/' that lead to a different base path
Example: link
What you might be looking for is the first example:
users.html

AngularJS loading different views through routes

I want to display two pages, but use a base layout. I have it somewhat working with the following:
index.html
<html data-ng-app="myApp">
<head>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div data-ng-view class="container"></div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="public/app.js"></script>
</body>
</html>
main.html
<div>
<h2> Hello! This is Main page </h2>
</div>
list.html
<div>
<h2> This is List page </h2>
</div>
app.js
var myApp = angular.module('myApp', []);
// Routing Setup
function myAppRouteConfig($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'index.html'
}).
when('/list', {
controller: ListController,
templateUrl: 'list.html'
}).
otherwise({
redirectTo: '/'
});
}
myApp.config(myAppRouteConfig);
This somewhat works when I visit index.html and list.html, but two problems:
When I load index.html, bootstrap loads fine. But when I visit list.html, bootstrap doesn't load. In fact, looking at the html source in firebug, all the code from index.html isn't loaded. The container is missing, the script and css links are missing.
How do I load an actual index page? I have my main.html that I want to load when a user visits the root page, but index.html is the base layout that contains code that persists through all other views (ie, like header and footer etc). If I modify my app.js and set the templateUrl: 'main.html', it seems to still load index.html. Is AngularJS implicitly looking for index.html as the base template?
EDIT:
File structure:
-- server.js
-- public/
|-- index.html
|-- list.html
|-- main.html
|-- js
|-- app.js
Change your route to:
$routeProvider.
when('/', {
templateUrl: 'main.html'
}).
when('/list', {
controller: ListController,
templateUrl: 'list.html'
}).
//if you need to use login page, add 1 more route
when('/login', {
templateUrl: 'login.html'
})
otherwise({
redirectTo: '/'
});
and put your index.html at the root directory (or any sub directory) of your web app, configure it as the default document.
Is AngularJS implicitly looking for index.html as the base template?
There is nothing related to angular here, this is the normal behavior of loading an html page from a web server.
Here is how it works:
When users access your application at the root url (e.x: http://example.com) or any sub directory (http://example.com/public), the index.html is loaded into browser like with normal web applications, then your app.js is run as normal. When the routes are registered and the application is bootstrapped, angular checks the route and loads main.html to be inserted into the container where ng-view is declared.
After digging around, it turns out my AngularJS route requires ngRoute, which is its own module now. After including it, it started to display the correct pages.

Laravel + Angular - Page not loading

Im starting to build a new app with laravel and decided to try out angular.js as well.
So I will be using a hybrid approach where the login is made outside angular and then i have a main page where I wanna load the templates using angular.
I got stuck in the loading views part with angular. No errors are shown in the console and the template is not loading as well.
This is my routes.php file:
// Login routes here
...
// Routes protected by auth filter
Route::group(['prefix' => 'admin', 'before' => 'auth'], function(){
Route::get('/', 'AdminPagesController#main'); // Main Page
Route::resource('documents', 'DocumentsController');
});
app/views/admin/layouts/master.blade.php file:
<html ng-app="intern">
<head>
...
</head>
<body>
<div ng-view=""></div>
{{ HTML::script('js/vendor/angular.min.js') }}
{{ HTML::script('js/vendor/angular-route.min.js') }}
{{ HTML::script('js/admin/app.js') }}
{{ HTML::script('js/admin/controllers/documentsController.js') }}
</body>
</html>
public/js/admin/app.js
'use strict';
var intern = angular.module('intern', ['ngRoute'], function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
intern.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/admin', {
templateUrl : 'app/views/admin/documents/index.php',
controller : 'documentsController'
});
$routeProvider.otherwise({templateUrl:'app/views/admin/documents/index.php'});
});
public/js/admin/controllers/documentsController.js (which don't have anything much for now)
intern.controller('documentsController', ['$scope', function(scope){
}]);
and finally my template:
app/views/admin/documents/index.php
<div>
<h1>index documents</h1>
</div>
what am I doing wrong? If you guys need more information please tell me.
Thanks in advance :)
You have to place your templaes into the public folder since the app-folder is not accessible via request from the browser. Alternatively you can write a route for the templates (which is not recommended in my opinion)
Anyway you should see an error in your network-console (404) cause the template cant be loaded

Categories

Resources