I looked into gruntjs but I'm not sure if it the right tool to solve my workflow problem. I' working on a huge angular project with 30+ js files already into it. Every time I add a new js file, I have to go to index file and add reference in it. Is there any way to automate this process with grunt or any other tool?
Absolutely! Here are two ways:
Yeoman
Yeoman is a set of integrated workflow management scripts built on Grunt and Bower that supports automatic scaffolding and compilation. There is an AngularJS generator for it too.
ngBoilerplate
This is my creation, so I definitely have a bias here, but it has a Grunt-based built system and a defined directory structure that makes managing non-trivial AngularJS apps super easy.
Related
I've started curating an old web project based on tons of java code (old spring version) and a singular monolithic frontend module a.k.a. "The web-module" and I'm trying to upgrade the build steps and migrate old angularJS code bit by bit.
The idea was to implement Redux as a single point of truth between old and new code and Webpack for bundling new js files (vanillaJS/React) and other assets and integrating them in the old .jsp files that are littered with lots and lots of good old tags.
The old code is a mix of Javascript, jQuery and AngularJS, events are handled by jquery, I'm getting lots of funny side effects of conflicting / competing angularJS $scopes for every module I touched so far.
How does a sane individual integrate dist/ files generated by webpack into old .jsp files without messing everything up and/or losing her/his sanity? I feel kinda overwhelmed by all the things that might go wrong and I'm searching everywhere for success stories of people trying stuff like this. All I could find so far were migration guides but that's not an option with about 80-100 legacy angularJS files that would have to be rewritten for webpack so I need a solution that works side by side until I've managed to rewrite all the old angularJS Modules, one update at a time.
Hello everyone I want to learn angular, but I am bit confused like what is the use of angular cli??
Why I need to write 3 different files like app.html, app.component.ts and app.module.ts instead of writing code in those three files can't we use angular cdn directly? How better that component based architecture will work?
Please do not laugh at me I am new to this topic so previous are random questions that came to my mind while surfing the internet.
Angular CLI stands for Angular Command Line Interface (see this link). As the name implies, it is a command line tool for creating angular apps. It is recommended to use angular cli for creating angular apps as you don't need to spend time installing and configuring all the required dependencies and wiring everything together.
The Angular CLI is used for much more than just creating an Angular project. It can be used to create components, services, pipes, directives and more. Also it helps in building, serving, testing etc. CLI itself is quite something to learn about, it makes Angular development workflow much easier and faster.
I will try to provide little more thorough answer on this and give a few examples too.
First of all, Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell. It saves you from the hassle of complex configurations and build tools like TypeScript, Webpack, and so on.
After installing Angular CLI, you’ll need to run one command to generate a project and another to serve it using a local development server to play with your application.
Here are a few basic and useful commands that show the benefit of using it:
ng help
ng generate --help
ng new my-first-project
cd my-first-project
ng serve
For more commands info and their full explanation refer to the official documentation here: Angular CLI Official Page.
You do not have to use Angular CLI in order to create and run and develop Angular apps, but isn't it best to use "GG" electric socket covers with "GG" frames for those covers?
Angular cli can ease you work setting up maintain and customize your angular projects. Here are some of the main reasons you should use it:
https://scotch.io/tutorials/use-the-angular-cli-for-faster-angular-2-projects
I know its base on what you need, but in bare minimum what would be the best start up frameworks, task runners, plugins etc to develop real world web application? Im a noob but I think Il set it up as using:
Npm, angularjs ,jquery, expressjs, grunt, bower, bootstrap?
Then you just check which plugin you need for particular job?
Because alot of tutorials are pretty focus on just the angular side of things but never a real world development environment that could help with the job.
And follow up question is it advisable to have a dst and src folder and when youre done put everything in dst? What would be your take on this matter? Thank you
And for your question, I would suggest Angular CLI. It creates all the boilerplate to start coding in Angular, including task manager with all most all the tasks you need, CSS and boiler plates, etc.. It even has a command-line interface which would help you create components, classes, services, etc of your app from the terminal.
I have a clutter of files comprising my node/express/angular app. I want to build a more structured directory structure.
1.
Can I do this with Yeoman, now after we are 6 months into developing our app and if so, how?
2.
What are the benefits aside from the cleaner structure?
You can happily use Yeoman. I would recommend you to use Yeoman along with Grunt. I suits best you to build the minification process and removes the overhead of upgrading versions manually.
Yeoman generators are much better suited for ground-up development. That being said, you can potentially retrofit your exiting app to use one of the generators (maybe this one), but you'd be much better off running the generator in a new directory and then plugging in your existing code.
Is it possible to minify an ExtJS 4 MVC style application using a third party tool like UglifyJS?
I've tried compressing each file in the app into a single file, but the ExtJS loader then reports that it can't find the files to load.
I am aware that Sencha has an official build tool, but I am trying to get the minify to work with a more industry standard tool that is easier to deploy on servers.
I think it is possible to use UglifyJS manually but I'd recommend going with Sencha Cmd. Besides JS compression, it deals with many other tasks: dependency tracking, package management, theme building, etc. It's not that all of these are required for Ext JS application but Sencha Cmd will definitely save you a lot of time and pain, and the bigger your app is, the more pronounced the effect will be down the road.
Just my 2¢ anyway.