I am trying to use the MEAN stack for the following assignment.
I have created several registration forms which work fine. One registration page is index.html(which through Angular loads several views/tabs within it, so they are multi-paged) and another one, index2.html.
There is also a main webpage that I have created which is a simple page that
has the company's logo, name and two buttons.
Clicking on each button will direct you to a different registration
form(either index.html or index2.html).
This last functionality is where I am having problems. How do I connect the main page to the different registration forms? In other words, how do I redirect the user to the right registration page when they click the corresponding buttons? Should I use node to route to the correct registration page or use Angular Route? As you can see, currently I am attempting to use Angular Route but am unsure if that is the right tool for this purpose. Any help and direction would be greatly appreciated.
Thank you
Here is the code that I have for the main page(home.html):
<html ng-app="myHome">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home Page</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href"https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.css"/>
<link rel="stylesheet" href="/css/redirect.css"/>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"> </script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><!--This is to call Angular JS-->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.js"></script>
<script src="/js/redirect.js"></script>
</head>
<body>
<div class="container">
<div class="row" id="rotate">
<div class="col-md-6 col-md-offset-3">
<img src="/css/Logo_75.png">
</div>
</div>
<div class="row">
<h1>WHAT TYPE OF QUOTE ARE YOU REQUESTING:</h1><br>
<h1>DIGITAL OR SCREEN QUOTE?</h1>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<button type="button" class="btn btn-success">DIGITAL QUOTE</button>
<button type="button" class="btn btn-success">SCREEN QUOTE</button>
</div>
</div>
</div>
</body>
This is the angular JS file:
var app = angular.module('myHome', [ngRoute]);
.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/digital', {
templateUrl: '/index.html'
}).
when('/screen', {
templateUrl: '/index2.html'
}).
otherwise({
redirectTo: '/home.html'
});
}]);
where index.html is the registration form for the "digital" option and index2.html is the registration form for the "screen" option. If anyone needs to see the code for those registration forms, please let me know
Thanks
You need to use ng-view directive.
Change your container to look like this
<div class="container">
<div ng-view></div>
</div>
Place the content you had in there into template index.html and rename your index.html to digital.html and index2.html to screen.html to correspond with route names (well it's a recommendation since it makes a lot of sense I believe)
And change the routing to this
var app = angular.module('myHome', [ngRoute]);
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', { templateUrl: '/index.html' })
.when('/digital', { templateUrl: '/digital.html' })
.when('/screen', { templateUrl: '/screen.html' })
.otherwise({ redirectTo: '/' });
}]);
Related
I'm learning Angularjs and this is my first code, but i can't find the bug, ng-view doesn't show data. I don't know how to debug mi code.
Please somebody can help me to show data using ng-view?.
This is my code:
Index.html
<!DOCTYPE html>
<html ng-app="FinalApp">
<head>
<title>AngularJS</title>
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.css">
<link rel="stylesheet" type="text/css" href="css/lumx.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>-->
<script src="https://code.angularjs.org/1.6.5/angular-route.min.js"></script>
<!--<script src="https://code.angularjs.org/1.4.0-beta.5/angular-route.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js"></script>
<script src="https://code.angularjs.org/1.6.5/angular-parse-ext.min.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/lumx.js"></script>
</head>
<body>
<nav>
<div class="bgc-black-1 tc-white" flex-container="row" flex-align="center center">
<div flex-item="4">
<h1 class="fs-display-3 display-block">Posts App</h1>
</div>
<div flex-item="1">
Inicio
</div>
<div flex-item="1">
Crear Post
</div>
</div>
</nav>
<div flex-container="row" flex-aling="center">
<div ng-view flex-item="9"></div>
</div>
</body>
</html>
and the controller is
angular.module('FinalApp')
.controller('MainController',function($scope,$resource){
Post = $resource('https://jsonplaceholder.typicode.com/posts/:id',{id:'#id'});
$scope.posts = Post.query();//agrupamos los posts
});
Home.html
<lx-tabs>
<lx-tab heading='Posts'>
<div class='p+'>
<div class='card' ng-repeat='post in posts'>
<div class='p+'>
<strong class='fs-headline display-block tc-red-900'>
{{post.title}}
</strong>
<div class='paragrah fs-body-1 mt+'>
{{post.body}}
</div>
<div class='card_actions'>
<a href='#'>Leer mas</a>
</div>
</div>
</div>
</div>
</lx-tab>
<lx-tab heading='Users'>
<div class='p+'>
hello world users
</div>
</lx-tab>
</lx-tabs>
App.js
angular.module('FinalApp',['lumx','ngRoute'])
.config(function($routeProvider){
$routeProvider
.when('/',{
controller: 'MainController',
templateUrl: 'templates/home.html'
})
});
Finally i'm using LumX for make the front end of the application and the version of LumX is v1.5.31
First the working demo, you can find it in the below link!
JSFiddle Demo
I checked your code, there are only some minor corrections.
Instead of defining angular.module('FinalApp') differently in different files, try following a syntax like this.
var app = angular.module('FinalApp',['ngResource','lumx','ngRoute']);
app.config(function($routeProvider){
$routeProvider.when('/',{
controller: 'MainController',
templateUrl: 'home.html'
})
});
app.controller('MainController',function($scope, $resource){
var Post = $resource('https://jsonplaceholder.typicode.com/posts/:id',{id:'#id'});
console.log(Post.query());
$scope.posts = Post.query();//agrupamos los posts
});
So you define it only once and assign it to a variable, which can be used anywhere in the project, like shown in the above code. Thus the dependencies are always available to all the controllers!
In order to use $resource of angular, you need to include the file angular-resource.min.js and also, after including the file you need to add it to the module dependencies.
var app = angular.module('FinalApp',['ngResource','lumx','ngRoute']);
There is also one minor suggestion I would like to make. It's that the tabs don't have a label. you can define them like so.
<lx-tab heading='Users' lx-label="Users">
<div class='p+'>
hello world users
</div>
</lx-tab>
I am using templates in the script tag to create the different pages for the router, you can use the normal method itself, so you
need to ignore the changes I have made in config section, I mean the below part.
app.config(function($routeProvider){
$routeProvider.when('/',{
controller: 'MainController',
templateUrl: 'home.html'
})
});
Please let me know if it still shows errors, Happy Coding!
I have following code below where I used Angular Routing to direct users to new registration forms. The app works like this. The user sees a webpage which asks them to make a choice between a "digital quote" or "screen quote" by clicking the appropriate button. Once the button is clicked it should direct it to another page which shows the appropriate registration form. In terms of the different registration forms, I have that all built. But I have one big problem in terms of functionality. When the user clicks the button it should load the registration in a different page. I am not sure how to do that. Right not I am using an ng-view directive which means that the buttons and the initial questions still remain. My objective is that once you click the button, all you see are the corresponding/different registration pages. Any help or direction would be greatly appreciated. I don't believe Angular can solve this.
Thank you
the main page-> index.html
<html ng-app="myHome">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home Page</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href"https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.css"/>
<link rel="stylesheet" href="/css/redirect.css"/>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"> </script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><!--This is to call Angular JS-->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.js"></script>
<script src="/js/redirect.js"></script>
</head>
<body>
<div class="container">
<div class="row" id="rotate">
<div class="col-md-6 col-md-offset-3">
<img src="/css/Logo_75.png">
</div>
</div>
<div class="row">
<h1>WHAT TYPE OF QUOTE ARE YOU REQUESTING:</h1><br>
<h1>DIGITAL OR SCREEN QUOTE?</h1>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<button type="button" class="btn btn-success">DIGITAL QUOTE</button>
<button type="button" class="btn btn-success">SCREEN QUOTE</button>
</div>
</div>
</div>
<div class="container">
<div ng-view></div>
</div>
</body>
The angular JS file or the redirect.js file looks like this:
var app = angular.module('myHome', [ngRoute]);
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', { templateUrl: '/index.html' })
.when('/digital', { templateUrl: '/digital.html' })
.when('/screen', { templateUrl: '/screen.html' })
.otherwise({ redirectTo: '/' });
}]);
where digital.html is the registration form for the digital option and screen.html is the screen registration form option. If anyone wants to see those registration forms, I can paste those files as well. Thank you so much for your help.
When the user clicks the button it should load the registration in a
different page
Probably you can solve it in the next way.
Just get on button click new page from server.(remove # from href="#/digital") and create new route(/digital) in your server side application.
The only way to do that is to use anchor tag with target="blank". Angular is total SPA, so it will (ng-view) will never allow you to open the page in a new window (which I think you trying to do). It is better you use the <a> tag for your current need.
My dir's structure is like:
---/public
|
---index.html
---shop.html
|
---/js
|
---index.js
---index_controller.js
---/lib
---/css
---/plugins
|
---...
my index.html:
<!doctype html>
<html class="signin no-js" lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="Flat, Clean, Responsive, application admin template built with bootstrap 3">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<title>Index</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/themify-icons.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/skins/palette.css">
<link rel="stylesheet" href="css/fonts/font.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/lib/angular/angular.js"></script>
<script src="js/lib/angular/angular.min.js"></script>
<script src="js/lib/angular/angular-route.js"></script>
<script src="js/lib/angular/angular-route.min.js"></script>
<script src="js/index_controller.js"></script>
<script src="js/index.js"></script>
<script src="plugins/modernizr.js"></script>
</head>
<body class="bg-primary" ng-app="myApp.index">
<div class="cover" style="background-image: url(img/cover3.jpg)"></div>
<div class="overlay bg-primary"></div>
<div class="center-wrapper">
<div class="center-content">
<div class="row">
<div class="col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<section class="panel bg-white no-b">
<ul class="switcher-dash-action">
<li class="active">Index</li>
</ul>
<div class="p15" ng-controller="IndexCtrl">
<form role="form" >
<div >
<button class="btn btn-primary btn-lg btn-block" ng-click='testRoute()'>
TestRoute
</button>
</div>
</form>
</div>
</section>
<p class="text-center">
Copyright ©
<span id="year" class="mr5"></span>
</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var el = document.getElementById("year"),
year = (new Date().getFullYear());
el.innerHTML = year;
</script>
</body>
</html>
And shop.html renders the following: (only for test use):
SHOP
And index_controller.js is :
function IndexCtrl($scope, $http, $location, $route, $window) {
$scope.testRoute = function() {
console.log(">>>TestRoute>>>");
$location.url('/shop');
}
}
function ShopCtrl() {
console.log("ShopCtrl");
}
And index.js:
'use strict';
//Angular-js
var module = angular.module('myApp.index', ['ngRoute']);
module.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/shop', {templateUrl: 'shop.html', controller: ShopCtrl
});
}]);
/*My Controllers*/
module.
controller('IndexCtrl', ['$scope', '$http', '$location', '$route', '$window', IndexCtrl]);
module.
run([
'$rootScope', '$location',
function($rootScope, $location) {
$rootScope.$on('$routeChangeStart', function(event, next, current) {
var nextTemplate = next.templateUrl;
var nextController = next.controller;
console.log("location.path:" + $location.path());
console.log('Template Starting to leave %s to go to %s\n', "", nextTemplate);
console.log('Controller Starting to leave %s to go to %s\n', "", nextController);
});
}
]);
And when I type "http://localhost:6001/index.html" in Chrome's address bar, it renders:
After clicking Test Route button, it changes to:
Only the url address changes, and it seems strange:
"http://localhost:6001/index.html#/shop"
Whereas I need
"http://localhost:6001/shop"
Chrome's console shows:
My problem is: how to render shop.html and how to navigate to /guoguo path properly, using code like:
$routeProvider.when('/shop', {templateUrl: 'shop.html', controller: ShopCtrl
});
I am pretty new to Angular. Maybe I am not thinking in the angularjs approach. Thanks for your points.
It is a mix of issues for your .html# being shown. Try this.
1: Add in the first line of head tags
<head><base href="/">
...
</head>`
2: Use this $locationProvider.html5Mode(true);
app.config(function($routeProvider,$locationProvider){
$routeProvider
.when('/',{
templateUrl: 'views/home.html',
controller:'homeCtrl'
})
.when('/about',{
templateUrl: 'views/about.html',
controller:'aboutCtrl'
})
.otherwise({
redirectTo: '/home'
});
$locationProvider.html5Mode(true);
});
This should remove the # from the page. But in your server make index.html as the default file serving for the path http://localhost:6001/ then it will load http://localhost:6001/index.html as http://localhost:6001/
I finaly get to know that AngularJS is a SPA(Single Page App) based framwork. If I simply jump to another html, the page will load another ng-app, which has no relation to origin app(the bootstrap has been restarted).
What solution I take is to use ng-view inside the index html. It allows to load different ng-view(which is in '<div></div>' from other html file), and config the routeProvider by declaring template url and controller.
I will paste the complete code later, thanks for you all !!!
Good Day,
I'm trying to create an SPA with Angular. Here is my index.html page:
<!DOCTYPE html>
<html lang="en" ng-app="onlineApp">
<head>
<meta charset="UTF-8">
<title>Online</title>
<link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/mystyle.css">
<base href="/Client/">
</head>
<body ng-controller="mainController">
<div class="container"> <!--- This is the box login -->
<div ng-view></div>
</div>
<script src="components/angular/angular.js"></script>
<script src="components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
</body>
</html>
and here is app.js:
var onlineApp = angular.module('onlineApp', ['ngRoute']);
onlineApp.controller('mainController', function($scope) {
$scope.message = 'Test Message';
});
onlineApp.controller('signupController', function($scope) {
$scope.message = 'Sign up Message';
});
onlineApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/home.html',
controller: 'mainController'
})
.when('/signup', {
templateUrl: 'pages/signup.html',
controller: 'signupController'
})
.otherwise({
redirectTo: '/'
});
// use the HTML 5 History API
$locationProvider.html5Mode(true);
});
My problem is: Inside the contents of the ng-view (home.html), I have a button. When I click the button, I want to go to a signup page as defined in the route handler and it's not working. I think the problem is "inside" the ng-view.
EDIT:
Here's a snippet of pages/home.html:
<div class="pull-right col-md-4">
<label class="pull-right col-md-12 create-monthly">Create a Monthly Parker Account</label>
<a id="btn-create" class="btn btn-primary" href="#signup" >
Create Account
</a>
</div>
When I click on the button, I want the contents of pages/home.html to be replaced with the contents of pages/signup.html
END EDIT:
All of the examples I see of ng-view being used is when the links are outside of the ng-view.
Can I change the contents of ng-view while I'm inside the ng-view itself? Or is there some sort of project that would allow me to do that.
TIA,
coson
you just have to change the location of the browser to change the route. i do not really understand your problem, probably you will have to rephrase it or post a little bit more code (from inside your ng-view)
potentially either a link of the form
Click me to switch
or a manual location change with the $location service (inject it to your controller)
$location.path("/signup");
should do the job. im not sure what you mean by links inside and outside of ng-view.
The nice thing about using ui-router is that you can treat your view changes as simple page redirects. i.e. you can use an anchor tag to redirect the browser to the specified url and ui-router will catch that before the page refreshes and just update your ui-view without refreshing the page.
Click this link to go to signup.
We are attempting to create a MVC/AngularJS mini-SPA site using various links found on tutorial sites and others like: AngularJS routing in MVC application with templates. However, clicking on the links appear to load the whole page every time, and the templates are never loaded. I am sure I'm missing something simple, but can't figure it out.
My _Layout.cshtml looks like:
<!DOCTYPE html>
<html ng-app="registrationModule">
<head>
<meta charset=" utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-resource.min.js"></script>
<script src="~/Scripts/angular-route.min.js"></script>
<script src="~/GrextScripts/registration-module.js"></script>
<script src="~/GrextScripts/user-repository.js"></script>
<script src="~/GrextScripts/user-controller.js"></script>
#RenderSection("SectionInHeader", required: false)
</head>
<body>
<header>
<div class=" content-wrapper">
<div class="float-left">
<p class="site-title">
GREXT
</p>
</div>
<div class="float-right">
<nav>
<ul id="menu">
<li>Home</li>
<li>Users</li>
</ul>
</nav>
</div>
</div>
</header>
#RenderBody()
#RenderSection("scripts", required: false)
</body>
</html>
The ControlPanel/Index.cshtml (the {{5+5}} renders properly as a "10" on the page, this was just to see if the AngularJS was working
#{
}
<div ng-view>
{{5+5}}
</div>
registration-module.js
var registrationModule = angular.module("registrationModule", ["ngRoute", "ngResource"])
.config(function($routeProvider, $locationProvider) {
$routeProvider.when("/ControlPanel/Users", {
templateUrl: "/templates/users/all.html",
controller: "userController"
});
$locationProvider.html5Mode(true);
});
user-controller.js
registrationModule.controller("UserController", function($scope, userRepository, $location) {
$scope.users = userRepository.get();
});
And last, the template: /templates/users/all.html
{{1+1}}
<table>
<tr><td>User Name</td></tr>
<tr ng-repeat="user in users">
<td>{{user.UserName}}</td>
</tr>
</table>
As mentioned, when I click on the Users link in the page, the whole page reloads and the template all.html is not loaded as I expect it.
#aaronfrost's comment made me re-check my javascript console more thoroughly and found that I need to include a
<base href="/" />
in the < head> tag of my document. Adding this causes everything to work.
Not sure, but the problem may be that you declared the controller as "UserController" with a capital "U", but in the routeProvider you specified it with a lowercase "u" as "userController".
I am guessing that you have an error in the console, so you might want to check there.
Change the routeProvider to use "UserController" instead of "userController" and it should work.