Giter Site home page Giter Site logo

angular's Introduction

angular

AngularJS provided as a CommonJS module. Compiled with jsdom when running in Node. Useful for client-side apps built with Browserify and for testing AngularJS code in Node without depending on a browser.

Versioning

The version number of this module reflects the version of AngularJS it provides.

Why

For client-side apps using Browserify, this module provides a way for them to use AngularJS without shimming.

Having a version of AngularJS that works outside the browser could also be convenient for many reasons. The primary motivation was around testability and modularity of AngularJS related projects. For developers utilizing the CommonJS standard and Browserify to build AngularJS projects and ecosystems, the hope is that this module will greatly simplify their workflow.

As egghead.io has shown, testing simple views and directives is a great way to ensure the pieces of your app are working as intended. Unfortunately, testing this way usually requires running your code in a real browser via something like Karma, because AngularJS assumes window and document are both available. Additionally, AngularJS (via angular-mocks.js) only exposes the inject method shown in the egghead.io videos if window.jasmine is defined.

This module allows you to test AngularJS views and directives using any testing framework and runner you like, from Mocha to Nodeunit to tape.

This module also aims to make it much easier to create AngularJS directives, modules, and other components that can be independently published to and versioned on npm and/or their own repositories.

Examples

The inject method referenced above is really just a shortcut to $injector.invoke, but $injector is only available from within AngularJS. Fortunately, there are two ways to get a reference to Angular's injector from outside of AngularJS code.

// this will return a fresh instance of injector each time it's called
// if your code is not running in a browser you must use this method
var injector = angular.injector(['ng']);

// provided only as an FYI, the following method WILL NOT WORK outside a web browser
// this will return the injector singleton for the application in which <element> is defined.
// for code that runs in a browser you could just use document if ng-app is defined on <html>
// otherwise you can use any element that is a descendent of the tag your app is defined/bootstrapped on
var injector = angular.element(<element>).injector();

Testing view compilation

var angular = require('angular'),
	inject = angular.injector(['ng']).invoke,
	num;

inject(function ($rootScope, $compile) {
	var el = angular.element('<div>{{ 2 + 2 }}</div>');
	el = $compile(el)($rootScope);
	$rootScope.$digest();
	num = +el.html();
});

// num === 4

Testing event handling

var angular = require('angular'),
	inject = angular.injector(['ng']).invoke,
	answer;

inject(function ($rootScope) {
	$rootScope.$on('foo', function (e, val) {
		answer = val;
	});
	$rootScope.$broadcast('foo', 'bar')
});

// answer === 'bar'

How to build (reminder for myself)

Update package.json to the desired version, save but don't commit, then run node bin/build.js. Then git push and npm publish.

angular's People

Contributors

bclinkinbeard avatar mortonfox avatar raynos avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

angular's Issues

How to include angular-mocks

If I try this:

var angular = require('angular'),
    inject = angular.injector(['ng']).invoke;
require('angular-mocks');

describe('Auth Service', function() {
    var $httpBackend;   
    describe('Login method', function() {
        inject(function(_$httpBackend_, $q) {
                $httpBackend = _$httpBackend_;
                console.log($httpBackend);
        });
    });
});

I get an error that says 'window is not defined', which is coming from requiring angular-mocks. Is there something else I can try so that I can use the $httpBackend service for testing $http?

Thanks

module fails to load in upcoming node 0.12 release

I checked out the 0.12 branch from the nodejs source repo and built it (it reports its version as 0.11.14-pre).

Using the resulting node binary, require('angular') (using 1.2.23 of this module installed from npm) throws a TypeError:

magi@ubuntu ~/s/d> node
> require('angular')
TypeError: Cannot set property length of [object Object] which has only a getter
    at DocumentFragment.core.Node.insertBefore (/home/magi/src/test/node_modules/angular/node_modules/jsdom/lib/jsdom/level1/core.js:553:30)
    at DocumentFragment.<anonymous> (/home/magi/src/test/node_modules/angular/node_modules/jsdom/lib/jsdom/level2/events.js:332:20)
    at DocumentFragment.proto.(anonymous function) [as insertBefore] (/home/magi/src/test/node_modules/angular/node_modules/jsdom/lib/jsdom/utils.js:23:26)
    at DocumentFragment.core.Node.appendChild (/home/magi/src/test/node_modules/angular/node_modules/jsdom/lib/jsdom/level1/core.js:671:17)
    at jqLiteBuildFragment (eval at <anonymous> (/home/magi/src/test/node_modules/angular/custom.js:14:3), <anonymous>:2330:20)
    at jqLiteParseHTML (eval at <anonymous> (/home/magi/src/test/node_modules/angular/custom.js:14:3), <anonymous>:2364:10)
    at Object.JQLite (eval at <anonymous> (/home/magi/src/test/node_modules/angular/custom.js:14:3), <anonymous>:2383:26)
    at forEach.prepend (eval at <anonymous> (/home/magi/src/test/node_modules/angular/custom.js:14:3), <anonymous>:3000:15)
    at Object.JQLite.(anonymous function) [as prepend] (eval at <anonymous> (/home/magi/src/test/node_modules/angular/custom.js:14:3), <anonymous>:3112:17)
    at eval (eval at <anonymous> (/home/magi/src/test/node_modules/angular/custom.js:14:3), <anonymous>:21956:88)

The actual exception comes from inside https://github.com/tmpvar/jsdom code, and I suspect using a newer version of jsdom might help.

The package.json in the angular npm module requests ~0.8.8 of jsdom, and is currently getting 0.8.11. I changed node_modules/angular/package.json to ask for ~1.0 of jsdom, and it gets 1.0.0-pre.6, and this seems to work better; at least, require('angular') works from the REPL with my "node 0.12" binary.

Assuming jsdom ~1.0 works for this module's purposes under node 0.10 as well, it might be a good time to upgrade?

Making nodejs shims for angular modules

This module helps me a lot in writing code that is shareable between by angularjs-client and nodejs-server. This reduces code repetition.

In order for the code to work in both environments, we have to write shims for angular's modules. For example, for $q I use the following shim to use q instead.

angular = require('angular')
q = require('q')


angular.module('tepez.common.q', [

])

.config ($provide) ->

  # modify angular's $q to use kriskowal's q
  $provide.decorator('$q', ['$delegate', ($delegate) ->
    $delegate.defer = q.defer
    $delegate.all = q.all

    return $delegate
  ])

The same can be written for $http, $httpbackend etc.
What do think about this direction? Does it falls within the scope of this module?

Update to 1.2.21

hi @bclinkinbeard,
is it possible to update your angular version to the latest stable?
maybe you can accept PRs for when new versions come along.

Thank you
-David

Give this a new home?

Now that angular core team is using angular as a npm module name. It'd be nice to give this a new name even though I can technically pull it from github in npm. Call me lazy but I like the convenience of just doing npm i [packageName] 😃

index-browserify.js is missing in source map

Error loading source:
Could not load the source for https://localhost:8080/home/michael.heuberger/binarykitchen/code/videomail.io/node_modules/angular/index-browserify.js.
Error: "https://localhost:8080/home/michael.heuberger/binarykitchen/code/videomail.io/node_modules/angular/index-browserify.js" is not in the SourceMap.
Stack: SourceMapConsumer_sourceContentFor@resource://gre/modules/devtools/SourceMap.jsm:391
SourceActor.prototype._getSourceText@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/main.js -> resource://gre/modules/devtools/server/actors/script.js:2452
resolve@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/commonjs/sdk/core/promise.js:118
then@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/commonjs/sdk/core/promise.js:43
then@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/commonjs/sdk/core/promise.js:153
SourceActor.prototype.onSource@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/main.js -> resource://gre/modules/devtools/server/actors/script.js:2471
DSC_onPacket@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/main.js:1023
LDT_send/<@resource://gre/modules/devtools/dbg-client.jsm -> resource://gre/modules/devtools/server/transport.js:258
makeInfallible/<@resource://gre/modules/devtools/DevToolsUtils.jsm -> resource://gre/modules/devtools/DevToolsUtils.js:80
Line: 391, column: 6

I am seeing this in the Firefox console after bundling with browserify with the debug parameter.

Angular fails to install on Windows 8.1 via npm

Currently you cannot install angular on Windows 8.1 via npm package manager.

npm install angular

C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\V120\Microsoft.Cpp.Platform.targets(64,5): error MSB8020: The build tools for Visual Studio 2010 (Platform Toolset = 'v100') cannot be found. To build using the v100 build tools, please install Visual Studio 2010 build tools. Alternatively, you may upgrade to the current Visual Studio tools by selecting the Project menu or right-click the solution, and then selecting "Upgrade Solution...". [node_modules\contextify\build\contextify.vcxproj]

Can't install angular

Hello,

Console reports me some troubles with python executable and contextify issues, so i can´t install angular with "npm install angular". Can you help me please??

image

automatic-ish upgrades

So Gemnasium has this thing where it can automatically upgrade your packages for you via pull request. I believe this is free to do for 2 packages.

screenshot

Theoretically, then, when angularcore releases a new version, Gemnasium can send a PR with the updated dependency.

After that you'd just have to bump version and tag, or figure out some way to automate further.

At the very least it can let you know when the angular is updated.

Switch to Cheerio instead of JSDom?

JSDom has major issues compiling to the various platforms (e.g. See the bottom several paragraphs on their npm page detailing how to ensure it builds). The root cause of this is its "contextify" dependency which natively sandboxes the runtime. As useful as that sounds I'm skeptical its truly necessary for most use cases, especially given the many hoops one must jump through to get JSDom to build. On my machine I STILL can't get it working 5 gbs of downloads later. Am I crazy to think this is an unacceptably high hurdle for the majority of developers simple wanting to require Angular from NPM rather than bower?

So an alternative solution to JSDom is the Cheerio library. This module is compatible with all major platforms out of the box, is actually MORE popular than JSDom judging from download numbers, is faster than JSDom, and comes out of the box with its own port of the the jQuery selector library.

I recognize this may NOT be possible if Angular is super strict on the browser like environment it demands. But it would be worth looking into. Any thoughts?

Angular source map breaking project source mapping

Using this module as is means that source mapping does not work for the project files.

The solution which i have been using is to remove the source map from angular.min.js

Not sure if this a browserify issue or if chrome does not support nested source maps.

Any ideas?

Why both a browserify and a node version in the same repo?

I only want the browserify version of angular, but because this repo is dependent on jsdom to provide the node version of angular I am not able to install this module at all.
That's because jsdom depends on contextify which fails to install on several platforms and/or node versions.

IMO it would be better if this repo was split into two repositories, one for the browserify version and one for the node version (which can depend on the browserify version internally).

Until then it's unusable for me...

How to combine with jQuery?

I'm attempting to use angular using Browserify, but I'm unable to figure out how to get AngularJS to use jQuery in this distribution. In a regular AngularJS build, it would simply replace its internal jQLite with jQuery if jQuery turns out to already be loaded, but that is obviously not possible here due to the isolation that Browserify provides.

How can I make angular use the real jQuery module instead of jQLite?

Examples

Hi,

The idea behind this is fantastic! However, I'm struggling with examples. For instance, I just want to test a simple factory.

Let's say I have a client-side asset, which is an AngularJS Module w/ a factory in its own file (which gets compiled by a build tool):

factory.litcoffee:

angular.module('com.me', []).factory 'myFactory', [
  () -> 

    api = 

      test: () -> 'someval'

]

In Node.js, I'd like to assert that myFactory.test() returns someval, but I keep getting an error. I haven't gotten to "assert" yet, I'm just trying to get someval logged.

test.litcoffee:

angular = require('angular-node')()

require './factory.litcoffee'

injector = angular.injector [ 'com.me' ]

fn = (myFactory) -> console.log myFactory.test()

injector.invoke fn

The error:

Module 'com.me' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

I have also tried:

angular = require('angular-node')()

require './factory.litcoffee'

injector = angular.injector [ 'myFactory' ]

fn = (myFactory) -> console.log myFactory.test()

injector.invoke fn

The error:

Module 'myFactory' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

...and this...

angular = require('angular-node')()

require './factory.litcoffee'

injector = angular.injector [ 'com.me' ]

injector.invoke [ 
  'myFactory', 
  (myFactory) -> 

    console.log myFactory.test()

]

...and this...

angular = require('angular-node')()

require './factory.litcoffee'

injector = angular.injector [ 'myFactory' ]

injector.invoke [ 
  'myFactory', 
  (myFactory) -> 

    console.log myFactory.test()

]

... and this...

angular = require('angular-node')()

require './factory.litcoffee'

injector = angular.injector [ 'com.me' ]

myFactory = injector.get 'myFactory'

ctrl = (myFactoryObj) -> console.log myFactoryObj.test()

injector.instantiate ctrl

Think you can help shed some insight? I've used injector on the client-side before, but that was into a config! Can't seem to get it. Is this how you envisioned a test to be ran? Thanks!

angular.mock is not defined

I'm trying to test an angular app with mocha, from the docs it seems that this should work

var angular = require('angular');

describe('myApp', function() {
    beforeEach(angular.mock.module('myApp'));
});

I'm getting Cannot call method 'module' of undefined

Does not work with unminified version of angular

I tried to point index.js to use the unminified version of Angular and got the following error.
For both 2.15 and 2.16 the minified version worked but the unminified didn't.

> require('angular')
ReferenceError: angular is not defined
    at eval (eval at <anonymous> (F:\Tom\Code\tepez\common\node_modules\angular\index.js:14:3), <anonymous>:21465:28)
    at module.exports (F:\Tom\Code\tepez\common\node_modules\angular\index.js:14:43)
    at Object.<anonymous> (F:\Tom\Code\tepez\common\node_modules\angular\index.js:15:3)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at repl:1:2

Thanks for this great module! I use it to get angular's $parse and $interpolate and on the server.

Duplicate NPM packages

Not sure why there are two NPM packages, angular and angular-node that AFAICT are the same thing. Also publishing an NPM package called angular is confusing for someone expecting to just get the straight up Angular files, not your common js wrapper. It would seem that removing the angular package would clean this up as angular-node would better describe your package and leave angular open for someone to publish a package containing straight up Angular. What do you think?

Module not defined error

I get this error just by doing require('angular'); (my script doesn't contain any other code), I'm using 1.2.19 with browserify.

[$injector:nomod] Module 'ngLocale' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Can 1.4 require loader now be used to read the source for Angular?

I was wondering out the CommonJS-ification of 1.4 might make it easier for angular-node. Obviously it replaces the work angular-node was doing to be importable. But for use outside of a browser, via jsdom, you still need the work custom.js is doing to read the JS source and modify the string before loading. Which means, having a private copy of Angular.

But can this part be eliminated? I don't know how require works, but can you use CommonJS to locate the path to an npm-installed Angular?

Sure wish Angular 1.4 had a hook that let you swap the window and the document.

Ben, alternatively you could declare this project as no longer interesting to you. :)

Accessing the window object

I'm trying to pre-render my angular site on the server for SEO purposes and stumbled across this package which comes with jsdom.

I can inject for testing as the documentation describes, but how would I go about getting the full HTML of the page to send on page-load?

angular.$window and angular.$document are undefined.

how to use $compileProvider on server side

I am useing angular doing some compile work, make ng tags to common HTML tag.
I wish to config $compileProvider on server side, but don't khow how to. can you help me?

Please pull in the latest AngularJS code.

The latest stable of AngularJS is 1.2.15.
Please pull. (Or better yet, automate a pull for latest stable. Better yet, get the AngularJS project to host the official npm angular module instead.)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.