I have following html file
<!DOCTYPE html>
{% load staticfiles %}
<html lang="en-US">
<head>
<script src="{% static 'bower_components/angular/angular.js' %}"></script>
<script src="{% static 'bower_components/angular-route/angular-route.js' %}"></script>
<script src="{% static 'js/hearthstone_guides/controllers.js' %}"></script>
<script src="{% static 'js/hearthstone_guides/app.js' %}"></script>
</head>
<body ng-app="guideApp">
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello [[name]]</h1>
<div ng-view></div>
</body>
</html>
The [[ ]] brackets are the new Symbols for angularJS. I will declare them in my angularJS files. The two way data-binding in combination with the name variable (Hello [[name]]) was used for the testing of angular and it works. I can ensure it is included properly.
This is my app.js
var guideApp = angular.module('guideApp', ['ngRoute']);
guideApp
.config([
'$routeProvider',
function($routeProvider) {
$routeProvider
.when('/guide/:guideId', {
controller: 'GuideDetailController',
templateUrl: '/static/templates/hearthstone_guides/guide-detail.html'
})
.otherwise({
redirectTo: '/'
});
}
])
.config([
'$httpProvider', function($httpProvider) {
$httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
}
])
.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
and this is my controllers.js
var guideController = angular.module('guideController', []);
guideController.controller('GuideDetailController', [
'$scope',
'$routeParams',
'$http',
function($scope, $routeParams, $http) {
$http.get('http://10.0.3.162:8000/api/guides/' + $routeParams.guideId + '/?format=json')
.success(function(data) {
console.log('success');
$scope.guide = data;
})
.error(function(data, status) {
console.error(status, data);
});
}
]);
When I console.log('foo'); for instance between var guideController = angular.module('guideController', []); and guideController.controller('GuideDetailController', [... it works.
Unfortunately neither does console.log('success'); nor console.log(status, data); work.
Edit:
I changed the controller name now to GuideDetailController as you suggested but it still doesn't work.
This is the error marked in the firefox developer console:
"Error: [ng:areq] Argument 'GuideDetailController' is not a function, got undefined
http://errors.angularjs.org/1.3.20/ng/areq?p0=GuideDetailController&p1=not%20a nanunction%2C%20got%20undefined
minErr/<#http://10.0.3.162:8000/static/bower_components/angular/angular.js:63:12
assertArg#http://10.0.3.162:8000/static/bower_components/angular/angular.js:1590:1
assertArgFn#http://10.0.3.162:8000/static/bower_components/angular/angular.js:1600:1
$ControllerProvider/this.$get</<#http://10.0.3.162:8000/static/bower_components/angular/angular.js:8493:9
ngViewFillContentFactory/<.link#http://10.0.3.162:8000/static/bower_components/angular-route/angular-route.js:978:26
invokeLinkFn#http://10.0.3.162:8000/static/bower_components/angular/angular.js:8281:9
nodeLinkFn#http://10.0.3.162:8000/static/bower_components/angular/angular.js:7791:1
compositeLinkFn#http://10.0.3.162:8000/static/bower_components/angular/angular.js:7140:13
publicLinkFn#http://10.0.3.162:8000/static/bower_components/angular/angular.js:7019:30
createBoundTranscludeFn/boundTranscludeFn#http://10.0.3.162:8000/static/bower_components/angular/angular.js:7158:1
controllersBoundTransclude#http://10.0.3.162:8000/static/bower_components/angular/angular.js:7818:18
update#http://10.0.3.162:8000/static/bower_components/angular-route/angular-route.js:936:25
$RootScopeProvider/this.$get</Scope.prototype.$broadcast#http://10.0.3.162:8000/static/bower_components/angular/angular.js:14889:15
commitRoute/<#http://10.0.3.162:8000/static/bower_components/angular-route/angular-route.js:619:15
processQueue#http://10.0.3.162:8000/static/bower_components/angular/angular.js:13318:27
scheduleProcessQueue/<#http://10.0.3.162:8000/static/bower_components/angular/angular.js:13334:27
$RootScopeProvider/this.$get</Scope.prototype.$eval#http://10.0.3.162:8000/static/bower_components/angular/angular.js:14570:16
$RootScopeProvider/this.$get</Scope.prototype.$digest#http://10.0.3.162:8000/static/bower_components/angular/angular.js:14386:15
$RootScopeProvider/this.$get</Scope.prototype.$apply#http://10.0.3.162:8000/static/bower_components/angular/angular.js:14675:13
done#http://10.0.3.162:8000/static/bower_components/angular/angular.js:9725:36
completeRequest#http://10.0.3.162:8000/static/bower_components/angular/angular.js:9915:7
requestLoaded#http://10.0.3.162:8000/static/bower_components/angular/angular.js:9856:1
This is how my guide-detail.html file looks like
<h1>[[guide.title]]</h1>
<h1>{{guide.title}}</h1>
And this is the current results I get when I call this url http://10.0.3.162:8000/#/guide/1
You have put module name as a controller in the route config
Change From:
.config([
'$routeProvider',
function($routeProvider) {
$routeProvider
.when('/guide/:guideId', {
controller: 'guideController',
templateUrl: '/static/templates/hearthstone_guides/guide-detail.html'
})
.otherwise({
redirectTo: '/'
});
}
])
To:
config([
'$routeProvider',
function($routeProvider) {
$routeProvider
.when('/guide/:guideId', {
controller: 'GuideDetailController',
templateUrl: '/static/templates/hearthstone_guides/guide-detail.html'
})
.otherwise({
redirectTo: '/'
});
}
])
First, you should not use the minified versions of the libraries while developing.
Second, your unique route is configured to use the controller 'guideController'. But you have no such controller. The only controller defined is named 'GuideDetailController'.
'guideController' is not a controller. It's a module.
Related
I have a small AngularJS test app and am running http-server. I am using ui-router. When I load localhost:8080 my angular component works fine. When I click on <a ui-sref="new">New</> I go to localhost:8080/new and the new component loads fine. However, when I reload the page, the product-details component doesn't load
app.js
'use strict';
angular
.module('productApp', [
'ui.router',
'ProductComponents',
])
.config([
'$httpProvider',
'$locationProvider',
'$stateProvider',
'$urlRouterProvider',
'$compileProvider',
function($httpProvider, $locationProvider, $stateProvider, $urlRouterProvider, $compileProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
$compileProvider.debugInfoEnabled('<%= Rails.env.development? %>');
var token = document.querySelector('meta[name="csrf-token"]');
if(angular.isElement(token)){
$httpProvider.defaults.headers.common['X-CSRF-Token'] = token.content;
}
$httpProvider.useApplyAsync(true);
$httpProvider.defaults.paramSerializer = '$httpParamSerializerJQLike';
// For any unmatched url, redirect to /state1
$urlRouterProvider
.otherwise("/");
$stateProvider
.state('root', {
url: "/",
template: '<product-index meta="meta"></product-index>'
})
.state('new', {
url: "/new",
template: '<product-new></product-new>'
})
}])
index.html
<!DOCTYPE html>
<html>
<head>>
<script src="angular.js"></script>
<script src="angular-resource.js"></script>
<script src="//unpkg.com/#uirouter/angularjs/release/angular-ui-router.min.js"></script>
<script src="select.js"></script>
<script src="product_components.js"></script>
<script src="product_index.js"></script>
<script src="product_new.js"></script>
<script src="product_details.js"></script>
<script src="app.js"></script>
<base href="/">
</head>
<body>
<div ng-app="productApp">
<ui-view></ui-view>
</div>
</body>
</html>
product-new.js
'use strict';
angular
.module('ProductComponents')
.component('productNew', {
bindings:{
},
templateUrl: "new.html",
controllerAs: 'prodNew',
controller: function(){
var prodNew = this;
prodNew.product = { name: 'Test Product' };
}
}
)
new.html
<h2>Products</h2>
<product-details product="prodNew.product"></product-details>
product-details.js
angular
.module('ProductComponents')
.component('productDetails', {
bindings:{
product: '=product',
},
templateUrl: "details.html",
controllerAs: 'prodDetails',
controller: [
'$filter',
// '$http',
function(
$filter,
// $http,
){
var prodDetails = this;
...
Here is the code I have, greatly simplified,
and my question is - why am I getting this error message?
[ng:areq] Argument 'SearchController' is not a function, got undefined
http://errors.angularjs.org/1.5.8/ng/areq?p0=SearchController&p1=not%20aNaNunction%2C%20got%20undefined
index.cshtml
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="~/Components/angular/angular.min.js"></script>
<script src="~/Scripts/Common/app.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
app.ts
namespace App {
export let app = angular.module("app", ["ngRoute", "ngSanitize"]);
// Defined custom routes for using "ng-view" directive,
// enable single page application (SPA) functionality
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "/RealSuiteApps/RealForm/-1/MyForm/Search/",
controller: "SearchController",
controllerAs: "vm"
})
.when("/Detail/:id", {
templateUrl: "/RealSuiteApps/RealForm/-1/MyForm/Detail/",
controller: "DetailController",
controllerAs: "vm"
})
.otherwise({ redirectTo: "/" });
});
}
search.cshtml - the HTML returned by calling templateUrl defined above: /RealSuiteApps/RealForm/-1/MyForm/Search/ (simplified for this demo)
<script src="~/Scripts/MyForm/search.controller.js"></script>
<div class="container">
<h1>Hello from Search Controller</h1>
</div>
the controller search.controller.js
namespace App {
/**
* SearchController
*/
class SearchController {
static $inject: string[] = ["DataService"];
constructor(private dataService: DataService) { }
}
app.controller("SearchController", SearchController);
}
Looks like you're loading the search.controller.js file only in your search view, but the route instantiates the controller even before that, and he can't do that if you haven't loaded the script yet.
The solution is to load it at the beginning of your app.
I have MVC application, I want make routing for the following URL
http://localhost:2668/Home/User/1
I try
.config(function ($routeProvider, $locationProvider) {
//here we will write code for implement routing
$routeProvider
.when('#/Home/User/:userid', {
templateUrl: '/AngularTemplates/User.html',
controller: 'UserController'
})
.otherwise({ // This is when any route not matched
controller: 'ErrorController'
}) })
And then the UserController as below:
.controller('UserController', ['$scope','$routeParams', function ($scope,$routeParams) {
// $routeParams used for get query string value
//var loc = window.location.href;
//var id = loc.slice(loc.lastIndexOf('/'), loc.length).split('/')[1];
$scope.Message = "This is ORDER Page with query string id value =" + $routeParams.userid;
}])
But I always get "undefined" for the para $routeParams.userid
What is wrong in my code? Please help thanks!
Here is a working example:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
user 11
user 12
<div ng-view></div>
<script>
var app = angular.module('app', ['ngRoute']);
app.config([
'$locationProvider', '$routeProvider',
function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
}).hashPrefix('!');
$routeProvider
.when('/Home/User/:userid', {
template: '<pre>{{ message }}</pre>',
controller: 'UserController'
});
}]);
app.controller('UserController', ['$scope','$routeParams', function ($scope, $routeParams) {
$scope.message = "userid = " + $routeParams.userid;
}]);
</script>
</body>
</html>
JSBin http://output.jsbin.com/geluli
You may read more about default router here (nice examples + tests) https://docs.angularjs.org/api/ngRoute/service/$route
I am not sure why the routing isnt working. View1.html consists of a simple web page and the same goes with view2.html. Both view1.html and view2.html are in a folder called partials and "angular-route.js" and "angular-route.min.js" are in a folder called node_modules in home folder. I am using ubuntu 14.04.
<script src="scripts/angular.min.js"></script>
<script src="/node_modules/angular-route/angular-route.js"></script>
<script src="/node_modules/angular-route/angular-route.min.js"></script>
<script>
var demoApp = angular.module('demoApp', ['ngRoute']);
demoApp.config( function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'SimpleController' ,
templateUrl: 'partials/view1.html' //
})
.when('/view2',
{
controller: 'SimpleController' ,
templateUrl: 'partials/view2.html'
})
.otherwise({ redirectTo : '/' })
})
demoApp.controller('SimpleController', function ($scope)
{
$scope.customers = [{name:'nihal',city:'hyderabad'},{name:'nihal',city:'mumbai'}, {name:'john',city:'bangalore'}]
$scope.addCustomer = function() {
$scope.customers.push({name: newCustomer.name , city: newCustomer.city })
}
})
</script>
</body>
</html>
You have incorrect syntax in routes, comma is missing after controller property.
For some reason my Angular site isn't working. I've included all the files. but for some reason angular isn't triggered to do something.
This is how my index.html looks like:
<!DOCTYPE html>
<html ng-app="ngTest">
<head>
<title></title>
</head>
<body>
<h2>Test</h2>
<ng-view></ng-view>
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="Scripts/angular-animate.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers/home/HomeCtrl.js"></script>
</body>
</html>
All included scripts return 200 in the developer console, so I'm sure they are loaded fine.
Then my app.js looks like this:
window.app = angular.module('ngTest', ['ngRoute', 'ngResource', 'ngAnimate']);
app.config(['$routeProvider', '$locationProvider', '$httpProvider', '$provide', function ($routeProvider, $locationProvider, $httpProvider, $provide) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
$httpProvider.defaults.useXDomain = true;
$locationProvider.html5Mode(true);
$routeProvider
.when('/Home', { templateUrl: '/app/views/home/Home.html', controller: 'HomeCtrl' })
.otherwise({ redirectTo: '/Login' });
}]);
The HomeCtrl.js simply looks lke this:
app.controller('HomeCtrl', ['$scope', function ($scope) {
init();
function init() {
alert('aaa');
}
}]);
And the Home.html only contains a piece of text.
Then when I navigate to: localhost/#Home then I expect it to load my Home.html in the ng-view tag. But that's not happening. It only loads my index.html but no angular code seems to be triggered.
Am I still missing something?
Try:
angular.module('ngTest', ['ngRoute', 'ngResource', 'ngAnimate']).
config(['$routeProvider', '$locationProvider', '$httpProvider', '$provide', function ($routeProvider, $locationProvider, $httpProvider, $provide) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
$httpProvider.defaults.useXDomain = true;
$locationProvider.html5Mode(true);
$routeProvider.when('/Home', {
templateUrl: '/app/views/home/Home.html',
controller: 'HomeCtrl'
})
.otherwise({
redirectTo: '/Login'
});
}]);
You could do that for controlers :
angular.module('ngTest.controllers', []);//Declare controllers
angular.module('ngTest.controllers').
controller('HomeCtrl',['$scope', function ($scope) {
init();
function init() {
alert('aaa');
}
}]);
By the way, with html5Mode(true) your path will be localhost/Home.