I am building my first angularJS app and I am struggling with getting parameters from my URL into my code.
The URL has a single parameter, subject and all I am trying to do at this stage is display it on the screen...
Javascript:
app.config(function($routeProvider) {
$routeProvider
.when('/setspage/:subject',
{templateUrl: "setspage.html",
controller: "setsController"
}),
});
angular.module("app").controller("setsController", function($scope, $routeParams, $http) {
$scope.selectedSubject = routeParams.subject
});
HTML:
<body ng-controller="setsController">
<div class="page-header">
<h1>Subject : {{selectedSubject}}</h1>
</div>
<script src="./node_modules/angular/angular.js"></script>
<script src="./node_modules/angular-route/angular-route.js"></script>
<script src="scripts/app.js"></script>
</body>
change
routeParams.subject
to
$routeParams.subject
Change your controller like this
angular.module("app").controller("setsController",['$scope', '$routeParams', '$http', function($scope, $routeParams, $http) {
$scope.selectedSubject = $routeParams.subject
}]);
Related
I'm trying to split my angularjs controllers into files but failing everytime.
Directory Structure:
--public--
--js/controller/resturant.js
--js/master.js
--index.php
Code for master.js
angular.module("rsw",['rsw.controller']);
Code for resturant.js
angular.module('rsw.controller').controller('resturant', ['$scope', '$http', function($scope, $http){
$scope.data="Test"
}]);
Code for index.php
--
<div ng-app="rsw">
<span ng-controller="resturant">
{{ data }}
</span>
</div>
--
EDIT:
I've included only 'master.js' in my index.php, do I need to import 'resturant.js" too?
You need to use the correct module definition call. That is, angular.module(name) retrieves a module and angular.module(name, [requires]) creates one.
angular.module('rsw.controller', [])
.controller('resturant', ['$scope', '$http', function($scope, $http){
$scope.data="Test"
}]);
After creating your module, you need to then make it a dependency of your app:
angular.module("rsw",['rsw.controller']);
Fixed code:
angular.module("rsw", ['rsw.controller']);
angular.module('rsw.controller', [])
.controller('resturant', ['$scope', '$http',
function($scope, $http) {
$scope.data = "Test"
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="rsw">
<span ng-controller="resturant">
{{ data }}
</span>
</div>
I think you had set up your controller wrong.
Try typing this instead:
angular.module('rsw').controller('resturant', ['$scope', '$http', function($scope, $http){
$scope.data="Test"
}]);
something like this should work...
file structure:
--public
--js
--controllers
--resturant.js
--app.js
--appRoutes.js
--views
--index.php
// resturant.js
angular.module('rswCtrl', []).controller('RswController', [$scope, function($scope) {
}]);
// appRoutes.js
angular.module('appRoutes', []).config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/index.php',
controller: 'RswController'
});
}]);
// app.js
angular.module('myApp', ['appRoutes', 'rswCtrl']);
and then don't forget to include paths to all these files in your index.php file. Hope I'm not missing something..
Can you help me please? I try to render page with AngularJS. Page has been rendered, but in console of browser it give me error.
app.js (main angular file)
var DevApp = angular.module("DevApp", [ 'ngRoute' ])
.config(['$routeProvider',function($routeProvider) {
$routeProvider.when('/', { templateUrl: 'tpl/index.html', controller: "MainCtrl" })
.otherwise({
url: '/',
controller: "MainCtrl",
templateUrl: "tpl/index.html"
});
}])
.controller('MainCtrl', [
'$scope',
'$http',
'$routeParams',
'$element',
'$timeout',
function($scope, $http, $routeParams, $element, $timeout) {
console.log(1);
}
]);
tpl/index.html (temppate of MainCtrl)
<div ng-controller="MainCtrl">
Главная страница
</div>
index.html (main file)
<!DOCTYPE html>
<html ng-app="DevApp">
<head>
<link rel="stylesheet" href="/bootstrap/dist/css/bootstrap.min.css">
<script type="text/javascript" src="/javascripts/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/javascripts/angular/angular.min.js"></script>
<script type="text/javascript" src="/javascripts/angular/angular-route.js"></script>
<script type="text/javascript" src="/javascripts/angular/app.js"></script>
<script type="text/javascript" src="/bootstrap/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
I receive error:
angular.js:12416
Error: [$injector:unpr] http://errors.angularjs.org/1.4.5/$injector/unpr?p0=%24elementProvider%20%3C-%20%24element%20%3C-%20MainCtrl
at Error (native)
at http://127.0.0.1:3000/javascripts/angular/angular.min.js:6:416
at http://127.0.0.1:3000/javascripts/angular/angular.min.js:40:307
at Object.d [as get] (http://127.0.0.1:3000/javascripts/angular/angular.min.js:38:308)
at http://127.0.0.1:3000/javascripts/angular/angular.min.js:40:381
at d (http://127.0.0.1:3000/javascripts/angular/angular.min.js:38:308)
at e (http://127.0.0.1:3000/javascripts/angular/angular.min.js:39:64)
at Object.instantiate (http://127.0.0.1:3000/javascripts/angular/angular.min.js:39:213)
at http://127.0.0.1:3000/javascripts/angular/angular.min.js:80:257
at link (http://127.0.0.1:3000/javascripts/angular/angular-route.js:977:26) <div ng-view="" class="ng-scope">
Unknown provider: $elementProvider <- $element <- MainCtrl, which means that the $element could not be injected in your MainCtrl.
Try this
var DevApp = angular.module("DevApp", [ 'ngRoute' ])
DevApp.config(['$routeProvider',function($routeProvider) {
$routeProvider.when('/', { templateUrl: 'tpl/index.html', controller: "MainCtrl" })
.otherwise({
url: '/',
controller: "MainCtrl",
templateUrl: "tpl/index.html"
});
}])
DevApp.controller('MainCtrl', [
'$scope',
'$http',
'$routeParams',
'$element',
'$timeout',
function($scope, $http, $routeParams, $element, $timeout) {
console.log(1);
}
]);
I didn't test your code but maybe there is typo in the router declaration ( there is no 'url' param )
.config(['$routeProvider',function($routeProvider) {
$routeProvider.
when('/', { templateUrl: 'tpl/index.html', controller: "MainCtrl" })
otherwise({
redirectTo: '/'
});
}])
I made a two pages using angularjs ngRoute. On first page I show two connected jsPlumb objects.
Second page does not contain an Plumb object. However, when I go from first page to second Plumb objects does not disappear. Do you know how to achieve proper jsPlumb refresh with ng-view update?
http://plnkr.co/edit/8592E9BnuwVXuKAJ5Pdx?p=preview
script.js
var app;
app = angular.module('ironcoderApp', [
'ngRoute',
'appControllers'
]);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/page1', {
templateUrl: 'page1.html',
controller: 'Page1Controller'
}).
when('/page2', {
templateUrl: 'page2.html',
controller: 'Page1Controller'
}).
otherwise({
redirectTo: '/page1'
});
}]);
var appControllers = angular.module('appControllers', []);
app.controller('Page1Controller', ['$scope', '$rootScope', '$routeParams', '$location', '$timeout',
function($scope, $rootScope, $routeParams, $location, $timeout) {
$scope.text = 'page1';
$timeout(function(){
jsPlumb.connect({'source': $("#page1el1"), 'target': $("#page1el2"), 'label': 'te'});
}, 0);
}
]);
app.controller('Page2Controller', ['$scope', '$rootScope', '$routeParams', '$location',
function($scope, $rootScope, $routeParams, $location) {
$scope.text = 'page2';
}
]);
app.controller('MainController', ['$scope', '$rootScope', '$location',
function($scope, $rootScope, $location) {
$scope.text = 'main';
}
]);
page.html:
<script type="text/ng-template" id="page1.html">
<div id="page1el1" style="border: 1px red solid; width: 60px;">page1el1</div>
<br>
<div id="page1el2" style="border: 1px red solid; width: 60px;">page1el2</div>
<br>
page1
go to page2
</script>
<script type="text/ng-template" id="page2.html">
<br><br><br><br><br><br><br>
<div id="page2el1" style="border: 1px green solid; width: 60px;">page2el1</div>
<br>
<div id="page2el2" style="border: 1px green solid; width: 60px;">page2el2</div>
<br>
page2
go to page1
</script>
<div ng-view >
</div>
There is a typo in your code.
When the route is /page2, the controller should be Page2Controller not Page1Controller
We have to manually disconnect the jsPlumb on navigating to page2.
function($scope, $rootScope, $routeParams, $location, $timeout) {
$scope.$on('$destroy', function () {
jsPlumb.detachAllConnections( $("#page1el2"))
});
$timeout(function(){
jsPlumb.connect({'source': $("#page1el1"), 'target': $("#page1el2"), 'label': 'te'});
}, 0);
});
Here is the updated plunker: http://plnkr.co/edit/mtjamVFRpjphpYE0Yqub?p=preview
I found that the jsPlumb.ready() function does not work when used with angular code inside ngView.
What worked for me was to place all the ready event code in the angular $viewContentLoaded
$scope.$on('$viewContentLoaded', function (event) {
// All the ready code goes here.
}
I've started learning Angular JS and I'm having a problem with injecting a service into a controller. I'm trying to put the ThreadFactory service into ThreadController, but I'm getting an undefined error when calling it. Any advice would be great. The error I'm getting is:
Unknown provider: $scopeProvider <- $scope <- ThreadService
app.js
angular.module('threadsApp', ['ngRoute']);
angular.module('threadsApp')
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/index.html',
})
.when('/selected/:topicName', {
templateUrl: 'views/threads.html',
controller: 'ThreadController',
})
.otherwise({
redirectTo: "/"
});
$locationProvider.html5Mode(true);
});
ThreadController.js
angular.module('threadsApp').controller("ThreadController",
["$scope", "$route", "$routeParams", "ThreadService", function ($scope, $route, $routeParams, ThreadService) {
$scope.test = "Hello!";
$scope.test2 = ThreadService.get();
}]);
ThreadService.js
angular.module('threadsApp').service("ThreadService", ["$scope", function ($scope) {
return {
get: function() {
return "Hello";
}
}
}]);
Order of Imports
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="components/app.js"></script>
<script src="components/bodyController.js"></script>
<script src="components/TopicController.js"></script>
<script src="components/ThreadService.js"></script>
<script src="components/ThreadController.js"></script>
You can't actually inject $scope into your ThreadService the way you're trying to. $scope isn't a typical service when you inject it into a controller. If you remove the $scope injection from Threadservice.js, I would bet the error will go away.
In the interest of not being redundant, a fuller explanation can be found here:
Injecting $scope into an angular service function()
I want to use AngularJS in combination with Django to make single-page application. In general, I have index page (search) and details page with more sub-pages.
And that makes a problem. I have one controller (for details and it is getting info about object which is chosen) and other controllers user that main controller using $controller function.
It looks like:
.controller('BuildingDetailsCtrl', ['$scope', '$routeParams', 'buildingsRepository', '$location',
function($scope, $routeParams, buildingsRepository, $location) {
$scope.details = null;
$scope.menu = templatesFolder + "buildings/menus/";
$scope.currentUrl = $location.url();
$scope.loading = true;
buildingsRepository.getDetails($routeParams.slug).then(function(res) {
$scope.details = res.data[0];
$scope.loading = false;
});
$scope.alert = {"type": null, "message": null};
}])
.controller('SecondCtrl', ['$scope', '$routeParams', 'buildingsRepository', '$location', '$controller',
function($scope, $routeParams, buildingsRepository, $location, $controller) {
$controller('BuildingDetailsCtrl', {$scope: $scope, $routeParams: $routeParams, buildingsRepository: buildingsRepository, $location: $location})
$scope.partial = templatesFolder + "buildings/details/info.html";
}])
and my urls:
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {templateUrl: templatesFolder + "buildings/index.html", controller: 'UserBuildingsCtrl'});
$routeProvider.when('/details/:slug', {templateUrl: templatesFolder + "buildings/details.html", controller: 'BuildingInfoCtrl'});
$routeProvider.when('/test/:slug', {templateUrl: templatesFolder + "buildings/details.html", controller: 'SecondCtrl'});
$routeProvider.when('/contact/:slug', {templateUrl: templatesFolder + "buildings/details.html", controller: 'BuildingContactCtrl'});
$routeProvider.otherwise({redirectTo: '/'});
}]);
On that details.htmlpage, I have one menu, but problem is loading, and everytime I change from, for example, InfoCtrl to SecondCtrl, my menu is being refreshed and I can see that (less than half second). It is irritating.
Is there any way to prevent loading of those templates, to load just partial, but with changing URL (I need it to be accessed from copied url etc)?
You can embed your template in the already-rendered page as a script of type text/ng-template:
<script type="text/ng-template" id="details.html">
<p>hello world</p>
</script>
Here is a plunk.
You should not need to call $controller() in your controller. You angular app will instance the controller needed by including a directive in your html like this:
<div ng-controller="BuildingDetailsCtrl">
...
</div>