CODEWITHSUNDEEP
javascriptangularjs
Deepak Ingole
Deepak Ingole

Reputation: 15742

Thinking in Angular Way

I am working on project with more than 1500 HTML pages.

This project was previously implemented in jQuery and JS code. Now I have to revamp this SPA using AngularJS.

I have gone through basics of angularjs. We have several interaction on in our projects (Moving from one page to another).

  1. Is <head ngapp="routingApp"> is the right place to configure the routing for whole project or can I define it separately for each module?
  2. As the project also uses jQuery for bootstrap dependency does it make any sense just to include jQuery for bootstrap?

Upvotes: 1

Views: 372

Answers (2)

Xeon
Xeon

Reputation: 5989

I would strongly discourage you from declaring all your routing in one file. It will lead to really big file & bad maintainability.

If you have such a big project I'll advise you to read the Google's recommendation for AngularJS structure first.

Then every developer will have a way to 'scope' his work within one module & it would be easier for him to understand it. Moreover it would be much easier to disable/enable some modules just by excluding them from final composing&"compilation" phase.

E.g. you'll have a module that defines routes that can be reached within this module.

I strongly recommend using Gulp & Bower (you'll have to have Node.js) to manage you dependency management as well as composition/compilation phase management. As a teaser here you have gulp scripts compilation for fractal structure:

gulp.task('scripts', function () {
var depJS = dependencies.bower.js.map(function (dep) { return config.bowerLib + dep; });
depJS = depJS.concat(dependencies.node.js.map(function (dep) { return config.nodeLib + dep; }));

var srcJS = ['app/modules/app.js', 'app/modules/**/*.module.js', 'app/modules/**/*.js'];

var libPipe = gulp.src(depJS)
    .pipe(plumber())
    .pipe(concat('lib.min.js'))
    .pipe(size({title: 'js-before lib'}))
    .pipe(gulpif(config.minimize.perform, uglify(config.minimize.js)))
    .pipe(size({title: ' js-after lib'}))
    .pipe(gulp.dest(config.scriptsOutDir));

var pipe = gulp.src(srcJS)
    .pipe(plumber())
    .pipe(concat('all.min.js'))
    .pipe(size({title: 'js-before all'}))
    .pipe(gulpif(config.minimize.perform, uglify(config.minimize.js)))
    .pipe(size({title: ' js-after all'}))
    .pipe(gulp.dest(config.scriptsOutDir));
});

The second question - AngularJS have jQLite inside it. When the jQuery is available the jQuery implementation is used. (side note: use jQuery/jqlite only in directives). It depends how vastly the jQuery library is used throughout your project & what methods are used. Can it be replaced by jqlite (limited jQuery) or can you just rewrite all jquery specific DOM/etc. manipulation by directives. You've mentioned bootstrap - did you mean Twitter Bootstrap? If so, look at the AngularJS UI-Bootstrap

Upvotes: 2

Milos Mosovsky
Milos Mosovsky

Reputation: 2983

You can definetaly separate it in modules, look at https://github.com/angular-ui/ui-router.

1.) If you are asking if its right to define whole routing inside 1 index.html and one angular app , yes it is right place. It is purpose of SPA

Upvotes: 1

Related Questions