I'm very new to Angular.js.
I've taken the necessary elements from this tutorial on modal windows within Angular.js: http://jasonwatmore.com/post/2016/07/13/angularjs-custom-modal-example-tutorial
Isolated, I can get this code to work, but after porting it to my website, I just can't get it to work.
In Jason's code, he has a file called index.controller.js, and although I've ported this file to my own page, I don't believe it's firing. Here's index.controller.js:
(function () {
angular
.module('app')
.controller('Home.IndexController', Controller);
function Controller(ModalService) {
var vm = this;
vm.openModal = openModal;
vm.closeModal = closeModal;
function openModal(id){
ModalService.Open(id);
}
function closeModal(id){
ModalService.Close(id);
}
}
})();
On my own page, I have all the controllers contained within app.js. Here's how it's laid out:
var app = angular.module('app', ['ngRoute', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url: '/',
templateUrl: 'pages/main.html',
controller: 'mainController',
controllerAs: 'vm'
})
.state('screenings', {
url: '/screenings',
templateUrl: 'pages/screenings.php',
controller: 'Home.IndexController',
controllerAs: 'vm'
})
...
});
You can see that, in the second .state, I'm attempting to call on the index.controller.js file for this particular partial. For some reason, though, the code under screeningsController (down below) is the code that's firing.
Further down in the same app.js file, I have my controllers:
...
app.controller('screeningsController', ['$scope', '$log', function($scope, $log){
$scope.popup = function() {
// assign a message to the $scope
$scope.message = 'Hello World!';
// use the $log service to output the message in a console
$log.log($scope.message);
};
}]);
...
Is there any way I can somehow integrate what's in the index.controller.js file into my screeningsController in the app.js? I've been trying to get a modal window working on my site for about a week now. Any help is much appreciated.
Start by creating a controller with identifier Home.IndexController. Based on the route configuration this will instantiate when you navigate to "/screenings". Call the popup() function attached to $scope of Home.IndexController via a directive us ng-click for testing. As you have specified controllerAs make sure to reference controller properties and methods prefixed with vm..
You do not need both index.controller.js and app.js both loaded. It looks everything you'd need is defined in app.js, so just make sure that is being loaded in your application. Eventually you'd want to separate these into different files and/or modules as necessary.
Try the following:
Configuration:
var app = angular.module('app', ['ngRoute', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url: '/',
templateUrl: 'pages/main.html',
controller: 'mainController',
controllerAs: 'vm'
})
.state('screenings', {
url: '/screenings',
templateUrl: 'pages/screenings.php',
controller: 'Home.IndexController',
controllerAs: 'vm'
});
...
});
Home.IndexController:
app.controller('Home.IndexController', ['$log', function($log){
var vm = this;
vm.message = '';
vm.popup = function() {
vm.message = 'foobar';
$log.log(vm.message);
}
}]);
Screenings Template:
<!-- Home.IndexController /screenings template -->
<div>
<button type="button" ng-click="vm.popup()"></button>
</div>
This also assumes you have ui-view specified somewhere in your main template like index.html or equivalent:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body ng-app="app">
<div ui-view></div>
<!-- Vendor and Custom scripts added here -->
</body>
</html>
Related
I treid to make a contoller for each of my page but have a broblem. Mistakes in console, and the elements of controller don`t work on html page.
I use $stateProvider cod below is the cod of config, it`s work normal.
var app = angular.module("appmyApp", ['ui.router']);
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider) {
// For any unmatched url, redirect to root
$urlRouterProvider.otherwise("/");
$stateProvider
.state('header', {
abstract: true,
templateUrl: '/app/pages/header.html'
})
.state('home', {
url: '/',
templateUrl: 'app/pages/home.html',
controller: 'HomeController'
})
}]);
When I add in the config the row - controller: 'HomeController'. I have a mistake in console.
angularjs.js:127 Error: [$controller:ctrlreg]
http://errors.angularjs.org/1.7.5/$controller/ctrlreg?p0=HomeController
at angularjs.js:7
at angularjs.js:97
at Object.<anonymous> (viewDirective.ts:410)
at angularjs.js:17
at Ba (angularjs.js:89)
at q (angularjs.js:73)
at g (angularjs.js:64)
at angularjs.js:64
at angularjs.js:69
at n (viewDirective.ts:328) "<div ui-view="" class="ng-scope">"
When I delete it, it is not any mostakes in console.
.state('home', {
url: '/',
templateUrl: 'app/pages/home.html'
})
In both case page opens good. Route is work. But controller is not work.
The cod of controller
var app = angular.module("appTradeRoom", []);
app.controller("HomeController", function ($scope) {
$scope.name = "Hello";
});
But on the view I have this.
http://prntscr.com/lzeyy5
Scripts home-controller.js I added in the head of home.html
<script src="/app/pages/home-controller.js"></script>
I added ng-controller="HomeController" to body in html page home.html but it does not work. What a problem. I Use last angularJS
Here is the reference on index.html
http://prntscr.com/lzf0cd
Change:
var app = angular.module("appTradeRoom", []);
app.controller("HomeController", function ($scope) {
To
var app = angular.module("appTradeRoom");
// ^^ no dependencies
app.controller("HomeController", function ($scope) {
When there are no dependencies angular.module() will act as a getter of existing module, otherwise it will create a new one
AngularJS v1.7.4
I am new to AngularJS and creating a simple app but not sure why one route works (shows the static html from a partial file as well as {{message}} correctly), but the other two routes only show static html and not {{message}} which is being set using $scope.message.
Additionally errors such as
The controller with the name 'ContactController' is not registered.
and
The controller with the name 'AboutController' is not registered.
Are seen in the console when trying to go to 'Contact' and 'About' pages respectively.
For the three routes I have three html files and three controller files. I have made sure to include <body ng-app="gmsApp">.
Files are being loaded as
<script src="./js/bootstrap.bundle.min.js"></script>
<script src="./js/angular.js"></script>
<script src="./js/angular-route.js"></script>
<script src="./js/controllers/about.controller.js"></script>
<script src="./js/controllers/contact.controller.js"></script>
<script src="./js/controllers/home.controller.js"></script>
<link href="./css/bootstrap.min.css" rel="stylesheet" />`
Following advise from other posts I am using the 'regular' js files and not 'minified' versions of angular and angular-route.
The code in main html file is:
var app = angular.module("gmsApp", ['ngRoute', 'gmsApp.controllers']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'partials/home.html',
controller: 'HomeController'
}).
when('/about', {
templateUrl: 'partials/about.html',
controller: 'AboutController'
}).
when('/contact', {
templateUrl: 'partials/contact.html',
controller: 'ContactController'
}).
otherwise({
redirectTo: '/home'
});
}]);
/js/controllers/home.controller.js
angular.module('gmsApp.controllers', [])
.controller('HomeController', function ($scope) {
$scope.message = 'Main page of the app';
});
/js/controllers/about.controller.js
angular.module('gmsApp.controllers', [])
.controller('AboutController', function ($scope) {
$scope.message = 'This is about us page';
});
/js/controllers/contact.controller.js
angular.module('gmsApp.controllers', [])
.controller('ContactController', function ($scope) {
$scope.message = 'Contact Us page ...';
});
/partials/home.html
<div ng-controller="HomeController">
<h3>Home page</h3>
<p>{{message}}</p>
</div>
/partials/about.html
<div ng-controller="AboutController">
<h3>About Us</h3>
<p>{{message}}</p>
</div>
/partials/contact.html
<div ng-controller="ContactController">
<h3>Contact Us</h3>
<p>{{message}}</p>
</div>
The error come from the fact that you are recreating your module in each of your controller. This line should be present in only one of your files (could be your main file):
angular.module('gmsApp.controllers', [])
Then in "/js/controllers/home.controller.js,"/js/controllers/about.controller.js" and "/js/controllers/contact.controller.js", you should use it like this:
angular.module('gmsApp.controllers')
Note that this time you don't use the "[]". The difference between the two is that here you will access the already created module.
From angularjs docs:
Beware that using angular.module('myModule', []) will create the
module myModule and overwrite any existing module named myModule. Use
angular.module('myModule') to retrieve an existing module.
Angular UI-Router is not working? Please see my code on plunker.
I am trying to run a very basic routing example in angular js. But welcomeView.html is not appearing on the page.
(function() {
"use strict"
var app = angular.module("plunker", ["ui.router"]);
app.config(["$stateProvider", "$urlRouterProvider",
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state("home", {
url: "/",
templateUrl: "welcomeView.html"
})
}
]);
}());
There is updated and working version
Firstly we need to add reference to app.js with our module
<head>
...
<script src="app.js"></script> // was missing
<script src="script.js"></script>
</head>
Also, we should not use ng-controller, we do not need is with UI-Router
//<body ng-controller="MainCtrl">
<body>
The app.js on the other hand, should contain controller : "..."
$stateProvider
.state("home", {
url: "/",
templateUrl: "welcomeView.html",
// declare it here
controller: "MainCtrl",
})
Then, in script.js, we cannot redefine the module plunker (using setter) - we have to just take it (using getter)
// this would redefine the app.js stuff
//var app = angular.module('plunker', []);
// just a getter to get that module
var app = angular.module('plunker');
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
check that all in action here
I'm trying to do basic routing in Angular.
My config looks like
app.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/', {
templateUrl: 'home.html', controller: 'loginCtrl'
},
$routeProvider.when('/user_profile/, {
templateUrl: 'user_profile.html', controller: 'UserProfileCtrl'
}
});
When I have a link that goes to user_profile I'm unable to get the $route params.
Go To Profile
In the controller $route.params is undefined.
I tried to make a plnkr but clearly I'm missing something fundamental here
EDIT: $routeParams
I have a module that get's the user info from the server. When I pass in $routeParams is it set to this.
<script type="text/javascript">
angular.module('userFromServer', [])
.service('currentUser', function() {
<% if logged_in %>
this.name = '<%= #User.name %>';
this.id = '<%= #User.id %>'
<% else %>
this.name, this.id = '';
<% end %>
})
</script>
Take a look at this
You can use $routeParams for getting the routing parameteres
Plunker (Non HTML5 Mode)
Plunker (HTML5 Mode)
app = angular.module('MyApp', ['ngRoute']);
app.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: 'home.html',
controller: 'loginCtrl'
})
.when('/user_profile/:user_id', {
templateUrl: 'user_profile.html',
controller: 'UserProfileCtrl'
});
});
app.controller('loginCtrl', function($scope, $routeParams) {
$scope.name = "Hello"
console.log($routeParams);
});
app.controller('UserProfileCtrl', function($scope, $routeParams) {
$scope.name = "UserProfile"
console.log($routeParams);
});
YOu need $route as a parameter in your controller.
app.controller('myCtrl', function($route) {
try to get it from
$routeParams.user_id
... assuming that you are injecting them to controller and you route looks something like this
$routeProvider.when('/user_profile/:user_id, {
templateUrl: 'user_profile.html',
controller: 'UserProfileCtrl'
}
I know this is old, but maybe my solution can still help people.
If your HTML document has a title element in the head element
$Route does not work as expected.
Rather set ALL the Application title's in the app.config function.
From the documentation:
Note that the $routeParams are only updated after a route change completes successfully. This means that you cannot rely on $routeParams being correct in route resolve functions. Instead you can use $route.current.params to access the new route's parameters.
I am using templateUrl to display specific php pages in my webpage. Now I wish to scrap the individual php pages and display code with variables passed to it. What is the easiest way to get back to this?
var AppModule = angular.module('App', ['ngAnimate', 'ngRoute']);
AppModule.config(function($routeProvider) {
$routeProvider
.when('/page:pageNumber', {
templateUrl: function ($routeParams) {
return '/app/..../assets/html/page' + $routeParams.pageNumber + '.php';
},
controller: "PageCtrl"
})
.otherwise({
redirectTo: "/page1"
});
});
AppModule.controller("ViewCtrl", function($scope, $timeout) {
$scope.$on("$routeChangeSuccess", function(event, current, previous) {
...stuff...
});
});
Use scripts via text/ng-template, which allows you to write your templates inline while declaring a url to access them by. The following code can go directly in your index.html, and if your config is set to show '/my-template.html', the inline template will be output right in the ng-view above it.
<ng-view />
<script type="text/ng-template" id="/my-template.html">
template goes here
</script>
Then in your config:
.when('/', {
templateUrl: '/my-template.html'
});
Here's a little more info from the Angular docs:
https://docs.angularjs.org/api/ng/directive/script
And lastly, this technique is demonstrated in one of the TodoMVC examples for Angular:
View: https://github.com/tastejs/todomvc/blob/gh-pages/examples/angularjs/index.html
Config: https://github.com/tastejs/todomvc/blob/gh-pages/examples/angularjs/js/app.js