Hey guys i got a problem with implementing ngDialog in my current project.
For testing i have created following working code:
test.php
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.1.6/ng-dialog.min.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.1.6/ng-dialog-theme-plain.min.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.21/angular.js" data-semver="1.2.21"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.1.6/ng-dialog.min.js"></script>
<script src="neuejs.js"></script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="openDialog($event)">Open Me!</button>
<script type="text/ng-template" id="templateId">
<div id="target" ng-click="test()" ng-controller="tt">
Bilder
</div>
</script>
</body>
</html>
and in a seperate neuejs.js:
var app = angular.module('myapp', ['ngDialog']);
app.controller('MainCtrl', function($scope, ngDialog) {
$scope.openDialog = function($event) {
var dialog = ngDialog.open({
template: 'templateId',
scope: $scope,
controller: 'FileController',
$event: $event,
className: 'ngdialog-theme-plain'
});
};
});
This works just fine. Exactly what i want.
My existing project has an app.js file with
var iMPULS = angular.module('iMPULS', []);
and the project works fine as well, but if i want to use ngDialog and change the module to:
var iMPULS = angular.module('iMPULS', ['ngDialog']);
the whole layout is kind of messed up, no link in my iMPULS.conf work anymore plus i got "Error: No module: ngDialog" concerning to angular.min.js in Firefox-Browserconsole.
How could this be? I just addes the 'ngDialog' to the module in app.js just like in the testfiles above.
Related
We had to update the Bootstrap version (bs3 to bs4). We have some issues with Angularjs modal.It only works in bs3.4.1 version not even 3.4.2. Below is a similar piece of code, the problem is,
It looks like a template has been added to the dom, but the modal doesn't appear and behave like a modal. How can I solve this problem. Any help will be really appreciated.
<html>
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript">
var app = angular.module("app", ['ui.bootstrap']);
app.controller("democontroller", ["$scope", "$modal", function($scope, $uibModal){
$scope.click = function(){
$uibModal.open({
templateUrl: "modal.html",
controller: "modal",
scope: $scope
});
}
}]);
app.controller("modal", modal);
function modal() {
console.log("in modal controller")
}
</script>
</head>
<body>
<div ng-app="app" ng-controller="democontroller">
<button type="button" class="btn btn-default" ng-click="click()">
Open modal
</button>
<script type="text/ng-template" id="modal.html">
<h1>modal</h1>
</script>
</div>
</body>
</html>
If you change your style link to this (in the shaded area below) the modal should work. I got the link from here fyi:
https://getbootstrap.com/docs/3.3/getting-started/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
I am new to angularjs and have written a small program but facing the error "scope.detailsForm" as undefined. Could someone help me what is the issue with the below code.
b.js file:
var app = angular.module('my-app', []);
app.controller("my-cont", function($scope) {
$scope.detailsForm.clickme.$setValidity("error1",true);
});
b.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="b.js"></script>
</head>
<body ng-app="my-app" ng-controller="my-cont">
<form method="get" name="detailsForm" ng-model="detailsForm">
<button name='clickme' ng-disabled="detailsForm.clickme.$error.error1">Click Me!</button>
</form>
</body>
</html>
Your problem is that you can not get it when the controller is not built, you need to wait for the html to be processed by Angular. Here's an example.
As you'll see in the console, the first log will echo undefined, and the second will echo the form.
var app = angular.module('MyApp', []);
app.controller("MyCont", ['$scope', function($scope) {
console.log($scope.detailsForm);
$scope.onClicked = function()
{
console.log($scope.detailsForm);
}
}]);
I am trying to creae an application in angular using ng-route but i cannot get it to work.
I did search the issue and tried suggestions like to move my ng-app to but nothing seems to work.
I have added a plunker link below
http://plnkr.co/edit/a8VIRzloIMqANK4f8YXb?p=preview
Can someone help
adding the code here too
index html
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script type="text/javascript" src="dist/ng-table.min.js"></script>
<link rel="stylesheet" href="dist/ng-table.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js"></script>
<link href="main.css" rel="stylesheet" />
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="DemoCtrl.js"></script>
</head>
<body ng-controller="DemoCtrl" ng-app="stockApp">
<header>
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<h1 class="stockHeader">Stock App</h1>
<a class="blog-nav-item pull-right" href="#/">Login</a>
<a class="blog-nav-item pull-right" href="#/stock">Stock</a>
<a class="blog-nav-item active pull-right" href="#/addTools">Add Tools</a>
</nav>
</div>
</div>
</header>
<div ng-view></div>
</body>
</html>
app.js
var sampleApp = angular.module('stockApp', ['ngRoute']);
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'login.html',
controller: 'DemoCtrl'
}).
when('/stock', {
templateUrl: 'stockStatus.html',
controller: 'DemoCtrl'
}).
when('/addTools', {
templateUrl: 'addTools.html',
controller: 'DemoCtrl'
}).
otherwise({
redirectTo: '/'
});
}]);
DemoCtrl.js
var app = angular.module('stockApp', ['ngTable']).
controller('DemoCtrl', function($scope) {
$scope.stock="In Stock!"
})
other than these have 3 partials.
See this fork of your original plunker where the code segments below have been updated: http://plnkr.co/edit/91XYMEC85Shgu6kQSrty?p=preview
// DemoCtrl.js
var app = angular.module('controllers', []).
controller('DemoCtrl', function($scope) {
$scope.stock="In Stock!"
})
// app.js
var sampleApp = angular.module('stockApp', ['ngRoute', 'controllers']);
First, your controller code was re-initializing the stockApp module by passing in dependencies. If you need separate depedencies for your controllers, create them as a separate module and make your app dependent on that module.
Second, I updated the versions of angular and angular JS. Conflicting versions can cause issues as per this prior answer: Failed to instantiate module [$injector:unpr] Unknown provider: $routeProvider.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
One additional thing to check on... make sure you're loading your angular js files (controllers, services, factories, etc) in the correct order. For example, if a controller uses a service, the service needs to be loaded into the DOM before the controller.
Additionally, make sure that none of your services or factories are re-initializing the app. Your code should NOT look like this:
angular.module('app', [])
.service('TrxnService', function () {
//code here
})
But instead, it should look like this (without the brackets)...
angular.module('app')
.service('TrxnService', function () {
//code here
})
NOTE FOR NEWBIES: replace 'app' with whatever you named your app in your top level module declaration.
Trying to follow a tutorial, I can't get the "Hello, world" example working. Instead it displays: "{{greeting.text}}, world". Using Chrome and AngularJS 1.3.1.
index.html:
<!DOCTYPE html>
<html ng-app>
<head>
<script src="angular.js"></script>
<script src="app.js"></script>
<!--<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />-->
</head>
<body>
<div ng-controller='HelloController'>
<p>{{greeting.text}}, world </p>
</div>
</body>
</html>
app.js
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
My folder structure
root/
angular.js
app.js
index.html
Thank you
I hope this helps.
index.html
<!DOCTYPE html>
<html ng-app="appname">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<link href="style.css" rel="stylesheet"/>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="appCtrl">
<p>{{greeting.text}}, world </p>
</div>
</body>
</html>
script.js
var appname = angular.module('appname', []);
appname.controller('appCtrl', ['$scope',
function($scope) {
$scope.greeting = { text: 'Hello' };
}]);
http://plnkr.co/edit/XmliRcmsZvuQimHoyjN5?p=preview
Answering the question of what is wrong and if they changed something.
AngularJs Version 1.2 or older: The controller could be a function not defined into a module. Like in the question.
Controller
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
Angular Version 1.3 or newer: The controller must be defined into a module. Like in the answer.
Controller
var appname = angular.module('appname', []);
appname.controller('appCtrl', ['$scope',
function($scope) {
$scope.greeting = { text: 'Hello' };
}]);
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCntrl">
Enter text:
<br />
<input type="text" ng-model="hellomodel" />
<br />
<br />
<h1>
{{hellomodel}}</h1>
<script language="javascript">
var myapp = angular.module("myApp", []);
myapp.controller("myCntrl", function ($scope) {
$scope.hellomodel = "Hello World!";
});
</script>
</div>
</body>
</html>
http://dotnetlearners.com/blogs/view/222/AngularJS-Hello-World.aspx
The accepted answer is good but I thought I'd chip in with some resources I've found helpful if you're looking for a better understanding of how things work in Angular
Egghead.io - www.youtube.com/playlist?list=PLP6DbQBkn9ymGQh2qpk9ImLHdSH5T7yw7
Shaping up with Angular www.codeschool.com/courses/shaping-up-with-angular-js
Both are completely free courses and because the egghead.io playlist is split into videos for separate concepts it's also really good reference material.
The angular.js developer guide is also really helpful!
I have a quick question on loading external page with route. I am quite new to AngularJS.
var app = angular.module('app', []);
$routeProvider.when('/list', {
templateUrl: '/list.html'
})
Load up the page, but within the list.html there is controller defined.
list.html:
<script>
app.controller('test', function(){
console.log('test');
});
</script>
<div ng-controller="test">
</div>
The above code will throw me an error as test is undefined function, unless if i place the app.controller('test') to the parent page.
So i can't place controller on external .html files?
Updated link below:
http://plnkr.co/edit/YC6P9W1VfzX8XOyrynCP?p=preview
You have to create a separate script.js and should load in main html page during execution of main page or during click of the link
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="script.js"></script>
<script src="testscript.js"></script>
</head>
<body ng-controller="home">
<h1>Hello Plunker! {{change}}</h1>
Test
<ng-view></ng-view>
</body>
</html>
testscript.js
function test2($scope){
console.log('succeed');
};
script.js
// Code goes here
var app = angular.module('app', ['ngRoute']);
app.controller('home', function($scope){
$scope.change = "change";
$scope.test = function(){
console.log('clicked');
}
});
app.config(function($routeProvider){
$routeProvider.when('/test', {
templateUrl: 'test.html',
controller: function(){
console.log('here');
}
})
});