Ok, I think that this is an easy question. I am new to Bower, and I am trying to keep my bower.json file in sync with the multiple libraries that Angular now provides. I am using angular-resource, angular-cookies, angular-sanitize, angular-animate, and then the main angular library. In my bower.json file I have all of these listed as dependencies, but I am having to update 1.2.4 to 1.2.5 for each of these items.
I am sure there is an easier way, and as I understand it I can do "~1.2" for each item and get all of the 1.2.x updates when doing a bower install. But if I want to get specific versions, do I have to update all of the strings to 1.2.5 or can I have a variable somewhere in the bower.json that I can reference, and just update that one variable?
You can't have variables in your bower.json file, so its not supported out of the box.
See: https://groups.google.com/forum/#!msg/twitter-bower/OvMPG6KS3OM/eo6L2VadxI8J
As a workaround if you have sed you can run something like:
# update 1.2.5 -> 1.2.7 in test.json
sed -i '' 's/1.2.5/1.2.7/' test.json
Related
This should be straightforward - Is there a way to remove comments in HTML/view output during an angular build or render processes? The goal is simple - I don't want users to see them. I know this can be done with something like Grunt or Gulp, but want the comments to be visible during development (and currently have Grunt for a build tool). I've heard this can be done using the Angular CLI, which I know is for use in Angular >=2.0 projects, but am not sure if it could be using in a 1.x/JS project.
In Angular 2+:
ng build --prod
creates the dist/ folder in the root. It contains via webpack stripped down code without any comments, at least with the standard configuration.
i have some angularjs file that has RESTAPI access to a third party service.
say, i have multiple java applications that need to use the same angularjs file.
what is the best way to share the file.
basically, in the olden days (i am talking about back end code), we would write an application that is deployed as a service and all other applications use this service. how do i achieve this with angular.. please keep in mind, i was mostly a back end developer and entering the new front end world
thanks
I would recommend to use Bower for maintaining your reusable components. Develop standalone functionality in their own modules, doesn't matter whether they're directives, services or whatever Angular components, and then install them as Bower dependencies into any of your separate Angular applications.
Bower has documentation on creating packages, and Brian Ford has written a nice (albeit a bit outdated at places) tutorial on writing reusable Angular components using Bower.
So, basically your workflow would go like this:
Start developing your module. If it is something already existing, you can just pull it out of the current place.
mkdir your-component-name
cd your-component-name
$editor your-module.js
Once you have your-module.js started (no need to finish development first, it's actually even better not to, if you're developing a completely new component), it's time to initialize your Bower component.
bower init
You will be asked for some initial settings, like component name (defaults to the directory name, e.g. your-component-name), initial version number, main file (should most likely be your-module.js) etc. For most of the cases the default value is just fine. After bower init has been successfully run, you will have bower.json that might look somewhat like this:
{
"name": "your-component-name",
"version": "0.0.0",
"main": 'your-module.js',
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
And of course you could do all this manually, but it's nice to use the bower init helper tool.
Continue development. If you have any external dependencies, you can add them also with Bower:
bower install external-dependency --save
Finished with development? It's time to publish your component so that it can be used in your applications. If you haven't already initialized your Git repository, start with it:
git init .
Add your work, commit and tag it:
git add <your-component-contents>
git commit -m "v0.0.0"
git tag v0.0.0
This is the part, in addition to the value of version property in your bower.json (note: Brian Ford's tutorial is talking about component.json - that is unfortunately outdated stuff), where you will be able to maintain your component pretty easily within all your applications. Need a change? Just do it, bump up the version number, commit, tag and run bower update where needed.
Next step is to publish your code into a Git repository, for example GitHub
git remote add origin git#github.com:your-github-user-name/angular-your-component-name.git
git push -u origin master
Then the component can be installed:
bower install your-github-user-name/angular-your-component-name
The component can even be installed from a private repo, for example if you do not want to publish the component outside your company (see under heading "Bower Package Stewardship" in Brian Ford's tutorial for more details):
bower install git#github.com:your-github-user-name/angular-your-component-name.git
# or from any other arbitrary git repo
On the other hand, if you do wish to publish your newly created component, you should think about registering it:
bower register angular-your-component-name git#github.com:your-github-user-name/angular-your-component-name.git
So it could be searched for, and would be easier to install:
bower install angular-your-component-name
Start using your component(s) in your Angular applications. And whenever you notice a bug/missing feature with one of your apps, you can fix your component, do a new version release, and then update your applications one by one.
And then there also is npm that you could use instead of Bower. The workflow is again pretty much the same, of course differing from the tool specific parts, but otherwise no big differences. I won't go into npm packaging details now, though, just thought to mention also that as an alternative tool.
SOLUTION 1 :
This can be acheive exactly the way you described.
Deploy a Service AngularJS app (that has all your services)
for example : tomcat7/www/myServiceApp
All your needed shared will be therefore into myServiceApp/js/myShareService.js
On your apps that need to access to it, your can reference all JS files (and others) like that <script src="../myServiceApp/js/myShareService.js"></script>
Of course with that solution, both services shall be deployed on same WebServer
Solution 2:
I personnaly prefer this solution with involves Continuous integration.
I copy all shared resources on the first step of the continuous integration to my app dir so every app is independent.
In Angular we separate our app by modules which is equivalent to a package in Java. Let's say you wanted to create a package which you can re-use for other Angular JS apps.
Sample
External Package
angular.module('my-awesome-app', [])
.service('FooService', function () {
// Awesome code(s) here
});
App Package
angular.module('another-app', ['my-awesome-app'])
.controller('AppController', function (FooService) {
// Awesome code(s) here
});
instead of using import we set my-awesome-app as a dependency for another-app (which why we put it on the array) so you can call its service.
Create JS file containing Angular Module which in turn contains Factory to expose API. Minify your file and use it either thru URL or direct inclusion into your project.
I am having some issues with the Angular filters, everyone says: is because you are not using angular 1.3.8 or above versions, I just realized my version by doing angular.version on the console and:
Object {full: "1.3.6", major: 1, minor: 3, dot: 6, codeName: "robofunky-danceblaster"} comes up, so, how do I update to 1.3.8 at least ? or update to the latest ?
Is there a way to do that, or I have to work with that version of Angular until the Ionic people updates it ?
ionic.bundle.js is a concatenation of:
ionic.js
angular.js
angular-animate.js
angular-sanitize.js
angular-ui-router.js
ionic-angular.js
If you want to use a newer AngularJS version than the one included in the bundle you can include them separately with preferred version (instead of loading ionic.bundle.js).
Do note that the AngularJS version that is included in the newest Ionic version is the version that is/was used during testing (I assume). So by manually including a newer version Ionic may break.
If you are using Bower to manage your packages you don't want to manually include a different <script> tag for angular.
If you need to override the angular version (and you are using bower) just add angular as a dependancy in your bower.json, same place ionic should be. And then specify the version number. But please note, that as tasseKATT says, it may break things in ionic if you use an angular version different to what ionic is expecting.
If you still wish to do this, you can do it in two ways. Using the bower command line tool or manually.
Bower command line:
In the root of your application you can do the following which will add the latest version of angular to your bower.json
bower install angular --save
Or manually:
"dependencies": {
"ionic": "driftyco/ionic-bower#1.2.4",
"angular": "1.5.0"
}
Of course whether via the bower command or manually, make sure the resulting version now specified in your bower.json is the one you want.
You may find you need to add a conflict resolution in bower.json to choose your version over the one ionic suggests. However, as tasseKATT says, it may break things if you use an angular version different to what ionic is expecting.
Unable to find a suitable version for angular, please choose one:
1) angular#1.4.3 which resolved to 1.4.3 and is required by ionic#1.2.4
2) angular#^1.5.0 which resolved to 1.5.0 and is required by product-picker
3) angular#>= 1.0.8 which resolved to 1.5.0 and is required by angular-ui-router#0.2.13
4) angular#^1.x which resolved to 1.5.0 and is required by angular-local-storage#0.2.5
5) angular#1.5.0 which resolved to 1.5.0 and is required by angular-mocks#1.5.0
6) angular#^1.5.0 which resolved to 1.5.0
Then you choose an option, prefix it with ! to save the resoltion to bower.json, or just add the below, and change it to the version you want:
"resolutions": {
"angular": "1.5.0"
}
So now your project will say "I need angular version X" and then Ionic says I need a different one, but you in your bower.json you specify which to override. If you want to look into this more, look at the bower.json file within bower_components/ionic/bower.json (There is also a .bower.json, not quite sure of the difference here.
Once you have done everything, so a final:
bower update
And this checks that everything is happy and installed. Any other conflicts will then come up at this point, which you can resolve using the above methods.
This is all you need to do:
ionic lib update
see documentation on Github!
Points to note in the excellent Plunker from #tasseKATT above:
the version of angular in index.html e.g. <script src="https://code.angularjs.org/1.5.0-beta.2/angular.js"></script> must precede the inclusion of ionic.bundle.js
you may need to add https://code.angularjs.org:* to your <meta http-equiv="Content-Security-Policy" ...
You can check that you've loaded the version you want in a browser console using angular.version
I've installed AngularJS using the fullstack installer here:
https://github.com/DaftMonk/generator-angular-fullstack
I want to now include ng-grid. How do I go about that? I've already ran npm install ng-grid which has copied the files to the node_modules directory. Do I just need to update my index.html file, or do I need to manually update the Grunt file? If so can someone guide me? Can't find anything online that can help me.
I guess the same goes for Compass (I've also already installed Compass using the same method above), as I'd like to initially start using #font-face in my app. I've used Compass several times before but not in this kind of setup...
Thanks :)
UPDATE
I've worked out how I should include ng-grid. Wat I should have done is this in the terminal inside my project's dir:
bower install ng-grid --save
This not only installs the ng-grid files in /bower_components/ but also updates the bower.json in my project's root, so that when I run grunt serve it automatically adds the css & js includes in my index.html page. I'm now successfully displaying a table using ng-grid :)
However I've still not worked out how to install compass successfully. I tried bower install compass-mixins --save-dev but when I save my _fonts.scss file it produces errors. The error being that it can't find the compass files. Maybe the path is wrong, but I read somewhere that that is what I should put at the top (that or just #import "compass";). The paths may also be wrong to my font files, but that's something I'll need to investigate once I can get compass running)
#import "compass/functions";
#include font-face("Roboto-Bold", font-files("../assets/fonts/Roboto-Bold-webfont.woff", "../assets/fonts/Roboto-Bold-webfont.eot?#iefix", "../assets/fonts/Roboto-Bold-webfont.ttf", "../assets/fonts/Roboto-Bold-webfont.svg#LatoBlack"), "../assets/fonts/Roboto-Bold-webfont.eot", "normal", "normal");
Uhh, I don't think you need any installer for ng-grid. The fullstack installer is for setting up your server sided stack. ng-grid.js should (like any other js library you want to pass to the client-browser) be accessible like you would implement (for example) jQuery.
So, assuming your directory structure has a folder called libs/js, put something like:
<script type="text/javascript" src="libs/js/ui-ng-grid_2.0.11-0/build/ng-grid.js"></script>
in the header of your index.html and put the source code of ng-grid to that folder. Or use a cdn server if you don't want to host the directive on your server.
In no case I would tell anyone from outside where my server sided node modules are stored or would give anyone but me and the server access to them.
I am using AngularJS v1.2.0-rc.3 with a project using ng-boilerplate. I want to use Bootstrap 3 so I've changed the bower file to use the branch for version 3, but now grunt fails when running the karma tests. I've isolated the problem to module dependencies on ui.bootstrap but I can't figure out what's wrong. Any ideas?
You'll probably need to fork it for now and change the dependency on ui.bootstrap to use their BS3 branch found here: https://github.com/angular-ui/bootstrap/tree/bootstrap3_bis2
It turns out that I had to build the angular-ui-bootstrap package with grunt and change build.config.js vendor_files to use vendor/angular-ui-bootstrap/dist/ui-bootstrap-tpls-0.6.0-SNAPSHOT.min.js
If you're relatively new to ng-boilerplate and want to get jump started with angular support for boostrap3 this fork might be helpful.
https://github.com/MorrisLLC/ng-boilerplate
It uses the lastest versions of the boilerplate vendor libraries and most recent versions of the grunt tasks.
See the Quick Start for modified instructions on building angular-bootstrap. You have to build it because the current angular bootstrap branch does not include the tpls files (templates).
I ran into the same issue and already had written a lot in bootstrap 2.3.2. Instead of starting all over with someone else's git repo, you could just update several files:
build.config.js add in the vendor/bootstrap/js/.js where the file is the javascript that you are planning to use.
less/main.less which imports the bootstrap less. You could use specific less files from bootstrap or do an import of everything with:
#import '../../vendor/bootstrap/less/bootstrap.less';