AngularJS
Development Workflow
Code
Scaffolding
├── app │ ├── 404.html │ ├── favicon.ico │ ├── images │ ├── index.html │ ├── robots.txt │ ├── scripts │ │ ├── app.js │ │ └── controllers │ │ └── main.js │ ├── styles │ │ └── main.scss │ └── views │ └── main.html └── test │ ├── runner.html │ └── spec │ └── controllers │ └── main.js ├── bower.json ├── Gruntfile.js ├── karma.conf.js ├── karma-e2e.conf.js ├── package.json
- yo angular:controller
- yo angular:filter
- yo angular:directive
- yo angular:service
- yo angular:factory
- yo angular:provider
- yo angular:decorator
- yo angular:route
- yo angular:view
- yo angular:constant
- yo angular:value
Task
Automatization
grunt-ngmin
Coverts
angular.module('MyApp').controller('HomeCtrl', function ($scope) {// Home Controller Logic});
Into
angular.module('MyApp').controller('HomeCtrl', ['$scope', function ($scope) {// Home Controller Logic}]);
grunt-angular-templates
Converts
<!-- templates/home.html --><section><p>Hello {{ user }}</p></section>
Into
angular.module('MyApp').run(function ($templateCahce) {$templateCache.put('templates/home.html','<section><p>Hello {{ user }}</p></section>');});
grunt-ngdocs
Parse the in-code documentation of your project and generates an AngularJS-like documentation page.
Documentation
Documenting as
the Angular Team
/**
* @ngdoc directive
* @name MyAppApp.directive:preventDefault
* @element a
* @restrict AE
* @function
*
* @description This directive prevents the default on links click
*
<doc:example module="MyAppApp">
<doc:source>
<p>
<a prevent-default href="/casa">Click me</a>
</p>
</doc:source>
</doc:example>
*/Use the source Luke!
Debugging
Angular is very hard
to debug from the browser
because its very private API
scope = angular.element($0).scope();