modular angular js
TRANSCRIPT
DATA-BINDING JQUERY EXAMPLE
$('#inputname').on('change', function() $('#greetingname').text(this.value); );
DATA-BINDING EXAMPLE
<div ngapp> <label>Name:</label> <input type="text" ngmodel="yourName"> <hr> <h1>Hello yourName!</h1> </div>
DEPENDENCY INJECTION EXAMPLE<div ngapp="app" ngcontroller="GreetingController"> <form ngsubmit="greet()"> <input type="text" ngmodel="name"> <button type="submit">Greet</button> </form> </div>
angular.module('app', []) .controller('GreetingController', function($scope) $scope.name = 'John Doe'; $scope.greet = function() alert('Hello ' + $scope.name); ; );
NON-SEMANTIC TAB COMPONENT<div id="tab"> <ul class="tabhead"> <li><a href="#content1">Title 1</a></li> <li><a href="#content2">Title 2</a></li> <li><a href="#content3">Title 3</a></li> </ul> <div id="content1" class="tabcontent"> <p>Content 1 goes here</p> </div> <div id="content2" class="tabcontent"> <p>Content 2 goes here</p> </div> <div id="content3" class="tabcontent"> <p>Content 3 goes here</p> </div> </div>
$('#tab').tab();
SEMANTIC TAB COMPONENT<tabset> <tab heading="Title 1"> <p>Content 1 goes here</p> </tab> <tab heading="Title 2"> <p>Content 2 goes here</p> </tab> <tab heading="Title 3"> <p>Content 3 goes here</p> </tab> </tabset>
STRUCTURE| js/ | | controllers.js | | directives.js | | services.js | | app.js | index.html
index.html
... <div ngcontroller="TodoController"> <span>remaining() of tasks.length remaining</span> [ <a href="" ngclick="archive()">archive</a> ] <ul> <li ngrepeat="task in tasks"> <input type="checkbox" ngmodel="task.done"> <span class="donetask.done">task.text</span> </li> </ul> <form ngsubmit="addTask()"> <input type="text" ngmodel="taskText"> <input type="submit" value="add"> </form> </div> ...
app.js
angular.module('app', ['app.controllers']);
controllers.js
angular.module('app.controllers') .controller('TodoController', ['$scope', function($scope) $scope.tasks = []; $scope.addTask = function() // ... ; $scope.remaining = function() // ... ; $scope.archive = function() // ... ; ]) .controller('OtherController', ['$scope', function($scope) // ... ]);
NEVERSEPARATE FILES IN FOLDER BY THEIR TYPE
| js/ | | controllers.js | | directives.js | | services.js | | app.js | index.html
ALWAYSSEPARATE FILES IN THEIR COMPONENT NAME FOLDER
| src/ | | todo/ | | | todo.html | | | todo.module.js | | | todo.config.js | | | todo.controller.js| | | todo.controller.spec.js | | tasks/ | | | tasks.module.js | | | tasks.service.js | | | tasks.service.spec.js | | | tasks.directive.js| | | tasks.directive.spec.js | | app.module.js | | index.html
NEVERSEPARATE MODULES BY THEIR TYPE
controllers.js
angular.module('app.controllers') .controller('TodoController', ['$scope', function($scope) $scope.tasks = []; $scope.addTask = function() // ... ; $scope.remaining = function() // ... ; $scope.archive = function() // ... ; ]) .controller('OtherController', ['$scope', function($scope) // ... ]);
ALWAYSSEPARATE MODULES BY THEIR COMPONENT NAME
todo/todo.controller.js
angular.module('todo') .controller('TodoController', ['$scope', function($scope) $scope.tasks = []; $scope.addTask = function() // ... ; $scope.remaining = function() // ... ; $scope.archive = function() // ... ; ]);
app.module.js
angular.module('app', [ 'todo' ]);
NEVERLET CONTROLLERS DO A LOT OF OTHER THINGS
(LIKE PERSIST)
controllers.js
angular.module('app.controllers') .controller('TodoController', ['$scope', function($scope) $scope.tasks = []; $scope.addTask = function() // ... ; $scope.remaining = function() // ... ; $scope.archive = function() // ... ; ]) ...
todo/todo.controller.js
angular.module('todo') .controller('TodoController', ['$scope', 'Tasks', function($scope) $scope.tasks = Tasks.get(); $scope.addTask = function() Tasks.add(); ; $scope.remaining = function() Tasks.count(); ; $scope.archive = function() Tasks.archive(); ; ]);
tasks/tasks.service.js
angular.module('tasks') .factory('Tasks', ['$http', function($http) return get: function() $http.get(); , add: function() $http.post(); , count: function() $http.get().length; , archive: function() $http.put(); ; ]);
HOW TO USE A COMPONENT?Download or Install the component
bower install save angularmaterial
Load the component files
<link href="angularmaterial.min.css" rel="stylesheet"> <script src="angularmaterial.min.js">
Set as a module dependency
angular.module('app', [ 'ngMaterial' ]);
THANK YOU
github.com/dhyegofernando
twitter.com/dhyegofernando
SLIDESbit.ly/1F3KyH2