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.
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 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: '/' });
}]);
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.
I'm learning Angular so I can get into web app development. I'm doing a test project but can't get ng-view to work. My HTML is as follows:
<!DOCTYPE HTML>
<html>
<head>
<title>TEST PROJECT</title>
<link rel="stylesheet" type="text/css" href="test_project.css">
<script src="lib/jquery-1.11.3.js"></script>
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="lib/angular-animate.min.js"></script>
<script src="lib/Chart.js"></script>
</head>
<body ng-app='TestProject'>
<center>
<div class="interface" ng-controller="SelectionController">
<div style="height: 10%">
<img style="margin:5px; float:left; height: 10vh" src="pictures/logo.gif">
<center><h1>{{ title }}</h1></center>
</div>
<div style="height: 85%" ng-view></div>
<div style="height:5%">
<p>Having trouble? Request Support
<p style="bottom: 50px; position:fixed; size:8px">Footer Text
</div>
</div>
</center>
<script src="angular/app.js"></script>
<script src="angular/controllers.js"></script>
</body>
</html>
I also have app.js:
var app = angular.module('TestProject',['ngRoute', 'ngAnimate']);
app.config(function ($routeProvider){
$routeProvider
.when('/', {
controller: 'SelectionController',
templateUrl: '/views/home.html'
})
.when('/home/', {
controller: 'SelectionController',
templateUrl: '/views/home.html'
})
.otherwise({
redirectTo: '/home/'
});
});
As well as controllers.js, which currently only has:
app.controller('SelectionController', ['$scope',function($scope) {
$scope.title = 'Title!';
}]);
And then I have a home.html,
<div>
<h2>Welcome to this page! Please select an option below.</h2>
<table>
<td><div><img class="Symbol" src="../pictures/pica.jpg"></div></td>
<td><div><img class="Symbol" src="../pictures/picb.jpg"></div></td>
<td><div><img class="Symbol" src="../pictures/picc.jpg"></div></td>
</table>
</div>
which SHOULD be loaded into ng-view. My aim is to make a single page where the center div of the window changes so I can load different screens to do whatever the app does without reloading the other stuff. The current directory structure is like this:
--angular
------app
------controllers
--lib
------angular.min
------angular-animate.min
------angular-route.min
------Chart.js
------jquery-1.11.3
--pictures
------pica
------picb
------picc
--views
------home.html
index.html
test.css
What I have now makes {{ title }} change the way it's supposed to, but there's nothing in the middle of the page. When I inspect the page, I see that the ng-view directive is commented.
<-- ngView: undefined -->
Is where my content from home.html is supposed to be. Why is ngView being commented out here?
I had this EXACT issue. what resolved it for me was, as Brendan Green mentioned,
changing my route to be : templateUrl instead of : templateURL ...casing made a huge difference!!!!
The html file that you show should be:
This file should be the index.html.
<html>
<head>
<title>TEST PROJECT</title>
<link rel="stylesheet" type="text/css" href="test_project.css">
<script src="lib/jquery-1.11.3.js"></script>
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="lib/angular-animate.min.js"></script>
<script src="lib/Chart.js"></script>
</head>
<body ng-app='TestProject'>
<div ng-view></div>
<script src="angular/app.js"></script>
<script src="angular/controllers.js"></script>
</body>
</html>
And then create a new html file, should be as you have in the routeProvider, and should be inside inside view folder, as it view/home.html
And content must be:
<div class="interface" ng-controller="SelectionController">
<div style="height: 10%">
<img style="margin:5px; float:left; height: 10vh" src="pictures/logo.gif">
<center><h1>{{ title }}</h1></center>
</div>
<div style="height:5%">
<p>Having trouble? Request Support
<p style="bottom: 50px; position:fixed; size:8px">Footer Text
</div>
</div>
Thats the way angular works.
Regards.
<head>
<script src=jquery.js></script>
<script src=bootstrap.js></script>
<script src=angular.js></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<link rel=stylesheet type="text/css" href=bootstrap.css />
<link rel=stylesheet type=text/css href=mystyle.css />
<style>
#panel{margin:20px;}
#addNew{margin:10px;}
#pagination{text-align:center;}
span{background:#aaa;width:60px;width:60px;}
</style>
</head>
<body ng-app="myApp">
<div ng-controller=myController>
<div id=panel class="panel panel-primary">
<div class="panel-heading">Hero Selection Bar</div>
<div class="panel-body">
Page 1
Page 2
Page 3
<ng-view > </ng-view>
</div>
</div>
</div>
<script>
var app = angular.module('myApp',['ngRoute']);
app.controller('myController', function( $scope, $routeProvider){
$scope.somedata = "THAT";
});
app.config([$routeProvider],function($routeProvider){
$routeProvider
.when('#/one', {templateUrl:"templates/one.html"})
.when('#/two', {templateUrl:"templates/two.html"})
.when('#/three', {templateUrl:"templates/three.html"})
});
</script>
</body>
I have kept the files on templates/one.html, templates/two.html, and templates/three.html in 'templates folder' but I am unable to get the pages load in current angularjs page. Can someone help me out in getting the routes load the required pages.
There are couple of things your are doing wrong:-
1)# in when not required it should be like .when('/one', {templateUrl:"templates/one.html"}) etc.
2)Array notation must be end at the end ['$routeProvider'] not correct
It should be like :-
app.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/one', {templateUrl:"one.html"})
.when('/two', {templateUrl:"two.html"})
.when('/three', {templateUrl:"three.html"}).otherwise({redirectTo:'/one'})
}]);
3)$routeProvider not required in controller use $route.
4) I guess use otherwise it also required (It is optional).
Plunker
You added [$routeProvider] which has ] which should be closing bracket of dependency.
Config
app.config([$routeProvider,function($routeProvider){
$routeProvider
.when('/one', {templateUrl:"templates/one.html"})
.when('/two', {templateUrl:"templates/two.html"})
.when('/three', {templateUrl:"templates/three.html"})
}]);
Inside controller you can not inject $routeProvider dependency it should $route