I'm trying to run Hybrid Angular application using ngUpgrade from documentation. The problem is that no matter what I'll do AngularJS is just not raising.
When I put Angular and AngularJS together then both application runs.
<body>
<app-root><app-root>
<div ng-app="app"></div>
</body>
but of course this is wrong, Angular should bootstrap AngularJS, so I changed it to:
<body>
<app-root>
<div id="ng-app"></div>
<app-root>
</body>
And in Angular Module I added:
export class AppModule {
constructor(private upgrade: UpgradeModule) { }
ngDoBootstrap() {
this.upgrade.bootstrap(document.getElementById('ng-app'), ['app']);
}
}
But still nothing, I have no idea even how I can investiage it and where the problem may be.
Ok I found issue, I had declared bootstrap inside #NgModule({...})
Related
My app component (an Angular 2 component, downgraded for index.html) contains this:
<router-outlet></router-outlet>
<div ng-view></div>
This is just like it says to do in "Dividing routes between Angular and AngularJS"
https://angular.io/docs/ts/latest/guide/upgrade.html#!#adding-the-angular-router-and-bootstrap
But the ng-view isn't picking up any AngularJS routes.
How would ng-view work in an Angular 2 template anyway? How am I supposed to be able to use both types of routers at the same time?
<router-outlet></router-outlet> isn't working either -- this html just shows up on the page statically as-is.
I have <base href="/"> and the javascript console has no errors in it.
Google, message me :) who/ajxtaylor
This has gotten me closer in the right direction but it's still not working.
<router-outlet> wasn't working because I was missing the top level app component in the bootstrap array:
#NgModule({
bootstrap: [
AppComponent,
],
})
export class AppModule {
ngDoBootstrap() {}
}
https://angular.io/docs/ts/latest/guide/upgrade.html#!#dividing-routes-between-angular-and-angularjs
Submitted GitHub issue regarding lack of error message: https://github.com/angular/angular/issues/14572
I don't know if the Angular AppComponent is supposed to have downgradeComponent called on it and if so, whether the index.html should use the AngularJS selector or the Angular selector.
Can I create a module for authentication and then bind to its controllers from a view in another app / module? For example, creating a common LoginController and then have login pages in my other apps that would use this controller? If so, how? I cannot find any examples but the docs make me think this is possible.
Yeah so long as you have a script/module loaded up and set as the dependency of your app used for the ng-app or for manually bootstrapping the app then you can use any of the controllers/providers defined in those modules.
angular.module('A',['B']);
angular.module('B', []).controller('MyController',function($scope){ $scope.doSomething = function(){alert('did something')}});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="A">
<div ng-controller="MyController">
<button ng-click="doSomething()">Do Something</button>
</div>
</div>
You could have multiple modules by that you can separate out your code.
Basically you can create a separate module for your LoginController, like
angular.module('authentication',[])
.controller('LoginController', function($scope){
//code here
});
then you main app module you should add this module
angular.module('app',['authentication']
Then you can use this app module as ng-app or you could bootsrap the same module.
Sorry, this seems a duplicated questions, but I tried all answered questions close to my question, with no success.
I am trying to introduce angular.js into a legacy system.
the system is using the .load jquery function to dynamically load div content with a page from an ASP.NET MVC page.
my brief html will look like this
<body ng-app="myApp">
<div ng-controller="myCtrl">
any content...
<div id="dyncontent"> </div>
</div>
and my javascript legacy code looks like
$('#dyncontent').load('/showviewcontent');
I added in the dynamic content, some angular directive and binding instruction
my angular code is like this
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function ($scope) {
.....
});
How to make the binding / angular directive works on the newly added content?
You need to manually start the angular module using angular.bootstrap
$('#dyncontent').load('/showviewcontent', function() {
angular.bootstrap(document.getElementById('dyncontent'), ['myApp']);
});
I am trying to show a jQuery modal popup in my custom dnn module and for it I used below code which works fine.
<div id="dialog-form" title="Notices">
<div>
My Notice 1
</div>
</div>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(function () {
$("#dialog-form").dialog({
modal: true,
buttons: {
Close: function () {
$(this).dialog("close");
}
}
});
});
</script>
My concern is that in above code I have referred to jQuery UI file directly using link tag and I know that DNN ships with jquery UI files itself. So there must be some way to avoid referencing UI css file directly and using what dnn already comes with.
I have tried using below lines in my modules code behind but none of them worked for me
DotNetNuke.Framework.jQuery.RequestUIRegistration();
JavaScript.RequestRegistration(CommonJs.jQueryUI); //obsolete in DNN7.2
I also tried method mentioned at below link
http://www.ifinity.com.au/Blog/EntryId/121/Using-jQuery-UI-with-DotNetNuke-5-and-6-in-the-same-module
In order to register jquery and jquery UI you should call:
using DotNetNuke.Framework.JavaScriptLibraries;
//...
JavaScript.RequestRegistration(CommonJs.jQuery);
JavaScript.RequestRegistration(CommonJs.jQueryUI);
Hi guys I am using this http://www.jquery-steps.com/Examples as my wizard form plugins.
I notice that it has a conflict with Ckeditor plugin with an error of Uncaught TypeError: Cannot read property 'unselectable' of null.
I just tried the solution on this post Ckeditor with jQuery form wizard but it doesn't fix the issue.
What is the best solution for this?
I guess you put the CKeditor right into the wizard HTML code. In that case what´s really important to understand is that jQuery Steps manipulates DOM objects. That´s really bad for javascript code in general.
To run javascript controls within jQuery Steps you have to ensure that:
no javascript code goes inside your wizard HTML
first jQuery Steps code executes and then the javascript code that belongs to the HTML inside the wizard HTML
Good example:
<script>
$(function ()
{
// first jQuery Steps
$("#wizard").steps();
// then components inside jQuery Steps
$("#editor").ckeditor();
});
</script>
<div id="wizard">
<h1>Title</h1>
<div>
<div id="editor"></div>
</div>
</div>
Bad example:
<script>
$(function ()
{
$("#wizard").steps();
});
</script>
<div id="wizard">
<h1>Title</h1>
<div>
<script>
$(function ()
{
$("#editor").ckeditor();
});
</script>
<div id="editor"></div>
</div>
</div>
Cheers,
Rafael