Urigo/angular-meteor

How to use Blaze templates with the new Angular 1.2.0 version

Closed this issue · 87 comments

vimes1984 commented

Ok I've just created a new meteor 1.2 app.
And I'm using a set up that worked before..
I've included my routes and templates like so :


MainApp.config(['$urlRouterProvider', '$stateProvider', '$locationProvider',
  function($urlRouterProvider, $stateProvider, $locationProvider){

    $locationProvider.html5Mode(true);
    $urlRouterProvider.otherwise('/');

    $stateProvider
    .state('home', {
      url: '/',
      templateUrl: 'app/client/templates/angular/template.home.ng.html', /*Doesn't work */
      templateUrl: 'app/client/templates/angular/template.home.ng', /*Doesn't work */
      templateUrl: '/app/client/templates/angular/home.ng.html', /*clutching at straws  */
      controller: 'HomeCtrl'
    })
    .state('contact', {
      url: '/contact',
      templateUrl: '/client/templates/angular/contact.ng.html',
      controller: 'ContactCtrl'
    });

}]);

But Iv'e noticed meteor is now loading my templates from /app and it's now ripping out the .html and repfxing it with template.
this is a comparison between a older version and a newer version :

<script type="text/javascript" src="/client/templates/angular/home.ng.html.js?53594b2ab24052babc7795483fa7354b49b024ce"></script>
<script type="text/javascript" src="/app/client/templates/angular/template.home.ng.js?9463703b83741c520ab4bb93d7049e7fad3ad783"></script>

I can't seem to get the template to load in the route....

Packages:


# Meteor packages used by this project, one per line.
# Check this file (and the other files in this directory) into your repository.
#
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.

meteor-base             # Packages every Meteor app needs to have
mongo                   # The database Meteor supports right now
session                 # Client-side reactive dictionary for your app
jquery                  # Helpful client-side library
tracker                 # Meteor's client-side reactive programming library

standard-minifiers      # JS/CSS minifiers run for production mode
es5-shim                # ECMAScript 5 compatibility for older browsers.

autopublish             # Publish all data to the clients (for prototyping)
insecure                # Allow all DB writes from clients (for prototyping)
meteorhacks:npm


npm-container
usefulio:sync-methods

angular
matthew:foundation5-sass
fortawesome:fontawesome
angularui:angular-ui-router
urigo:angular-blaze-template
urigo:angular-ui-router

I've allready had to remove:

blaze-html-templates

ecmascript

mobile-experience

due to the conflicts by babel I think...
If someone can point me in the right direction I'd be happy to patch what i can.
Chris

blntylmn commented

same here I just updated my project with meteor update command and get this errors :

While determining active plugins:
error: conflict: two packages included in the app (pbastowski:angular-babel and ecmascript) are both trying to handle *.js
error: conflict: two packages included in the app (templating and angular-templates) are both trying to handle *.html

vimes1984 commented

yeah I got that aswell had to remove blaze html templates to get around it :D

blntylmn commented

if I remove ecmascript and blaze-html-templates everything works

vimes1984 commented

yup same as me well bar the html template issue...

blntylmn commented

blaze-template not working after update. Do you have this issue ?

vimes1984 commented

Ok I think my template issue was from a template cache 💃

vimes1984 commented

I have just run into the blaze-template issue .... It's not rendering my templates..

Urigo commented

no need for .ng.html anymore, just regular .html will do the work

blntylmn commented

But we have to use blaze-template for meteor native templates ?

vimes1984 commented

yup just read the release and figured it out :D
I think both me and @bintylmn are running into the same issue which doesn't seem to want to work...

blntylmn commented

It gives me an error starting with these lines :
ReferenceError: Template is not defined
at link (http://localhost:3000/packages/urigo_angular-blaze-template.js?73310390455b784def963671fb677b5eaa30ee4d:34:11)
at invokeLinkFn

vimes1984 commented

I'm gettting:
Errors prevented startup:

While determining active plugins:
error: conflict: two packages included in the app (angular-templates and templating) are both trying to handle *.html

While determining active plugins:
error: conflict: two packages included in the app (angular-templates and templating) are both trying to handle *.html

Your application has errors. Waiting for file change.

when including blaze-html-templates in my packages which is kind of needed since a lot of other packages expect it to be there.

Urigo commented

what packages use templating ?

vimes1984 commented

blaze-html-templates
which comes bundled with the latest release of meteor when you run meteor create.

Urigo commented

yes, with the new version you should remove both blaze-html-templates and ecmascript : http://angular-meteor.com/tutorials/angular1/bootstrapping

vimes1984 commented

the problem is if I remove that my blaze templates don't work...

Urigo commented

ohh so you work with Blaze and Angular?

Urigo commented

why?

vimes1984 commented

yeah I do usually it's nice to have both...

vimes1984 commented

some packages I use such as matthew:foundation5-sass use blaze templates generated by the package to initiate js in the files...
I also use Aldeed's autoforms which uses blaze templates to work aswell....

Urigo commented

we can acttually take the old build process and create a package out of it (for .ng.js and .ng.html)
it means to copy the same come and include the angular-meteor-data package.
want to give it a shot?

vimes1984 commented

I'd love to take shoot, would that mean putting .ng back on all the angular files?
Would that allow us to use the < blaze-template name="top" >< /blaze-template>
tag again?

Urigo commented

you need to decide which engine you want to compile html

Urigo commented

if you want that to be Blaze then yes, it will be exactly like previous versions

vimes1984 commented

ok say I'd want to use a package like autoforms which requires blaze would I have to go down the .ng route?

Urigo commented

yes

Urigo commented

there is also this route - https://github.com/dotansimha/accounts-ui-angular by @dotansimha
which is interesting to make it a general one

vimes1984 commented

uuuu doesn't that render the new angular meteor version a little un compatible with a lot of the other meteor packages?
Isn't that forcing a splintering of the community the ones that use angular/meteor the ones that use blaze/meteor?

vimes1984 commented

isn't dotansimha's approach what we had with < blaze-templates >

Urigo commented

it's a bit different because it's rendering Blaze templates without adding the dependency on templating

vimes1984 commented

I don't mind building a package using the old build process to use .ng and .html so people can choose.
Ahhhh but it uses blaze-html-templates which does depend on templating:
https://github.com/dotansimha/accounts-ui-angular/blob/master/package.js

Urigo commented

I think it doesn't add the build process to it, can you test it?

vimes1984 commented

sure

vimes1984 commented

that doesn't add the templating to the buidl propcess...

vimes1984 commented

I assume it's becuase it add's blaze-html-templates on the client only is that right?

vimes1984 commented

See the discussion above blaze-template is no longer supported in angular-meteor...

blntylmn commented

So we have to leave the community packages advantage if we the decide go further :(

vimes1984 commented

not to sure what you mean..

blntylmn commented

I mean with blaze-template ---> urigo:angular-blaze-template directive not native blaze template of meteor

vimes1984 commented

from what I've been reading and after talking to Urigo it seems like there has been a decision to move away from blaze so it's now blaze OR angular's templating (@Urigo please correct me if I'm wrong) which renders quite a few atmosphere packages useless...
urigo:angular-blaze-template requires blaze to be installed something that the latest 1.2 release of meteor angular doesn't support...

blntylmn commented

Ok if I misunderstand we need to make our own packages for angular meteor if we need some third party packages which is renders with blaze. So for example if I want to use fullcalendar what is the correct way ?

Urigo commented

I will make sure to add a package that support the old build process very soon.
In the meantime, you can keep using 1.0.7.
that way you can choose what way you want to use.

About choosing, if you need Blaze templates just because of login buttons, you can use dotansimha:accounts-ui-angular instead - https://github.com/dotansimha/accounts-ui-angular

vimes1984 commented

for anybody finding this uirgo is suggesting to do this:
meteor remove angular
meteor add angular@=1.07
meteor add urigo:angular-blaze-template
then changing the files back to ng.html/ng.js

vimes1984 commented

@Urigo I'll take a crack at the package to support the old build version tomorrow if thats ok with you?

Urigo commented

sounds good

Urigo commented

thank you for that

Urigo commented

OK, I've released angular-with-blaze@1.2.0 that replace angular in case you want to use the old build process like before and use blaze templates like before.
I've updated the <blaze-template> example so you can see (just updated the packages, the code stayed the same:
https://github.com/Urigo/angular-meteor/tree/master/examples/blaze-template

Thanks @dotansimha for the help

vimes1984 commented

christ that was quick....

vimes1984 commented

didn't have a chance to take a a crack at iit maybe next time :D

Acostan commented

Thanks for this.... I've been stuck trying to get a template to render from a package. Whats the correct way to reference the ng.html file in the package based on this is my file structure.

/app
        /.meteor
        /client
                 /routes.ng.js
       /packages (symlink to package folder)

/packages
       /meteor-package
                /views
                         -index.ng.html

Here's the contents to routes.ng.js:

.state('index', {
            url: '/index',
            templateUrl: '/packages/meteor-package/views/index.ng.html',

Currently, its not finding this path '/packages/meteor-package/views/index.ng.html', which yields this error:

"Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

Error: [ng:btstrpd] App Already Bootstrapped with this Element 'document'
"

The documentation at "http://angular-meteor.com/tutorials/angular1/routing-and-multiple-views" says...

Each template gets loaded by it's absolute path to the project's top folder ('party-details.html'). this is done by angular-meteor's build process which loads the templates into a cache and names them according to their paths. If the templates are coming from a package, they will get a prefix of the package name like so - 'my-appmy-packageclient/views/my-template.html'. You can read more about the templating build process in our code.

Urigo commented

what packages and versions are you using?

Acostan commented

meteor-base # Packages every Meteor app needs to have
mobile-experience # Packages for a great mobile UX
mongo # The database Meteor supports right now
blaze-html-templates # Compile .html files into Meteor Blaze views
session # Client-side reactive dictionary for your app
jquery # Helpful client-side library
tracker # Meteor's client-side reactive programming library

standard-minifiers # JS/CSS minifiers run for production mode
es5-shim # ECMAScript 5 compatibility for older browsers.
ecmascript # Enable ECMAScript2015+ syntax in app code
angular-with-blaze@1.2.0
angularui:angular-ui-router
urigo:angular-blaze-template
less
urigo:angular-ui-router

Urigo commented

ohh now I see what you are trying to do.
First, you don't need to include the packages in your client folder as well.
second, the paths links are like so: 'author_packagename_path/to/file.js' (in the old build process which you are using because of angular-with-data
Here is a related issue for more information: #752
it can be nice if someone can pull request the compiler to do the same: https://github.com/Urigo/angular-meteor/tree/master/packages/angular-blaze-templates-compiler/plugin

Please make sure that what I'm saying is actually true, I haven't tested the old build in a while

Acostan commented

Hey @Urigo I've posted the project files here:

https://github.com/Acostan/test-angular-meteor

I tried to change the path to 'test_package_packages/test-package/lib/index.ng.html', but no success. I'm sure I'm doing something wrong. Please advise. Thanks in advance!

lance-anderson commented

OK, I've released angular-with-blaze@1.2.0 that replace angular in case you want to use the old build process like before and use blaze templates like before.
I've updated the example so you can see (just updated the packages, the code stayed the same:
https://github.com/Urigo/angular-meteor/tree/master/examples/blaze-template

@Urigo THANK YOU. This is wonderful. It seems like the crutch I need to transition from Blaze to Angular (wanting to leverage angular-ionic... love the WhatsApp demo!).

I'm wondering if there are any drawbacks or gotchas that I should be aware of before committing to angular-with-blaze over angular for a production project.

Acostan commented

I got it working finally using this path:

templateUrl: '/packages/test_package/lib/index.ng.html'

Apparently, "-" dashes get replaces with "_" underscores!

Urigo commented

@Acostan can you have a look at the docs and pull request the best place to add documentation about that?

Acostan commented

Sure @Urigo what branch should I compare it to? Are you referring to these docs (https://github.com/Urigo/angular-meteor)?

Urigo commented

Yes, on the docs directory there is the source code for the angular-meteor.com site

marcianosr commented

Hmm still could not get it to work... I installed angular-with-blaze@1.2.0 and tried the example from the angular docs, but still no succes. Getting the error Uncaught ReferenceError: Template is not defined. Running the newest meteo version. Have I missed something?

gentunian commented

having the same issue, Template is not defined

$ meteor list | grep blaze
angular-blaze-templates-compiler  0.0.1  Compile angular templates into the t...
angular-with-blaze                1.2.1  Everything you need to use both Angu...
urigo:angular-blaze-template      0.2.0  Include Blaze templates in your angu...
lance-anderson commented

@gentunian @marcianosr I had a bit of trouble resolving that issue myself. I found the blaze-template example in this repo very helpful. I recommend cloning this repo, navigating to the examples/blaze-template folder and run meteor run. It's likely a working example of what you're looking for. From there you can tweak the example as needed to replicate the setup you're going for.

gentunian commented

@lance-anderson thanks for the reply and hints. Anyway, shouldn't the object Template be availble at global scope despite that all html files?

jacobdr commented

I also had some difficulties here, but by installing all of the below
packages I got things to work well together:

  • angular-with-blaze
  • blaze-html-templates
  • urigo:angular-blaze-template

On Tue, Dec 1, 2015 at 10:01 AM, Sebastian notifications@github.com wrote:

@lance-anderson https://github.com/lance-anderson thanks for the reply
and hints. Anyway, shouldn't the object Template be availble at global
scope despite that all html files?

—
Reply to this email directly or view it on GitHub
#849 (comment)
.

gentunian commented

@jacobdr so you don't have angular installed and your are using blaze for parsing .html files.

blaze-html-templates (because of templating) conflicts with angular-templates as far as I know.

gentunian commented

Ok to avoid confusion and to be helpful to anyone that was as confused as I was.

My confusion: have angular, angular-with-blaze and urigo:angular-blaze-templates installed and blaze-html-template removed (as the first post)

It turns out that I needed to remove angular and have urigo:angular-blaze-template, blaze-html-templates and angular-with-blaze installed as @jacobdr says.

After that, my angular templates (.ng.html files) and code (just .js files) are working ok.

gentunian commented

Interesting... maybe this is not the place but I will share what leads me to use blaze templates with angular.

Performance. Using blaze {{#each item}} to populated an ion-list is way faster that using ng-repeat="item in collection". I guess that is because the binding between angular and $meteorCollection.

When I said way faster I meant: There's no apparent difference while using a web browser on your PC. But using a mobile phone (Moto E 2nd Gen android 5 and Samsung Galaxy Grand Prime android 4) the low performance is indeed notorious. Two seconds against one, that is measured repeated times just with a cronometer :)

jacobdr commented

Interesting to hear. Are you emulating or is that a native build running on
device?

@Urigo do we have any benchmarks of angular vs angular2 vs blaze
performance?

On Tue, Dec 1, 2015 at 2:16 PM, Sebastian notifications@github.com wrote:

Interesting... maybe this is not the place but I will share what leads me
to use blaze templates with angular.

Performance. Using blaze {{#each item}} to populated an ion-list is way
faster that using ng-repeat="item in collection". I guess that is because
the binding between angular and $meteorCollection.

When I said way faster I meant: There's no apparent difference while using
a web browser on your PC. But using a mobile phone (Moto E 2nd Gen android
5 and Samsung Galaxy Grand Prime android 4) the low performance is indeed
notorious. Two seconds against one, that is measured repeated times just
with a cronometer :)

—
Reply to this email directly or view it on GitHub
#849 (comment)
.

gentunian commented

In the web app only. Accesing the web app vía mobile browser (e.g. opening chrome mobile app to http://myip:3000)

I've tried to reproduce this in a simple repo: https://github.com/gentunian/gevo-angular which is basically the tool I'm just playing with.

I used 180 items in a collection to note the difference in the browser from PC. It's notorious at sight with that quantity. The quantity is just for testing, in real life this should be loaded on demand.

gentunian commented

I would like to hear about the performance too. Are those test wrong in their essence? Has anyone tried that using a smartphone? How can I measure the real time spent, at least in the PC browser?

Cheers.

carlosbaraza commented

I am facing the issue that inside a package and using angular-with-blaze and .ng.js files, the code is not transpiled using Babel. I have tried adding ecmascript package, but it does not seem to work. If I remove the .ng, then ng-annotate does not work properly.

Anyone faced a similar issue?

It is unfortunately very confusing all this blaze or not blaze. I might start working on porting the packages I would need to angular-meteor packages.

carlosbaraza commented

I am doing some tests and it seems that even just using angular inside a package, without anything relating to blaze, it still does not transpile without ecmascript. With ecmascript it does transpile but then ng-annotate does not work.

I need to use packages because I have three separated applications in the same meteor app (Landing page, Admin and Ionic app).

carlosbaraza commented

Ok, my fault, after installing the latest version of angular, both transpiling and ng-annotate work. However, now I am in the same situation than people were commenting before. If I want to use one of the multiple Meteor packages using Blaze, I can not do so without porting them.

In my case, one of the packages I am using with Blaze is: https://github.com/ianmartorell/meteor-accounts-ui-bootstrap-3/

carlosbaraza commented

Just in case this is useful for someone, I have created an Angular wrapper without the need for Blaze of ian:accounts-ui-bootstrap-3. https://github.com/carlosbaraza/accounts-ui-bootstrap-3-angular

jacobdr commented

Don't you use angular with blaze in your package.json dependencies? And I see calls to blaze and spaceship in source, which I'm not fully familiar with, but don't feel angular "native". 

So pleased to have someone finally release a package like yours! But am curious to hear more about its implementation... Learning from its development could inform development of material design wrapper, and other ui toolkit styling packages. 

—
Sent from mobile

On Mon, Dec 7, 2015 at 10:09 PM, Carlos Baraza notifications@github.com
wrote:

Just in case this would be useful for someone, I have created an Angular wrapper without the need for Blaze of ian:accounts-ui-bootstrap-3. https://github.com/carlosbaraza/accounts-ui-bootstrap-3-angular

Reply to this email directly or view it on GitHub:
#849 (comment)

carlosbaraza commented

No, I don't use angular-with-blaze. The idea is to use Blaze templates within the package to do the rendering and then link the angular scope to the rendered DOM. This way in the project/package importing the package, it is not required to have blaze-html-templates and the extension html can be freed to be handled by angular-templates in the parent package.

About SpacebarsCompiler, it was an attempt to be able to set custom templates without using templating in the parent project/package. However, I changed the behavior two hours ago because it was very ugly using Session to configure the package, and now I recommend now creating a second package using templating and so be able to set up the custom templates. This make unnecessary the compilation step I set up yesterday. I detailed the how to use in the readme.

Glad to know it helps.

Urigo commented

Short note, after 1.3 release , the blaze-template example moved here: https://github.com/Urigo/angular-meteor/tree/master/examples/1.2/blaze-template

buitregool commented

I copied/paste this code from angular 1.3 (angular-meteor.js). I used to have all my templates with '.ng.html' extension, now I renamed them to '.html' and I get the below exception for each path. I wonder if the ' if (templatesFileExtension.indexOf(fileExtension) > -1)' is right? Cheers!

angularMeteor.config([
  '$provide',
  function ($provide) {
    var templatesFileExtension = ['html', 'tpl', 'tmpl', 'template', 'view'];

    $provide.decorator('$templateCache', ['$delegate', function($delegate) {
      var originalGet = $delegate.get;

      $delegate.get = function(templatePath) {
        var originalResult = originalGet(templatePath);

        if (angular.isUndefined(originalResult)) {
          var fileExtension = ((templatePath.split('.') || []).pop() || '').toLowerCase();

         if (templatesFileExtension.indexOf(fileExtension) > -1) {
            throw new Error('[angular-meteor][err][404] ' + templatePath + ' - HTML template does not exists!');
          }
        }

        return originalResult;
      };

      return $delegate;
    }]);
  }
]);
Urigo commented

@buitregool can you share your code?

buitregool commented

@Urigo, sure! I opened an issue #958. I'll add more code tomorrow. Cheers.

Urigo commented

thanks @buitregool , waiting for your code

turbobuilt commented

Just my vote- I'd put blaze template support back into the regular angular-meteor package.

I think this feature needs to be supported by default because almost everybody is going to need to use some packages that require blaze-templates.

  • 👍1