Bricks Demo Angularjs Laravel Package

Getting Started

First Steps

1. Clone & Install

   git clone https://github.com/20steps/bricks-demo-angularjs.git
   cd bricks-demo-angularjs
   npm install
   bower install  # If using Bower (legacy)
   

2. Basic Setup

   • The package is a collection of AngularJS modules, services, and directives designed for modularity.
   • Start by importing the main module (bricksDemo) in your Angular app:

     angular.module('myApp', ['bricksDemo']);
     

3. First Use Case: Using a Directive

   • Example: If bricksDemo includes a bricksButton directive, use it in HTML:

     <bricks-button text="Click Me" on-click="handleClick()"></bricks-button>
     

   • Check the demo/ folder for example implementations.

Implementation Patterns

Modular Architecture

• Component-Based Design: The package follows AngularJS’s modular pattern. Each feature (e.g., a service, directive, or filter) is encapsulated in its own file under src/.
• Dependency Injection: Services are registered and injected like standard AngularJS services. Example:

  angular.module('bricksDemo').service('DataService', function($http) {
      this.fetchData = function() { return $http.get('/api/data'); };
  });
  

Workflow Integration

1. Extending Existing Modules

   • Override or extend directives/services by redefining them in your app:

     angular.module('myApp').directive('bricksButton', function() {
         return {
             restrict: 'E',
             template: '<button>{{text}}</button>',
             link: function(scope, elem, attrs) {
                 elem.on('click', scope.$eval(attrs.onClick));
             }
         };
     });
     

2. Customizing Templates

   • Use templateUrl to override default templates:

     .directive('bricksCard', function() {
         return {
             templateUrl: 'path/to/custom-card.html'
         };
     });
     

3. State Management (UI-Router)

   • If the package uses ui-router, integrate it with your app’s routing:

     angular.module('myApp').config(function($stateProvider) {
         $stateProvider.state('dashboard', {
             url: '/dashboard',
             templateUrl: 'dashboard.html',
             controller: 'DashboardCtrl'
         });
     });
     

Testing

• The package likely includes Karma/Jasmine tests (check test/ folder).
• Write unit tests for custom extensions:

  describe('Custom Bricks Directive', function() {
      beforeEach(module('myApp'));
      it('should render correctly', inject(function($compile, $rootScope) {
          var element = $compile('<bricks-button text="Test"></bricks-button>')($rootScope);
          $rootScope.$digest();
          expect(element.html()).toContain('Test');
      }));
  });
  

Gotchas and Tips

Pitfalls

1. AngularJS vs. Angular

   • This is AngularJS 1.x, not Angular 2+. Avoid mixing with Angular components.
   • If migrating to Angular, rewrite directives/services using @Component, @Injectable, etc.

2. Bower Dependency

   • The package may rely on Bower (legacy). If using npm, ensure compatibility:

     npm install --save bower-angularjs
     

3. Scope Issues

   • Directives using scope: {} may break if parent scopes change. Prefer bindToController (Angular 1.3+) or isolate scopes carefully.

4. Missing Documentation

   • With 0 stars, assume minimal docs. Inspect:
     • src/ for source code.
     • demo/ for usage examples.
     • README.md for high-level notes.

Debugging Tips

• Console Logs: Add debug logs in services/directives:

  angular.module('bricksDemo').service('Logger', function() {
      this.log = function(msg) { console.log('[Bricks] ' + msg); };
  });
  

• Browser DevTools: Use AngularJS Batarang (Chrome extension) to inspect scopes, directives, and services.
• Error Handling: Wrap $http calls in .catch():

  DataService.fetchData().catch(function(err) {
      console.error('API Error:', err);
  });
  

Extension Points

1. Custom Directives

   • Extend existing directives by adding new attributes or behaviors:

     .directive('bricksButton', function() {
         return {
             restrict: 'E',
             scope: {
                 text: '@',
                 onClick: '&',
                 customAction: '&?'  // Optional
             }
         };
     });
     

2. Service Overrides

   • Replace services entirely or add methods:

     angular.module('myApp').value('Config', {
         apiUrl: 'https://my-api.com',
         timeout: 10000
     });
     

3. CSS Overrides

   • Use !important sparingly. Prefer BEM-style classes:

     .bricks-button {
         --custom-color: #ff0000;
     }
     .bricks-button__custom {
         color: var(--custom-color);
     }
     

4. Performance

   • For large apps, lazy-load bricks modules:

     angular.module('myApp').config(function($ocLazyLoadProvider) {
         $ocLazyLoadProvider.config({ debug: true });
     });