I am using angularJS in my grails application. Before that, i tried a sample from internet. I tried to use angularJS $routeProvider for the partial views in my main view. My workflows are as follows:
my main view is index.gsp:
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routing example</title>
</head>
<body ng-app="routeApplication">
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav">
<li> Add </li>
<li> Show </li>
</ul>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>
</div>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/app.js"></script>
</body>
</html>
My partial views are: add_order.gsp and show_orders.gsp to show a sample message for each view.
my app.js is as follows:
var sampleApp = angular.module('routeApplication', ['ngRoute']);
sampleApp.config(['$routeProvider',
function($routeProvider) {
var base = '${request.contextPath}';
$routeProvider.
when('/AddNewOrder', {
templateUrl: 'templates/add_order.html',
controller: 'AddOrderController'
}).
when('/ShowOrders', {
templateUrl: 'templates/show_orders.gsp',
controller: 'ShowOrdersController'
}).
otherwise({
redirectTo: '/AddNewOrder'
});
}]);
sampleApp.controller('AddOrderController', function($scope) {
$scope.message = 'This is Add new order screen';
});
sampleApp.controller('ShowOrdersController', function($scope) {
$scope.message = 'This is Show orders screen';
});
Note: i created a templates folder and placed my parital views on that.
This problem is that, whenever i click to load my partial views it shows
`http://localhost/angularJSrouting/templates/show_orders.gsp`
404 Not Found
Am i missing something or is there any problem of placing the partial views?
I don't think this will work. Since your templateUrl is templates/show_orders.gsp angularjs will try to find that file inside templates folder in your webapp.
You have to redirect to
http://localhost/#/angularJSrouting/templates/show_orders.gsp url
can you use '/' instead of '#' in those html line
<li> Add </li>
<li> Show </li>
Related
I've a very simple app with no code in it yet. I've removed it to check for this error that I am getting - "angular.js:13708 Error: [ng:areq] Argument 'ClientFileConfigController' is not a function, got undefined"
I've followed the similar patter in my angularjs app (1.5.3) and it works fine. This code is using angularjs (1.5.7) and the only difference is I used bower to individually chose my packages, rather than using nuget.
I am unable to decode this error :-(
app.js
(function () {
var app = angular.module('ConfigApp', ['ngRoute', 'ngAnimate', 'TreeWidget']);
app.config(['$routeProvider', function ($routeProvider) {
var viewBase = '/app/ConfigApp/views/';
$routeProvider
.when('/clients', {
controller: 'ClientFileConfigController',
templateUrl: viewBase + 'clients.html',
controllerAs: 'vm'
})
//.when('/clients/:clientId/:fileId', {
// controller: 'clientfileEditController',
// templateUrl: viewBase + 'edit.html',
// controllerAs: 'vm'
//})
.otherwise({ redirectTo: '/clients' });
}]);
}());
clientfileConfigController.js
(function(){
var injectParams = ['$scope'];
var ClientFileConfigController = function ($scope) {
}
ClientFileConfigController.$inject = injectParams;
angular.module('ConfigApp').controller('ClientFileConfigController', ClientFileConfigController)
}());
index.html
<html ng-app="ConfigApp">
<head>
<title>Client File Angular Tree Widget</title>
<meta charset="utf-8" />
</head>
<body ng-cloak>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Clients</li>
</ul>
</div>
</div>
</nav>
.top-buffer { margin-top:20px; }
<div class="slide-animation-container">
<div ng-view id="ng-view" class="slide-animation"></div>
</div>
</body>
</html>
clients.html
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<h1>Hello World</h1>
<!--<tree nodes='treeNodes'>-->
</body>
</html>
Error Image
Change your IIFE to this structure:
(function (){
//your code here
})()
and include your controller in the script
You get this error on two scenarios:
Controller not included in script. (undefined)
Injector dependency couldn't be resolved.
I would say that you need to include the js files in your index html page. Angular is looking for your controller but there is no file specified that contains the code for it
I am new to angularjs ,i make a sample app with custom directives now i add routing as well but it doesn't working.When i start project index file is loaded in browser that is working fine but when i click on nav bar links then about and contact page is not displayed it's remains on index.html.
here is my index.html:
<html ng-app="myApp">
<head>
<title>Reddit New World News (Task)</title>
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<script src="angular/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.min.js"></script>
<script src="myApp.js"></script>
<script src="myAppCtrl.js"></script>
<script src="headerDirective.js"></script>
<script src="searchDirective.js"></script>
<script src="myDataDirective.js"></script>
<!-- start menu -->
</head>
<body>
<div header-table></div>
<div class="content" ng-controller = "myAppCtrl">
<div class="container" >
<div ng-view></div>
</div>
</div>
</body>
</html>
myAppCtrl:
// TODO: Wrap in anonymous function
(function () {
var myApp = angular.module('myApp', ['ngRoute']);
// configure our routes
myApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'code/index.html',
controller : 'myAppCtrl'
})
// route for the about page
.when('/about', {
templateUrl : 'code/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'code/contact.html',
controller : 'contactController'
});
});
// TODO: min-safe with bracket notation
myApp.controller('myAppCtrl', ['$scope', '$http', function($scope, $http) {
$scope.sortType = '';
$scope.sortReverse = true;
// TODO: Keep lines short - it's easier to read
$http.get("https://www.reddit.com/r/worldnews/new.json")
.success(function (response) {
$scope.stories = response.data.children;
});
}]);
myAppCtrl.controller('aboutController',function(){
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
myAppCtrl.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
})();
headerDirective.html:
<div class="top-header"></div>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="header">
<h1>Reddit</h1>
</div>
<div class="header-right">
<h2>World's Latest News</h2>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="clearfix"></div>
</div>
any guide thanks.
Like some people allready mentioned, you should deffinitly read the docs and probably watch some tutorials. I'm trying to see what you are doing, but it's not clear to me.
But I think I see where it goes wrong in your thoughts:
You have 3 'templates' index.html, about.html and contact.html. In your config You use them in your routing. By watching your files my guess is that you are expecting that, depending on the route, these html-files will be loaded. Just like when redirecting to that page.
What you should do is make a index.html with the html You use on every page. this can be the <head></head> only, but can also contain your header with navigation and footer. Then you use <ng-view></ng-view> or <div ng-view></div> where you want the templates to load in your page. These templates don't need to contain the parts you allready defined in your index.html. You have only the content in it.
So, a simple example:
index.html
<html>
<head>
//loading your scripts etc.
</head>
<body>
<ng-view></ng-view>
</body>
</html>
Than, instead of creating a template called index.html, you make a template home.html with the content:
<div class="container">
<h1>My Home</h1>
</div>
Now the contentpart from your home.html will load in your index.html where you define de ng-view.
An other thing I noticed is the path you define in templateUrl. You define the location as code/about.html. You have to give it the path from your index.html (the main html) In your case that will just be templateUrl: 'about.html'.
I would suggest putting the different files in different folders. So, one for your templates, one for your js-files (probably a js-folder with another folder in it for your js-file with directives etc.).
I hope this will help you on your way. But deffinitly read the docs and watch some tutorials. It will help you a lot.
Im not sure where to place the partials folder holding the html views! I have placed it at the app root folder, in views and in public. Also tried removing the first trailing slash of the templateUrl but nothing. I also have tried(as view loading container):
<div ng-view></div>
<ng-view></ng-view>
<div data-ng-view></div>
<div ng-view=""></div>
<div ng-view="demoApp"></div>
This is just a learning example holding a module with 2 controllers and 2 views.
Here is the SPA(this page renders as rout '/' of a dancer(perl) project):
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<title><% title %></title>
<link rel="stylesheet" href="/customised_bootstrap/css/bootstrap.css">
<script src="/bower_components/underscore/underscore.js"></script>
<script src="/bower_components/backbone/backbone.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-resource/angular-resource.js"></script>
<script src="/bower_components/angular-route/angular-route.js"></script>
<script src="/bower_components/ng-tasty/ng-tasty-tpls.js"></script>
<script>
//define a module
var demoApp = angular.module('demoApp', ['ngRoute']);
//define routes for our module(each route will have its set of views and controllers)
demoApp.config =(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'simpleController1',
templateUrl: '/partials/testAlexView1.html'
})
.when('/testAlexView1',
{
controller: 'simpleController2',
templateUrl: '/partials/testAlexView1.html'
})
.when('/testAlexView2',
{
controller: 'simpleController2',
templateUrl: '/partials/testAlexView2.html'
})
.otherwise({redirectTo: '/partials/testAlexView1.html'});
});
//define a controller within our module 'demoApp'
demoApp.controller('simpleController1', function ($scope) {
$scope.customers = [
{name:'Boris', age:'18'},
{name:'Claudia', age:'28'},
{name:'Carlos', age:'39'},
{name:'Ben', age:'25'}
];
//var stuff ={};
});
demoApp.controller('simpleController2', function ($scope) {
$scope.customers = [
{name:'Alex', age:'18'},
{name:'Albert', age:'28'},
{name:'Anthony', age:'39'},
{name:'Loren', age:'25'}
];
});
</script>
</head>
<body>
<div>
<p>Main page of SPA test</p>
<div ng-view></div>
</div>
</body>
</html>
Here are the two identical views:
testAlexView1.html(testAlexView2.html is the same):
<div>
<input type="text" data-ng-model="name" /> {{ name }}
<br />
<ul>
<li data-ng-repeat="customer in customers | filter:name | orderBy:'age'">
{{customer.name}} - {{customer.age}}
</li>
</ul>
</div>
In the browser inspector, within the div where the view should load, all that appears is(both at root or root#/view.html):
<!-- ngView: -->
Batarang dosn't detect scopes nor modules neither. Thanks for any help!
There appears to be a typo in your config here:
demoApp.config =(function ($routeProvider) {
Instead try:
demoApp.config(function ($routeProvider) {
I'm trying to create a single page app with angularjs to which I'm very new. I've pieced together this code based on a number of tutorials, but it doesn't work and I'm not quite sure why. I'm not getting any errors that I can see. The intention is to have the home.html file load on the initial load. Then based on the routes, load in different templates.
script.js
angular.module("myApp", ['ngRoute']).config(['$routeProvider', function($routeProvider){
$routeProvider.when("/view", {
templateUrl: "/view.html",
controller: "ViewCtrl"
})
.otherwise({
templateUrl: "/home.html",
controller: "HomeCtrl"
});
}]);
angular.module("myApp").controller("ViewCtrl", ['$scope', function($scope){
$scope.message = "In the view";
}]);
angular.module("myApp").controller("HomeCtrl", ['$scope', function($scope){
$scope.message = "At home";
}]);
angular.element(document).ready(function(){
angular.bootstrap(document, ['myApp']);
})
index.html
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.0-beta.4" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<script data-require="angular-route#1.4.0-beta.4" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div id="content" ng-app="myApp"></div>
</body>
</html>
home.html
<div ng-controller="HomeCtrl">
{{message}}
</div>
view.html
<div ng-controller="ViewCtrl">
{{message}}
</div>
http://plnkr.co/edit/eLZQueX3OyPCXo2tQGWS
Couple of mistakes in your code. Please look the below changes
1) Add ng-view directive for loading partial content
<div id="content" ng-app="myApp"></div>
should be
<div id="content" ng-app="myApp" ng-view></div>
2) Template url not starts with slash (/)
templateUrl: "/view.html",
templateUrl: "/home.html",
Should be
templateUrl: "view.html",
templateUrl: "home.html",
3) No need to bootstrap the app manually, ng-app automatically do this.
4) No need to mention the controller in router level if you mentioned in template (vice versa)
Working Demo: http://plnkr.co/edit/n19eCFwRc9WQUt6SskPU?p=preview
I want to try some simple example with angular.js routing. Here is my script:
var sampleApp = angular.module('sampleApp', []);
sampleApp.config(['$routeProvider',
function($routeProvider){
$routeProvider.
when('/AddNewOrder', {
templateUrl: 'templates/add_order.html',
controller: 'AddOrderController'
}).
when('/ShowOrders', {
templateUrl: 'templates/show_orders.html',
controller: 'ShowOrdersController'
}).
otherwise({
redirectTo: '/AddNewOrder'
});
}]);
sampleApp.controller('AddOrderController', function($scope){
$scope.message = 'This is Add new order screen';
});
sampleApp.controller('ShowOrdersController', function($scope){
$scope.message = 'This is Show orders screen';
});
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routing example</title>
<body ng-app="sampleApp">
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav">
<li> Add New Order </li>
<li> Show Order </li>
</ul>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>
</div><!-- /.container -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="main.js"></script>
</body>
</html>
show_orders.html:
<h2>Show Orders</h2>
{{ message }}
add_order.html:
<h2>Add New Order</h2>
{{ message }}
When I click links in browser (Chrome) they don't open and I get this error in 'Network' tab:
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'null' is therefore not allowed access.
What is wrong here?
You need to run an http server in the back
in python for exmaple (from the directory of your project)
python -m SimpleHTTPServer
Or turn your templates into script tags, for example
<script type="text/ng-template" id="templates/add_order.html">
<h2>Add New Order</h2>
{{ message }}
</script>
I recommend using Grunt (http://gruntjs.com/) when developing AngularJS applications because it will:
Streamline your process
Facilitate testing, code validation and dependancy resolution
AND fix your problem, since it boots a small http server on port 9000. :)