https://github.com/mislam/angular-seed
Angular RequireJS Boilerplate
https://github.com/mislam/angular-seed
Last synced: 8 months ago
JSON representation
Angular RequireJS Boilerplate
- Host: GitHub
- URL: https://github.com/mislam/angular-seed
- Owner: mislam
- License: mit
- Created: 2013-08-11T17:55:06.000Z (almost 13 years ago)
- Default Branch: master
- Last Pushed: 2013-08-24T06:26:31.000Z (almost 13 years ago)
- Last Synced: 2024-04-15T09:17:50.424Z (about 2 years ago)
- Language: JavaScript
- Homepage:
- Size: 97.7 KB
- Stars: 66
- Watchers: 2
- Forks: 28
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Angular + RequireJS Boilerplate
===============================
This project is an application skeleton for an ideal AngularJS web app. You can use it with a minimal configuration to easily bootstrap your angular projects.
The seed contains the AngularJS and RequireJS libraries, and a clean directory structure for your app. Just clone the repo (or download the zip/tarball), start up a web server and you are ready to develop with a minimum effort.
The sample app in this seed doesn't do much, just shows how to hook up couple of controllers and views together. You can check it out by opening index.html in your browser (using a local web server of course!)
Directory Structure
-------------------
The directory structure is flexible. It doesn't have to be in the following structure. You can always change it from `config.js`.
root
|
├── js
| |
| ├── app
| | |
| | ├── controllers
| | ├── directives
| | ├── filters
| | ├── services
| | ├── views
| | |
| | ├── config.js
| | └── main.js
| |
| └── lib
| |
| ├── angular.js
| ├── ng-app.js
| └── require.js
|
└── index.html
Configuration
-------------
* Step 1 - For each application, copy the `app` directory and place it where you like.
* Step 2 - Rename the directory.
* Step 3 - Open up `config.js`, and modify it to match your app configuration:
````javascript
define({
appName: 'YourAppName',
appDir: '/js/app',
libDir: '/js/lib',
routes: {
'/path' : 'subdir/Controller1',
'/path/with/:id' : 'subdir/Controller2',
'/more/path' : 'Controller3'
},
defaultRedirect: '/path'
});
````
Notice that, the controllers and views can be organized by placing them under sub-directories. But it still works, if you wish to place them directly under the `controllers` and `views` directories.
Seed Project : PhoneBook App
----------------------------
The PhoneBook example project included in this seed has two controllers (`Contact` and `ContactDetail`) and one service (`contactService`). The purpose is simply retrieving data from a model and populate the view accordingly.
Inspired by
-----------
- [Dynamically Loading Controllers and Views with AngularJS and RequireJS](http://weblogs.asp.net/dwahlin/archive/2013/05/22/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs.aspx)
- [Angular RequireJS Seed](https://github.com/tnajdek/angular-requirejs-seed)