angularjs

00 intro.md

AngularJS is an open-source web application framework, maintained by Google and community, that assists with creating single-page applications, one-page web applications that only require HTML, CSS, and JavaScript on the client side. Its goal is to augment web applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

1, 2, 3

# create project
yo angular
# install dependecny
npm install
# run server
grunt serve
# browser website
browser 127.0.0.1:9000

Next Steps

Fell free to skip these steps. They are not big deals.

bower install font-awesome --save
bower install angular-bootstrap --save

Install

• GitHub, (2014). yeoman/generator-angular. [online] Available at: https://github.com/yeoman/generator-angular [Accessed 25 Jun. 2014].

sudo npm install -g yeoman-generator
yo angular

Folder Structures

• Stackoverflow (2014). AngularJS Folder Structure - Stack Overflow. [online] Stackoverflow.com. Available at: http://stackoverflow.com/questions/18542353/angularjs-folder-structure [Accessed 25 Jun. 2014].

Routes, Forms, Services, Views

Plugin

Chart

https://github.com/cmaurer/angularjs-nvd3-directives

01 workflow.md

Workflow

Before starting AngularJS, make sure you've already had <mockup> and <api description>

Task	Time
Make view	3 minutes
Make controller	5 minutes
Make service	5 minutes

controller.md

Controllers

Generates a controller in app/scripts/controllers.

Example:

yo angular:controller user

Produces app/scripts/controllers/user.js:

angular.module('myMod').controller('UserCtrl', function ($scope) {
  // ...
});

References

• GitHub, (2014). yeoman/generator-angular. [online] Available at: https://github.com/yeoman/generator-angular#controller [Accessed 25 Aug. 2014].

form.md

Form Validation

Requires

• Boostrap ~3.2.0

index.html

<!-- NAME -->
<div class="form-group"
  ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
  <label>Name</label>
  <input type="text" name="name" class="form-control" ng-model="user.name" required>
  <span class="glyphicon glyphicon-remove form-control-feedback"
    ng-show="newScanForm.url.$invalid && !newScanForm.url.$pristine"></span>
  <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">
    You name is required.
  </p>
</div>

References

• Docs.angularjs.org, (2014). AngularJS. [online] Available at: https://docs.angularjs.org/guide/forms [Accessed 25 Aug. 2014].
• Sevilleja, C. (2014). AngularJS Form Validation. [online] Scotch. Available at: http://scotch.io/tutorials/javascript/angularjs-form-validation [Accessed 25 Aug. 2014].