I'm not able to render simple angular material components even after including all the necessary dependencies.
HTML
<div ng-app="MyApp" layout="row">
<md-button>Button</md-button>
</div>
JS
angular.module('MyApp', ['ngMaterial']);
Here's the link with all the dependencies included:
https://jsfiddle.net/rxby6cac/3/
Confused... What's the issue with this simple code?
I've updated your fiddle... it was fine, the problem was the load type (see picture below). You have to change it to load type no wrap - <body>.
Additionally, I've note that your are using a angular material RC (Release Candidate) version. As a advice try to use a stable version (move to 1.1.3).
Related
We have an AngularJS application. The "main" template is out of it's reach: it's generated by a CMS. We have no idea how the page is going to look like. The AngularJS application starts wherever there's an AngularJS component.
It's not a SPA, we only create interactive components that live until a page refresh comes along.
We bootstrap the application with angular.bootstrap(document, ['App'], { strictDi: true });
A very stripped down version:
<html>
<body>
<div>
<usermenu></usermenu>
</div>
<div>
<item-list></item-list>
</div>
</body>
</html>
We would like to migrate to Angular (6 at the time of writing). I created an app using the cli and merged the generated application with our AngularJS application.
I then followed the ngUpgrade tutorial at https://angular.io/guide/upgrade. Although it is outdated (Still uses SystemJS!) I managed to get up and running: My AngularJS application is bootstrapped by Angular.
In the above mentioned example I have two AngularJS components: usermenu and item-list. They both use an arbitrary amount of services.
As time goes by two things happen:
I convert usermenu as an Angular component, but I am NOT downgrading the component
I create a new Angular component (ie: signout-button)
Consider my new template:
<html>
<body>
<div>
<usermenu></usermenu> <!-- Angular component -->
</div>
<div>
<item-list></item-list> <!-- AngularJS component -->
</div>
<div>
<signout-button></signout-button> <!-- Angular component -->
</div>
</body>
</html>
Will the following template bootstrap both Angular AND AngularJS components?
Or do I need to downgrade both Angular components for it to work?
The ngUpgrade guide mentions something like "AngularJS OWNS the root component". To use an Angular component inside AngularJS you need to downgrade it. To use an AngularJS component inside Angular one needs to upgrade it. But since I have three root components, will it work?
I tried of course, but I was unable to get it working. I have a feeling that the "root component" that AngularJS owns isn't one of the components found, but the element the application is bootstrapped on (document in my case).
Can someone confirm this so I know downgrading components is the only way OR perhaps point me in the right direction on bootstrapping with Angular and AngularJS components "next to eachother" ?
Hello I am using UI Bootstrap for displaying datepicker in my app.
this is my reference order:
<!--ANGULAR CORE-->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-route.min.js"></script>
<!--APPLICATION INIT-->
<script src="app/js/app.js"></script>
<!--JQUERY-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!--BOOTSRAP UI-->
<script src="app/js/libs/ui-bootstrap-tpls-0.11.0.min.js"></script>
I use the tpls version because it supposes to include the templates.
I inject the dependency like that:
angular.module('globapp', ['ngRoute', 'ui.bootstrap'])
when I try to popup the datepicker it doesn't show. In the chrome developer I can see that the code searches for template folder, and I recieve 404 error (datepicker.html, popup.html).
I searched about that in the internet, and everyone tells the same thing: if I use the tpls version, it should provide me the default templates.
thanks
Your app.js has your app init -so that's where your creating your angular module and are hoping to inject bootstrap-ui as a dependency but that script hasn't been loaded yet as it's last in the list.
This would be the first thing to check. Load your scripts in order of least dependent first so jquery first then your core angular, then your plugin libraries and then your app scripts.
I am using a Bootstrap 3 based template called Unify and implemented Angular JS with ui-routing. Most of it works fine. Just my whole navigation is in the header and I use ng-include to inject the header from a html template file. Them the hover dropdown js plugin does not work anymore. My Code looks something like this.
<header ng-include="'templates/header.html'"></header>
<!--=== Content Part ===-->
<div class="container">
<div class="row" >
<div ui-view autoscroll="false"></div>
</div>
<footer ng-include="'templates/footer.html'"></footer>
and the plugin is called before the tag with the rest of scripts needed.
It works fine when I use the files as is without the Angular JS it also works fine with Angular JS if I don't inject the code but leave it in the index.html as is but not as now.
Hopefully somebody can help me out because I have the same problem with the parallax slider with for convenience sake I just keep in the index.html for now.
Thanks,
Gerd
Thanks to the detailed answer Chris T gave me in another question I found it is a scope related issue. Now I am loading the hover dropdown js within the template file and it works fine.
I ran into the same issue, and tried loading the hover dropdown js in a script tag in the template. That resulted in an error (Like the one here: Can AngularJS ng-include load a Jinja2 processed html on FLASK?)
So instead of doing that, I got it to work by creating a controller for my template and inside the controller I added the drop down hover via:
$('.dropdown-toggle').dropdownHover(options);
What issues might I experience in having two different versions of AngularJS loaded into one page?
Obviously this seems like a stupid thing to do, but my use case is a page that uses AngularJS incorporating a third-party component that drags in its preferred version of AngularJS.
Update:
Found some info:
https://groups.google.com/forum/#!msg/angular/G8xPyD1F8d0/u1QNDNvcwW4J
https://github.com/angular/angular.js/pull/1535
Angular is really not prepared to co-exist with other version. But it's feasible.
First of all load angular library and make sure that before loading window.angular is empty:
<script src="vendor/angular/1.2.0/angular.min.js"></script>
<script src="app/app2.js"></script>
<script>
var angular2 = angular;
window.angular = null; // here we're cleaning angular reference
</script>
<script src="vendor/angular/1.0.5/angular.js"></script>
<script src="app/app1.js"></script>
<script>
var angular1 = angular;
</script>
Note that each application (app1.js, app2.js) for each version of angular should be loaded immediately after loading angular library.
Each JavaScript file of the application shoud be wrapped in self executing function (function(angular) { ... })(angular). Look at the example of app2.js:
(function(angular) {
angular.module('myApp2', []).
controller('App2Ctrl', function($scope) {
$scope.$watchCollection('[a, b, c]', function() {
console.log(angular.version.full);
});
});
})(angular);
Note that here I'm using $watchCollection which is only available for angular 1.2.x. By providing scope of anonymous function for each file you are forcing application to reach angular property instead of window.angular property.
Finally you have to bootstrap the application using manuall method:
<body>
<div id="myApp1" ng-controller="App1Ctrl">
</div>
<div id="myApp2" ng-controller="App2Ctrl">
</div>
<script>
angular1.bootstrap(document.getElementById('myApp1'), ['myApp1']);
angular2.bootstrap(document.getElementById('myApp2'), ['myApp2']);
</script>
</body>
Working plunker here. After running please check console window to see logged versions of angular used.
Great question! Like you, we were unable to uncover much on this topic...we are in the process of deploying a version of Angular with our product which will be embedded within client websites that could also have Angular already loaded.
Here is what we have done:
Modify the Angular source - do not use "window.angular" or "angular" in your implementation, choose some other variable or object property to house it. If you do use "window.angular" and/or "angular", it could break both applications if the versions are different.
Rename all delivered objects (directives, etc); otherwise, the other version of angular could attempt to process your directives.
Rename all CSS classes used by Angular (ng-cloak, etc). This will allow you to style your version of Angular separately from the other version.
Manually bootstrap your application, as described by 'kseb' above.
If you are going to completely name space AngularJS as I have described here, take care to not do a global search and replace because angular does need a "window" reference for registering events, and a few other places.
I just finished doing this at work and I am in the process of testing. I will update this answer with my results.
Matt Burke describes a process to wrap the Angular JS libs in a function to create a closure. Downside is that you cannot load Angular via a public CDN as you have customized the download.
http://www.mattburkedev.com/multiple-angular-versions-on-the-same-page/
Angular 2 will provide a new router with similar features to UI router, but that will also allow to have some routes in Angular 1 and others in Angular 2.
This router is currently being backported to Angular 1, see here a presentation from the developer of the new router explaining how this will work.
The idea behind a common cross-version router with support for both version is to help users upgrade from Angular 1 to Angular 2.
EDIT
If it helps the code that it errors at is
// Update model when calling setContent (such as from the source editor popup)
setup: function (ed) {
ed.onSetContent.add(function (ed, o) { <----Right Here ed is undefined
if (ed.isDirty()) {
ed.save();
ngModel.$setViewValue(elm.val());
if (!scope.$$phase)
scope.$apply();
I'm trying to get a working example of tinymce ported through angular-ui but I keep getting the following error on line 1225 of angular-ui
Cannot call method add of undefined. I just updated my build of angular-ui so I know it's up to date.
I'm calling my scripts in this order
bootstrap css
jquery ui css
angular-ui css
jquery script
jquery ui script
tiny mce
tiny mce jquery port
angular js
angular ui.js
app.js
controller.js
directives.js
My HTML looks like this
<body ng-app="tinymce">
<textarea ui-tinymce ng-model="tinymce"></textarea>
<body>
and I pass the ui dependecy like so
"use strict";
var app = angular.module('tinymce', ['ui']);
I don't know what else to do.
any ideas?
I've got the same problem, If you are installing using bower, you might be installing tinymce-release 4.0.2. I just found that that version is not working.
Using bower, the last available version is 3.5.8. I've simple change the version tinymce-release and now it works
It seems they have not updated Bower with the latest code from github. If you copy this into your components folder it will work:
https://github.com/angular-ui/ui-tinymce/blob/master/src/tinymce.js
"use strict";
var app = angular.module('tinymce', ['ui.tinymce']);