[SOLVED] How do you install Angular on windows 7

How do you install Angular on windows 7

Hi this should be pretty straight forward but I'm getting stuck. I installed buildbot (0.9.06b)on my machine a Windows 7 machine. I have managed to get it up and running however when I try to display the web page(IE8), I get the error Angular not defined. This being a brand new windows box I was not too surprised. I proceeded to download NodeJS the executable and run it on the machine so Node is installed. I then went to Angular website downloaded the zip file, but i'm not sure what to do next? I tried

npm install Angular

and a few variations i.e specifying the version, unzipping the file. But still cannot install it. My machine is behind a firewall so it cannot just go off to the web and get more stuff. It all has to work locally. How should I go about installing Angular? How can I check that Angular is installed?

Regards

Solution

TL;DR

Checkout this github repo for an example working app using Node, Angular, Express and Bower.

The you're reason receiving the Angular not defined message is because you're not serving Angular from your web server to the client.

Installing Angular from npm typically means that you're going to serve it from your node_modules folder or you will be using Browserify. I would advise against using npm install --save angular, your node_modules should contain just server-side dependencies if you're not using Browserify in most cases. Additionally, NPM packages use CommonJS, which isn't preferred in the browser. Browserify is a popular solution for writing CommonJS style code that can be bundled into a browser compatible js file. They have docs to get up and running with.

Alternatively you can install Angular from Bower.io. Bower is a package manager for client-side packages. Bower has a huge package library, including many of the packages that are also available through NPM.

Its also worth mentioning that unless you're doing a npm install -g for global installs, you should add the --save flag when doing an npm install or an npm uninstall for your project dependencies. --save adds any packages you've installed to your package.json file as dependency.

Here is an example of how to serve Angular from Node.js

This example just uses Node.js, Express, EJS (for Express View Engine Rendering), Bower & Angular

npm install -g bower
cd <your project directory>  

// answer questions about your project
// this will create your package.json file
npm init 
npm install --save express
npm install --save ejs

// answer the questions about your project
// this will create your bower.json file
bower init 
bower install --save angular

Directory Structure

- Project Folder
  - node_modules
  - bower_components
  - public
    - app
      - app.js
  - views
    - index.html
  - bower.json
  - package.json
  - server.js

The Angular App - public/app/app.js

// This is a super simple Hello World AngularJS App
(function() {
  angular
    .module('yourApp', [])
    .controller('YourController', ['$scope', function($scope) {         
      $scope.hello = 'Hello World';
    }]);
})();

Angular must be loaded just like any other Client-Side library, so it will need to be included in your pages within the <head> tag.

The View - views/index.html

<html>
  <head>
    <!-- load Angular into our HTML Page -->
    <script src="/bower_components/angular/angular.js"></script>
    <!-- load our Angular App in -->
    <script src="/public/app/app.js"></script>
  </head>
  <body ng-app="yourApp">
    <div ng-controller="YourController">
      {{ hello }}
    </div>
  </body>
</html>

In order for this to work you will need to actually have a web server running that will serve the files you're looking for when you call them. You can do this using Express.

The Node.js Web Server - server.js

var express = require('express);
var path = require('path');
var app = express();


// Setup View Engines
app.set('views', path.join(__dirname, 'views'));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

// Serve files from your "public" directory
app.use('/public', express.static(path.join(__dirname + 'public)));

// Serve files from your "bower_components" directory
app.use('/bower_components', express.static(path.join(__dirname + '/bower_components')));

// GET index.html route
app.get('/', function(req, res) {
  return res.render('index');
});

// Start our server and start to listen
app.listen(process.env.PORT || 3000, function() {
  console.log('listening');
});

Now all you need to do is node server.js and visit your site at localhost or wherever you've specified and you should be up and running.