I'm trying to find the way of incorporating AngularJS into existing application. Application is modular, so every module has HTML markup and JS script files. Modules are loaded with requirejs and jQuery (for loading markup).
I would like to use AngularJS features in some of the modules, having in mind the possibility of migrating to AngularJS in future. So ideally I want something like this:
define([ 'angular' ], function (angular) {
return function (element) {
// The "element" parameter contains the reference to
// the detached DOM node that contains the markup.
// And what I think should be done is compiling
// or initializing AngularJS with the given DOM HTML fragment
// and with controller, etc.
angular.doSomething(element, ...something...);
// The application module engine will inject the returned element
// into the DOM tree.
return element;
};
});
Any ideas? Thanks!
Just following the tutorial, specifically Step 2 (http://docs.angularjs.org/tutorial/step_02) will show you how to just do a single controller on the page with some simple functionality.
You can just use this, or you can start expanding it by modularizing it as in Step 7. By creating an module you can then add directives and services and take advantage of all that Angular offers. You don't necessarily need to configure routes or anything, but by creating an app module, you can incorporate other modules or services offered throughout the web or by Angular.
AngularJS isn't designed to really run alongside other frameworks and be used for little bits and pieces. You could hack it together to do this but it'll probably become very messy. Angular is much better suited to becoming the basis of the entire app.
Something like jQuery is great for dropping into an app and adding functionality, but angular is far more complex.
If you do want angular to take control of certain parts though, take a look into the ng-controller directive and how it works. Then in your standard markup you'd just add the ng-controller attribute to any element, and then add a new angular controller to your javascript. It would then manage that DOM element.
Look into angular controllers for more info on that. But as I say, I'd suggest making the app entirely Angular rather than trying to just add angular bits to it
Related
I have huge angularjs app, with lots of controllers,factories and directives. I would like to find out if any of the component (controllers,factories and directives) NOT in use delete whole js. E.g. If controller "aboutController" is NOT used anywhere I want to delete it. Same way for factories and directives.
I have tried chrome's extension- JavaScript Tracker. I am also trying to use gulp-unused but it is providing NOT used code and I need NOT used js.
Angular modules are a kind of namespacing feature that we know from the .net world. Keep things contained in modules.
The problem is that I would like to do this:
I would like certain pages that don't have any specific client-side functionality but use custom directives to just define ng-app or ng-app="xyz" to just work; I don't want to introduce an additional Javascript code(file) just to make it work.
I would like to have pages with different modules i.e. App.Main and App.Specific; Both of these pages should use the same directives from #1 and use them.
I would like to contain general stuff inside App.General module, and then have additional modules like mentioned App.Main and App.Specific.
Question
Which module should directives be defined in and how should dependencies (if at all as they don't call each other's code in any way) between these modules be for directives and pages to work as expected?
If I am understanding your question correctly, my suggestion would be to define several angular app modules in the same javascript file and activate the appropriate one for each page by the ng-app="App.General" directive vs ng-app="App.Specific". So you could have have a single concatenated javascript file that contains:
angular.js
any third party dependencies you are using
your custom directives, services, controllers, etc
I would suggest using "very granular modules" as recommended at the NYC AngularJS Meetup Feb 2014 at 24m in this video and putting each individual directive and service into it's own module.
But it would also be fine to group all your shared directives into a single module called "App.Directives", for example.
your general code defined by angular.module('App.General', ['MyDirective']); (plus additional dependencies)
your specific code defined by angular.module('App.Specific', ['MyDirective', 'MyService']); (plus additional dependencies)
Also note that you don't have to declare your app dependencies as a literal array of strings. You could do var directives = ['Dir1', 'Dir2']; Then angular.module('App.Specific', directives.concat('MyService', 'MyController')); to express that the specific app uses the same directives as the general app.
Each page could include the same <script src="/bundle.js"></script> HTML (thus it would be loaded from the web only once then cached).
General pages would include ng-app="App.General" in their HTML. Specific pages would have ng-app="App.Specific".
certain pages that don't have any specific client-side functionality but use custom directives
So the directives technically constitute "client side functionality" since they will be rendered to their final HTML in the browser. So you will need to load angular.js, the modules containing your directives and at least one line of your own code to define an app and declare it's dependencies on the modules that provide the custom directives you are using.
In angular we are used to DI, services, routing and the like. I am wanting to hear from people who have projects that have transitioned to polymer from angular and what they found to be correct way to approach and accomplish similar feats in Polymer. I've found the easiest comparison to be made with the directives and custom polymer elements but from there things diverge.
How do we go about sharing some sort of "service" in a polymer app and create some sort of DI container where we can use to mock dependencies? Also would like to know how you accomplished (routing/nested routing) where before you could have used the ng-Router or UI-Router.
This might help you get going with routing https://github.com/erikringsmuth/polymer-router-demos.
When you use custom elements your APIs are HTML attributes. For now you have to test in the browser with Jasmine or QUnit since Node and PhantomJS don't support custom elements yet. You test by creating an instance of the element, calling a public function on it, and asserting the result.
HTML Imports are loosely equivalent to DI. I haven't seen any mocking libraries for HTML imports yet.
Services will be an interesting topic going forward. Right now you either include business logic in the custom element or have some external script calling public APIs on your custom elements and binding everything together.
I am working on a backbone app that we want to migrate over to angular. However, a true "port" or "rewrite" is not an option due to resource constraints. Instead, we want to introduce angular into the app in a modular sort of way -- ie, identify and carve off easily separatable functionality and make it angular, as well as introduce any new modules (i.e. an admin module) as angular code.
Is this possible? If so: a) Where would you put your "ng-view" tag? Inside the div that you currently render your backbone-based markup? b) How do you introduce angular-routes into all of this?
You can add target="_self" for all the backbone links, then angular would not route those links. We had the same problem and adding this fixed the problem. Hope this helps..
Test
You can use angular in any place you want in your app and use it with backbone if you want but stay in mind that you're using two frameworks and in this case it's totally unnecessary and wrong, but i think that you don't have choice, all you have todo is put the directive "ng-app" where you want to use angular, here is my example:
<html ng-app="myModule">
//your code here
</html>
and the script(like any other angularjs app):
var app = angular.module('myModule', []);
// the rest of the code
I never tested before angularjs + backbone, but i think you can have some problems like to deal with data from server, who will gonna do that? Angular or Backbone?
I have been reading a lot of docs, and I'm getting more and more confused.
I basically can't figure out the difference between a
service
directive
module
I see a lot of custom components. Sometimes they're using directives, sometimes services. It always starts with a module. Can someone explain with an example what the difference is between these three types?
From my own personal notes (mostly snippets from the docs, google group posts, and SO posts):
Modules
provide a way to namespace/group services, directives, filters, configuration information and initialization code
help avoid global variables
are used to configure the $injector, allowing the things defined by the module (or the whole module itself) to be injected elsewhere (Dependency Injection stuff)
Angular modules are not related to CommonJS or Require.js. As opposed to AMD or Require.js modules, Angular modules don't try to solve the problem of script load ordering or lazy script fetching. These goals are orthogonal and both module systems can live side by side and fulfill their goals (so the docs claim).
Services
are singletons, so there is only one instance of each service you define. As singletons, they are not affected by scopes, and hence can be accessed by (shared with) multiple views/controllers/directives/other services
You can (and probably should) create custom services when
two or more things need access to the same data (don't use root scope) or you just want to neatly encapsulate your data
you want to encapsulate interactions with, say, a web server (extend $resource or $http in your service)
Built-in services start with '$'.
To use a service, dependency injection is required on the dependent (e.g., on the controller, or another service, or a directive).
Directives (some of the items below say essentially the same thing, but I've found that sometimes a slightly different wording helps a lot)
are responsible for updating the DOM when the state of the model changes
extend HTML vocabulary = teach HTML new tricks. Angular comes with a built in set of directives (e.g., ng-* stuff) which are useful for building web applications but you can add your own such that HTML can be turned into a declarative Domain Specific Language (DSL). E.g., the <tabs> and <pane> elements on the Angular home page demo "Creating Components".
Non-obvious built-in directives (because they don't start with "ng"): a, form, input, script, select, textarea. Under Angular, these all do more than normal!
Directives allow you to "componentize HTML". Directives are often better than ng-include. E.g., when you start writing lots of HTML with mainly data-binding, refactor that HTML into (reusable) directives.
The Angular compiler allows you to attach behavior to any HTML element or attribute and even create new HTML elements or attributes with custom behavior. Angular calls these behavior extensions directives.
When you boil it all down, a directive is just a function which executes when the Angular compiler encounters it in the DOM.
A directive is a behavior or DOM transformation which is triggered by a presence of an attribute, an element name, a class name, or a name in a comment. Directive is a behavior which should be triggered when specific HTML constructs are encountered in the (HTML) compilation process. The directives can be placed in element names, attributes, class names, as well as comments.
Most directives are restricted to attribute only. E.g., DoubleClick only uses custom attribute directives.
see also What is an angularjs directive?
Define and group Angular things (dependency injection stuff) in modules.
Share data and wrap web server interaction in services.
Extend HTML and do DOM manipulation in directives.
And make Controllers as "thin" as possible.
Think of a module as being a place to wire up a number of other things, such as directives, services, constants etc. Modules can be injected into other modules giving you a high level of reuse.
When writing an angular app, you would have a top-level module which is your application code (without templates).
Services are mainly a way to communicate between controllers, but you can inject one service into another. Services are often used as a way to get to your data stores and people will wrap the angular APIs, such as ngResource. This technique is useful since it makes testing (particularly mocking) quite easy. You can have services for doing other things like authentication, logging etc.
Directives are used for creating widgets or wrapping existing things like jquery plugins. Wrapping existing plugins can be a challenge and the reason you would do this is to establish a two-way data binding between the plugins and angular. If you don't need two-way data binding then you don't need to wrap them.
A directive is also a place for doing DOM manipulation, catching DOM-events etc. You should not be doing DOM-related stuff in controllers or services. Creating directives can get pretty complex. IMHO, I recommend first looking at API for something that can do what you are looking for OR ask Angular's Google Group for advice.