This project is an application skeleton for a typical AngularJS web app. You can use it to quickly bootstrap your angular webapp projects and dev environment for these projects.
The seed contains a sample AngularJS application and is preconfigured to install the Angular framework and a bunch of development and testing tools for instant web development gratification.
The seed app doesn't do much, just shows how to wire two controllers and views together.
To get you started you can simply clone the estagio-angular
repository and install the dependencies:
You need git to clone the estagio-angular
repository.
We also use a number of Node.js tools to initialize and test estagio-angular
. You must have Node.js
and its package manager (npm) installed. You can get them from here.
Clone the estagio-angular
repository using git:
git clone https://github.com/ZaguDev/estagio-angular
cd estagio-angular
We have two kinds of dependencies in this project: tools and Angular framework code. The tools help us manage and test the application.
- We get the tools we depend upon via
npm
, the Node package manager. - We get the Angular code via
bower
, a client-side code package manager.
We have preconfigured npm
to automatically run bower
so we can simply do:
npm install
Behind the scenes this will also call bower install
. After that, you should find out that you have
two new folders in your project.
node_modules
- contains the npm packages for the tools we needapp/bower_components
- contains the Angular framework files
Note that the bower_components
folder would normally be installed in the root folder but
ZaguAngularEstagio
changes this location through the .bowerrc
file. Putting it in the app
folder
makes it easier to serve the files by a web server.
We have preconfigured the project with a simple development web server. The simplest way to start this server is:
npm start
Now browse to the app at localhost:8000/index.html
.
app/ --> all of the source files for the application
app.css --> default stylesheet
components/ --> all app specific modules
view1/ --> the view1 view template and logic
view1.html --> the partial template
view1.js --> the controller logic
view2/ --> the view2 view template and logic
view2.html --> the partial template
view2.js --> the controller logic
app.js --> main application module
index.html --> app layout file (the main html template file of the app)
For more information on AngularJS please check out angularjs.org.