This post is not a on there are a lot of them online and i would recommend you check them out. This is more about the setup of so you can build apps that are easy to maintain in the long run and manageable. tutorial Angular js Angular js Start with and grunt browserify If you have worked with something like you might have noticed that how everything is just in the right folder and it comes out of box with live reload etc. The same is not the case with and therefore many people end up doing it wrong. Let us start with creating a to maintain all dependencies ember.js angular package.json npm init --yes Now assuming that you have installed globally here is what you do next. Install packages that you would be needing for live reload and building the apps. grunt-cli npm i --save-dev grunt grunt-browserify grunt-contrib-copy grunt-contrib-watch Obviously if you are developing apps for sometime, you know that and are your usefull friends. Let us add build tools needed for them also. You can remove this step if you think you want to use html and css. scss jade npm i --save grunt-contrib-jade grunt-contrib-sass needless to say if you are using make sure you have the ruby module for installed. grunt-contrib-sass scss Installing and angularjs angular-route In last step we only added dependencied needed for the build, its time to install angular and ngRoute. npm i --save angular angular-route Note that i have not added them in dev-dependencies. Getting folder structure ready Here is a small app structure that i prefer to use to keep my codes manageable .├── app.js├── components│   ├── nav.jade├── controllers│   ├── index.js│   └── testController.js├── factory│   └── index.js├── index.jade├── route.js├── style│   ├── main.scss└── templates    └── application.jade You can always change that to what suits you. This is inside an folder in my npm project. app Building the project Edit in your root folder, the one that contains and put in the following content. Gruntfile.js package.json module.exports = function(grunt){    grunt.initConfig({      pkg: grunt.file.readJSON('package.json'),      browserify: {        'dist/app.js': ['app/app.js']      },      jade :{        compile: {          options: {            client: false,            pretty : false          },          files: [{            cwd: "app",            src: "**/*.jade",            dest: "dist",            expand: "true",            ext: ".html"          }]        }      },      watch: {        all: {          options: {livereload: true},          files: ['app/**'],          tasks: ['jade','sass','browserify']        }      },      sass:{        dist: {          files:{            'dist/main.css':'app/style/main.scss'          }        }      },      copy: {        main: {          expand: true,          cwd: 'static',          src: '**',          dest: 'dist/static',        },      }    });

  grunt.loadNpmTasks('grunt-contrib-jade');  grunt.loadNpmTasks('grunt-contrib-sass');  grunt.loadNpmTasks('grunt-contrib-watch');  grunt.loadNpmTasks('grunt-browserify');  grunt.loadNpmTasks('grunt-contrib-copy');    grunt.registerTask('default', ['copy','jade','sass','browserify','watch']);}; That is all that we need for building our , which will build and put in folder. app grunt dist Put some actual content in angular app I am just going to make a simple app that imports nav. doctypehtml.no-js  head    meta(charset='utf-8')    meta(http-equiv='X-UA-Compatible', content='IE=edge')    base(href='/')    title Application    meta(name='description', content='')    meta(name='viewport', content='width=device-width, initial-scale=1')    link(rel='stylesheet',href='main.css')  body(ng-app='application')    div(ng-view)    script(src='app.js')    script(src='//localhost:35729/livereload.js') The last script of comes from and would reload the page when you change anything in your code. livereload grunt-watch // app/app.jsvar angular = require('angular');var ngRoute = require('angular-route');var app = angular.module('application', [ngRoute]);

require('./route')(app);require('./controllers'); Remember we already have and installed. angular angular-route // app/routes.jsmodule.exports = function(app) {  app.config(function($routeProvider, $locationProvider) {    $routeProvider      .when("/",{        templateUrl: "templates/application.html"      });    $locationProvider.html5Mode(true);  });}; This is the file where we define all the routes. Note that is the output of jade from . templates/application.html templates/application.jade // app/controllers/index.jsvar app = require('angular').module('application');

app.controller('testController',require('./testController.js')); This is the file that was imported in , we need to include all controllers here. In this case i have demonstrated with as you can see from the tree structure. app/app.js testController What about components ? that is more of common reusable stuff like navigation that i keep so my templates directory don’t become cluttered. Example in which in this case is the landing page, i can add navigation using application.jade div(ng-include="'/components/nav.html'") How to see the changes in browser Well first you need to start the build, Simply go to root folder of npm project and run from terminal. It will build the project and start to look for changes. grunt You might also see a new directory called . That directory is the final build output for the code. Simply start a in that directory and go to that url in browser, where you can see the application running. dist web-server The moment you make any changes to the code, grunt would automatically run and the browser would reflect the updated changes without the need to reload.

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Building angular app using browserify

Too Long; Didn't Read

Company Mentioned

Rahul Bhola

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Building angular app using browserify

Too Long; Didn't Read

Company Mentioned

Rahul Bhola

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES