This project contains a sample AngularJS application and is preconfigured to install the Angular Material framework and a bunch of dependenciesfor instant web development gratification. The seed code for the project was provided by the Angular Material starter project https://github.com/angular/material-start. That includes this very README.md file
This sample application is intended to be a shell to demonstrate a starter Angular Material project and how it can be used with ngRoute to create a modular project with html fragments which can be brought together using ngRoute but without exposing ugly URL links, but instead expose a side navigation bar (side nav). The contents of the side nav link to the different html fragments which are "loaded" into the main content area. I must emphasize shell because in particular, I leave out any code for authentication or form submission. The methods called when you click some of the buttons is nothing but a stub.
It also demonstrates the use angular-material's md-tabs
, md-input
, md-select
and md-button
You will need git to clone this repository. You can get git from http://git-scm.com/.
We also use a number of node.js tools to initialize and test this project. You must have node.js and its package manager npm installed. You can get them from http://nodejs.org/.
After you get node.js and npm, be sure to install bower. You can install bower as such
npm install bower
Go to the root of this project and execute bower install bower.json
which will install a number of files in
app/bower_components
Note that the bower_components
folder would normally be installed in the root folder but
the .bowerrc
file alters the directory to be app/bower_components
. Putting it in the app folder makes
it easier to serve the files by a webserver.
app/ --> all of the source files for the application
assets/app.css --> default stylesheet
src/ --> all app specific modules
users/ --> package for user features
index.html --> app layout file (the main html template file of the app)
karma.conf.js --> config file for running unit tests with Karma
e2e-tests/ --> end-to-end tests
protractor-conf.js --> Protractor config file
scenarios.js --> end-to-end scenarios to be run by Protractor
You can update the tool dependencies by running:
npm update
This will find the latest versions that match the version ranges specified in the package.json
file.
You can update the Angular dependencies by running:
bower update
This will find the latest versions that match the version ranges specified in the bower.json
file.
While angular is client-side-only technology and it's possible to create angular webapps that
don't require a backend server at all, we recommend serving the project files using a local
webserver during development to avoid issues with security restrictions (sandbox) in browsers. The
sandbox implementation varies between browsers, but quite often prevents things like cookies, xhr,
etc to function properly when an html page is opened via file://
scheme instead of http://
.
The angular-seed project comes preconfigured with a local development webserver. It is a node.js tool called http-server. You can install http-server globally:
sudo npm install -g http-server
Then you can start your own development web server to serve static files from a folder by running:
cd app
http-server -a localhost -p 8000
Alternatively, you can choose to configure your own webserver, such as apache or nginx. Just
configure your server to serve the files under the app/
directory.
For more information on AngularJS please check out http://angularjs.org/ For more information on Angular Material, check out https://material.angularjs.org/