pbastowski / angular2-now Goto Github PK

When decorator's target has the same injectable (in target.$inject) as one of these provided by @Inject() decorator it will be duplicated. It's on meteor1.2 branch (probably on the others also).

Am I wrong or duplicates should be removed?

If so, I'm going to fix it on my branch with unit-tests.

jspm install npm:angular2-now

In my config.js

System.config({
  "map": {
    "angular": "github:angular/[email protected]",
    "angular-animate": "github:angular/[email protected]",
    "angular-aria": "github:angular/[email protected]",
    "angular-material": "github:angular/bower-material@master",
    "angular-messages": "github:angular/[email protected]",
    "angular-mocks": "github:angular/[email protected]",
    "angular-moment": "npm:[email protected]",
    "angular-numbro": "npm:[email protected]",
    "angular-ui-router": "github:angular-ui/[email protected]",
    "angular2-now": "npm:[email protected]",
    "angular2now": "npm:[email protected]", // tried this too

in my appModule

'use strict'; import 'angular'; import 'angular-ui-router'; import {Component, View, Inject, options} from 'angular2now'; import {Component, View, Inject, options} from 'angular2-now' // tried this too; angular2now.options({controllerAs: 'vm'});

Made no difference.

I think you need to add format: "amd" to the package.json.

It may need to be jspm: {format: "amd"}

I manually changed it in jspm_packages, but now it complains about

Edit:

I installed jspm install github:pbastowski/angular2-now

Still getting this error:

Uncaught ReferenceError: angular is not defined(anonymous function) @ angular2-now.js:26(anonymous function) @ angular2-now.js:631M @ system.src.js:3826(anonymous function) @ system.src.js:3826n @ system.src.js:3826(anonymous function) @ system.src.js:3826
Uncaught ReferenceError: angular is not defined
    Evaluating http://localhost:3005/jspm_packages/npm/[email protected]/angular2-now.js
    Error loading http://localhost:3005/jspm_packages/npm/[email protected]/angular2-now.js from http://localhost:3005/app/appModule.js
    Error loading http://localhost:3005/jspm_packages/npm/[email protected]/angular2-now.js

Please add a new version to npm the current version is not usable, cause of a missing comma, which is already fixed in github.

Hi and thanks for this awesome library :)

I was wondering if Angular 1.5 syntax $onInit is supported? What version of angular is this library currently using?

Kind regards.

Line: https://github.com/pbastowski/angular2-now/blob/meteor1.2/angular2-now.js#L181

For master branch it is the 171th line.

{
    restrict: options.restrict || (options.template + options.templateUrl) ? 'EA' : isClass ? 'C' : 'A'
}

so restrict option is basically skipped all the time.

Similar to the last issue I opened, but slightly different. I have a "Admin panel" section that has a top level route, I managed to get the menu into a directive but I have a named view that changes based on the route, So this can't be a directive hardcoded into the template it must be a named view. I tried putting the directives in the abstract state template but when I go to /administrator/panel/welcome the welcome view takes over the entire template.

Here is the top state:

adminPanelModule = angular.module('AdminPanel', []);
@State({ 
  name: 'root.adminpanel',
  url: 'administrator/panel',
  abstract: true,
  html5Mode: true
})
@Component({ selector: 'admin-panel' })
@View({ templateUrl: 'client/modules/adminpanel/adminpanel.ng.html' })
@Inject(['$meteor', '$state'])

class adminPanel {
  constructor ($meteor, $state) {
    this.$meteor = $meteor
    this.$state = $state;
    this.user = Meteor.user();
  }
}

then my welcome state:

@State({
  name: 'root.adminpanel.welcome',
  url: '/welcome',
  html5Mode: true,
  templateUrl: 'client/modules/adminpanel/views/welcome.ng.html',
  controller: 'AdminPanelWelcomeCtrl as adminWelcome'
})

class AdminPanelWelcomeCtrl {
  constructor ($meteor, $state) {
    this.$state = $state;
    this.user = Meteor.user();
  }
}

adminPanelModule.controller('AdminPanelWelcomeCtrl', AdminPanelWelcomeCtrl);

and finally the adminpanel.ng.html template in which I'm trying to get this all working:

<div layout="column" flex>
    <adminpanel-menu>
    </adminpanel-menu>

    <div layout="row">
        <section layout="column" flex="20">
        </section>

        <section layout="column" ui-view>
        </section>
    </div>
</div>

Uncaught Error: [$injector:unpr] Unknown provider: $rootElementProvider <- $rootElement <- $$animateQueue <- $animate <- $compile <- $$animateQueue
http://errors.angularjs.org/1.4.1/$injector/unpr?p0=%24rootElementProvider%…eQueue%20%3C-%20%24animate%20%3C-%20%24compile%20%3C-%20%24%24animateQueue

I think it must be caused by one of the recent updates, I have tried both of the following.

@State({
  name: 'root.subscription',
  url: '/subscription',
  resolve: {
    currentUser: function($meteor) { return $meteor.waitForUser(); }
  }
})

and I know this one works in several of my other apps that I have not updated.

@State({
  name: 'root.subscription',
  url: '/subscription',
  resolve: {
    'currentUser': ['$meteor', function($meteor){
      return $meteor.waitForUser();
    }]
  }
})

Strange bug when i creating abstract state not from bootstrap function, template is not showing, if i add templateUrl to @State it's work, but scope vars is broken

Example http://plnkr.co/edit/74WX9lcXLOVSpEiG4wwU?p=preview

There is a new router for Angular 2.0 (and 1.4) - https://github.com/angular/router

It would be good if angular2-now used the same syntax instead of @State

@Component({})
@View({
  template:
    `<div router-outlet="master"></div>
     <div router-outlet="detail"></div>`,
  directives: [RouterOutlet, RouterLink]
})
@RouteConfig({
  path: '/user', components: {
    master: 'userList',
    detail: 'user'
  }
  // or:  path: '/user', component: UserComp 
})
class MyComponent {}

Hi, I'm trying to use the MeteorReactive annotation referenced in #41 but I get an error stating:

Uncaught TypeError: MeteorReactive is not a function

I looked up the actual code and it is (indeed) not in the ./.meteor/local/build/programs/web.browser/packages/pbastowski_angular2-now.js file that gets generated when I start my application. In my versions file I see that I am using pbastowski:[email protected] (which is the version installed when I do meteor add pbastowski:angular2-now).

How can I use the latest version that includes the annotation I want?

FWIW the aforementioned annotation is also used in the socially titurial app which is also not working for me. see: https://github.com/Urigo/meteor-angular-socially/blob/master/client/socially/socially.component.js

An idea in order to make injections available in prototype's methods.

given a project setup with the following structure

common-base-package -> client-package -> meteor-app

common-base-package introduces angular2-now (and others) in packages.js:

...
api.imply('pbastowski:angular2-now');
api.imply('pbastowski:ecmascript-extras');
api.imply('pbastowski:require');
...

when importing from angular2-now in client-package: e.g.

import {SetModule} from "angular2now";

and trying to start the app, the following error is shown:

TypeError: _angular2now is undefined

everything works just fine when angular2-now is used from inside a meteor app context.

Available versions:

["0.3.4","0.3.5","0.3.7","0.3.8","0.3.15","0.3.16"]

https://www.npmjs.com/package/angular2-now

Since the refactor, it's not possible to define a templateUrl in the State annotation.

I pointed the change:
9982e46#diff-3e972fd2dbab9f5b4c0af1f0c2447076R127

@State({
  name: "foo",
  url: "/foo",
  controllerAs: "foo",
  templateUrl: "foo.html",
})

after update I get <div ui-view>foo.html<div> instead of the content of foo.html

http://angular-meteor.com/server

I'm wanting to try out angular server in one of my apps, but it seems awkward when using angular 2 now on the client side. Is it possible to extend it to the server also?

I'm trying to create a state without a component. The error I get is:

Failed to instantiate module vdexter due to:
Error: [$injector:modulerr] Failed to instantiate module angular-meteor due to:
Error: [$injector:unpr] Unknown provider: $urlRouterProvider

the state I'm trying to create:

@State({ 
  name: 'home', 
  url: '/home' 
})

@Inject([])
class home {
  constructor() {
  }
}

and how do I add a view to the state, since templateUrl doesn't seem to work in @ State

I get the following when trying to use $regex in a subscription.

SyntaxError: Invalid regular expression: /*/: Nothing to repeat
    at RegExp (native)
    at new RegExp (http://localhost:3000/packages/pbastowski_angular-babel.js?12301086a7dabca46b24c7091e4fcb4205034f68:1942:14)
    at Object.ELEMENT_OPERATORS.$regex.compileElementSelector (http://localhost:3000/packages/minimongo.js?cdf1a26cf7719fa9471a8017c3defd5aea812727:1904:18)
    at http://localhost:3000/packages/minimongo.js?cdf1a26cf7719fa9471a8017c3defd5aea812727:1509:19
    at Function._.each._.forEach (http://localhost:3000/packages/underscore.js?46eaedbdeb6e71c82af1b16f51c7da4127d6f285:157:22)
    at operatorBranchedMatcher (http://localhost:3000/packages/minimongo.js?cdf1a26cf7719fa9471a8017c3defd5aea812727:1489:5)
    at compileValueSelector (http://localhost:3000/packages/minimongo.js?cdf1a26cf7719fa9471a8017c3defd5aea812727:1393:12)
    at http://localhost:3000/packages/minimongo.js?cdf1a26cf7719fa9471a8017c3defd5aea812727:1372:9
    at Function._.each._.forEach (http://localhost:3000/packages/underscore.js?46eaedbdeb6e71c82af1b16f51c7da4127d6f285:157:22)
    at compileDocumentSelector (http://localhost:3000/packages/minimongo.js?cdf1a26cf7719fa9471a8017c3defd5aea812727:1355:5)

Here is the the subscription.

this.result = $scope.$meteorCollection(() => {
  return Collection.find({
    $or: [
      { title: {$regex:$scope.getReactively('vm.value')+'*'} },
      { tags: {$regex:$scope.getReactively('vm.value')+'*'} }
    ]
  })
}, false).subscribe('search-publication', $scope.getReactively('vm.value'));

because of:

target.bindToController || true

Error while compiling:

Babel compiling files:
  angular2-now.js
{ [SyntaxError: /packages/pbastowski_angular2-now/angular2-now.js: Unexpected to
ken (569:28)]
  pos: 23785,
  loc: { line: 569, column: 28 },
  _babel: true,
  codeFrame: '  567 | \n  568 |                             // Custom data\n> 56
9 |                             data: options.data\n      |
        ^\n  570 |                         };\n  571 | \n  572 | ' }

Startup error:

   While processing files with pbastowski:angular-babel (for target
   web.browser):
   packages/pbastowski:angular2-now/angular2-now.js:569:28: Babel
   transform error

I'm using:

[email protected]
pbastowski:[email protected]
pbastowski:[email protected]

Hi, I'm trying to get Angular 1 directives to get processed with angular2now but I'm unable to get them running.

My directive is defined as this

var {Directive, Inject } = angular2now;
angular.module('App');
@directive({
selector:'header',
restrict: 'E',
scope: {},
templateUrl: 'header-template.html',
injectables: ['$compile', '$location']
})
export class Header
{
constructor($compile, $location)
{
...
}

link(scope, element, attributes)
{  
}

}
In my controller

import {Header} from 'header.js';
@view({
templateUrl:'home.html',
directives: [Header]
})
@Inject(['$scope','$location'])
@controller('homeController')

and my header.html does use
<header></header>

but it's content is not processed.

Any hint on how to achieve it or how to debug it?

I think this got broken for Meteor 1.3.2.2.
After updating meteor I started getting error: TypeError: Cannot read property 'init' of undefined
on line 48 of compiled file.

} else {                                                             // 16
  angular2now.init();                                         // 17
} 

Normally this would look like

$stateProvider
      .state('root', {
        url: '/',
        redirectTo: '/main',
        views: {
          'navbar': { controller: 'NavbarCtrl as navbar', templateUrl: 'modules/navbar/navbar.html' },
          'root': { controller: 'RootCtrl as root', templateUrl: 'modules/root/root.html' }
        }
      });

But how would this looks when using the @ State decorator? I tried puting the views object inside and it didn't work.

I have a state setup as follows

@State({
  name: 'root.register',
  url: '/register',
  templateUrl: 'client/components/register/register.ng.html'
})
@Inject(['$rootScope', '$meteor', '$state'])

class register {
  constructor($rootScope, $meteor, $state) {
    this.$meteor = $meteor;
    this.$state = $state;
    console.log($rootScope.currentUser);
  }

  register(user) {
    this.$meteor.createUser({
      username: user.email,
      email: user.email,
      profile: {
        displayName: user.firstName + ' ' + user.middleInitial + ' ' + user.lastName,
        firstName: user.firstName,
        middleInitial: user.middleInitial,
        lastName: user.lastName,
        accountType: user.accountType
      },
      password: user.password
    })
    .then(() => {
      this.$state.go('root.home');
    },
    err => {
      console.log(err);
    })
  }
}

I have tried accessing the register function in the template via register.register(), and I have also tried setting the scope name via angular2now.options({ controllerAs: 'vm' }); in app.es6.js. Both ways seem to not work. However, when I go to the state at /register the $rootScope.currentUser does get logged as undefined which is expected.

Does angular2-now support angular 1.5 and its new components?

Right now, the implementation of camelCase and unCamelCase require the user to utilize a hyphen ("-") for camelCasing and unCamelCasing to work.

For example:

1. camelCase('tunafish') => "tunafish"
2. camelCase('tuna-fish') => "tunaFish"
3. unCamelCase("tunaFish") => "tuna-fish"
4. unCamelCase("tuna-Fish") => "tuna--fish"

This makes complete sense because in Case 1 it is impossible to tell programmatically where to split the word. In case 3, without inserting the hyphen, the input term could not be reliably recovered without saving its original state, which is not worth keeping track of.

What it means is that all @component directives need to be named using a hyphen () if its corresponding class is to be named using the camelCasing convention. The alternative seems to be to keep the class name all lowercase (but no hyphens are required).

The third option, which doesn't seem feasible now given the implementation of the casing, is to allow for a class name that starts with a capital letter and also is camel cased... so camelCase("tuna-fish") => "TunaFish", which might be more in line with traditional class naming conventions but not necessarily Javascript function naming conventions. This might actually be worth talking about, since the Typescript and (Angular2 Docs)[https://angular.io/docs/js/latest/quickstart.html] seem to be consistency using capitalized first letter, camelCased naming.

Anyway, in the meantime I will try to update the docs to make the currently implemented naming convention of the project more clear:

index.html:

<directive-i-want-to-manipuate></directive-i-want-to-manipuate>

app.ts

@Component({
    selector: 'directive-i-want-to-manipuate'
})
@Template{
    templateUrl: 'app.ng.html'
}
class directiveIWantToManipulate{
    animal:string;
    constructor(){
        this.animal="Monkey?"
    }
}

app.ng.html

<b> Wait a second... am I really a {{directiveIWantToManipulate.animal}} </b>

In this example i can not get myApp scope from a child state in views

We are using angular2-now and its pretty amazing.

we found a bug where there seems to be a race condition between angular and angular2-now where angular.module is not always set to SetModule; By using angualr2now the usual way, our app doesnt always load becuase this override of angular.module is not always set. When we add the below code at the top of out .ts file to our app, then it loads correctly every time:

angular.module = angular2now.SetModule;

example in typescript with system.js transpiling:

import * as angular2now from 'angular2-now';

var {Component, View, bootstrap} = angular2now;

console.log(angular.version);
angular2now.options({ controllerAs: 'vm' });
// this below seems to be very important due to a bug in angular2-now
angular.module = angular2now.SetModule;

angular.module('foo', [ ]);

class ...

bootstrap...

Hi,
would it be possible to add annotations like @servicefactory and @Serviceprovider?

I understand that these are concepts that (afaik) won't find their way into angular 2, but as @service and @filter currently are pretty much angular 1.x only, I thought those annotations might also help to keep everything in line.

Great work by the way, I really like this :-)

Hi, I'm trying to get Angular 1 directives to get processed with angular2now but I'm unable to get them running.

My filter is defined as this

var {SetModule, Filter} = angular2now;
SetModule('App');
@filter('currencyFilters')
export class CurrencyFilters
{
constructor() {
return function(input) {
var ret=(input)?input.toString().trim().replace(",","."):null;
return parseFloat(ret);
};
}
}

After i make an import through from filter and finally introduce this in html:

but filter is not processed.
And obtain an error: Error: [$injector:unpr] http://errors.angularjs.org/1.3.17/$injector/unpr?p0=currencyFiltersFilterProvider%20%3C-urrencyFiltersFilter

Any hint on how to achieve it?

I am curious how to use angular2-now with typescript and jspm.
Any ideas?

This is related to #9 (which was resolved) -- essentially it seems that the @Componenent annotation is calling out to jQuery but doing so using an anonymous function that doesn't really give a helpful stack trace.

For example, I get error messages like this in my console:

ReferenceError: SYMBOL_ITERATOR is not defined
    at checkIter (eval at <anonymous> (http://localhost:50017/packages/jquery.js?dd8bac56f8fd3666d433d2285ae01e52597cc51a:372:22), <anonymous>:1090:7)
    at getCollection (eval at <anonymous> (http://localhost:50017/packages/jquery.js?dd8bac56f8fd3666d433d2285ae01e52597cc51a:372:22), <anonymous>:1119:33)
    at Object.23../$ (eval at <anonymous> (http://localhost:50017/packages/jquery.js?dd8bac56f8fd3666d433d2285ae01e52597cc51a:372:22), <anonymous>:1263:11)
    at s (eval at <anonymous> (http://localhost:50017/packages/jquery.js?dd8bac56f8fd3666d433d2285ae01e52597cc51a:372:22), <anonymous>:40:254)
    at eval (eval at <anonymous> (http://localhost:50017/packages/jquery.js?dd8bac56f8fd3666d433d2285ae01e52597cc51a:372:22), <anonymous>:40:305)
    at Object.1../src/es5 (eval at <anonymous> (http://localhost:50017/packages/jquery.js?dd8bac56f8fd3666d433d2285ae01e52597cc51a:372:22), <anonymous>:55:1)
    at s (eval at <anonymous> (http://localhost:50017/packages/jquery.js?dd8bac56f8fd3666d433d2285ae01e52597cc51a:372:22), <anonymous>:40:254)
    at e (eval at <anonymous> (http://localhost:50017/packages/jquery.js?dd8bac56f8fd3666d433d2285ae01e52597cc51a:372:22), <anonymous>:40:425)
    at eval (eval at <anonymous> (http://localhost:50017/packages/jquery.js?dd8bac56f8fd3666d433d2285ae01e52597cc51a:372:22), <anonymous>:40:443)
    at eval (eval at <anonymous> (http://localhost:50017/packages/jquery.js?dd8bac56f8fd3666d433d2285ae01e52597cc51a:372:22), <anonymous>:2263:2)

I was hoping that we could either try to work on improving the documentation around the @component (for example, the different "bind" options of '=', '&', and '@' are not documented), and maybe also provide a more helpful error message when the "selector" fails (which I think is the origin of my error).

In app.html I have the following

<ion-nav-bar  class="bar-positive">
        <ion-nav-back-button></ion-nav-back-button>

        <ion-nav-buttons side="right">
          <button class="button button-icon" menu-toggle="right">
            <i class="icon ion-android-menu"></i>
          </button>
        </ion-nav-buttons>
</ion-nav-bar>

<ion-nav-view>
</ion-nav-view>

But because the routes load a directive around each route, this causes the navigation logic for showing view-titles and the ion-nav-back-button to not work properly

example, this is what the resulting html looks like which is causing issues

<ion-nav-bar  class="bar-positive">
        <ion-nav-back-button></ion-nav-back-button>

        <ion-nav-buttons side="right">
          <button class="button button-icon" menu-toggle="right">
            <i class="icon ion-android-menu"></i>
          </button>
        </ion-nav-buttons>
</ion-nav-bar>

<ion-nav-view>
  <component-directive>
    <ion-view view-title="My Title">
        <ion-content has-header="true">
        </ion-content>
    </ion-view>
  </component-directive>
</ion-nav-view>

Is there anyway of getting the ionic navigation working properly while still using component syntax?

How can I declare Attributes?

Does it assume a @component is an attribute is no @view is used?

Also for directives how can I set transclude: true or require: ngModel