DOCSEARCHbyAlgolia
Submit Docs

AngularJS

repository·master·Indexed 13 days ago

https://github.com/angular/angular.js

A JavaScript-based framework for building client-side web applications using an MV* architecture. It features two-way data binding, dependency injection, and directives to simplify complex UI logic. Note: Official support for AngularJS ended in January 2022.

Tokens
4.5K
Snippets
9
Records
23
Agent score
98%

What's inside AngularJS

  1. Coding rules and patterns for AngularJS contributors

    master

    To maintain consistency, follow these rules:

    General Style

    • Testing: All features or bug fixes must be accompanied by specs.
    • Documentation: All public API methods must be documented using ngdoc.
    • Formatting: Follow Google's JavaScript Style Guide, but wrap code at 100 characters and do not use namespaces (use anonymous closures and explicit exports instead).
    • Complexity: Prefer simple objects and functions/closures over complex inheritance hierarchies.
    • Minification: Use internal aliases that map to the external API to improve minification efficiency.

    Provider Configuration Pattern

    When adding options to a provider, follow this pattern:

    • Getters/Setters: Methods should work as a getter (returns current value when called without arguments) and a setter (returns this for chaining when called with an argument).
    • Booleans: Use the <option>Enabled([enabled]) naming scheme.
    • Immutability: For non-primitive options (like objects), copy properties to a new object so the configuration cannot be mutated at runtime.

    Error Handling

    User-facing errors should be thrown using the minErr function. This provides error IDs, templated messages, and links to detailed descriptions.

  2. Calculate user pain score for work assignment

    master

    The AngularJS team assigns work weekly based on a 'user pain' score. The score is calculated using the following formula:

    pain = severity × frequency

    Severity Values

    • security issue: 6
    • regression: 5
    • memory leak: 4
    • broken expected use: 3
    • confusing: 2
    • inconvenience: 1

    Frequency Values

    • low: 1
    • moderate: 2
    • high: 3

    Note: Security issues, regressions, and memory leaks should almost always be labeled with frequency: high.

  3. Understand the Firebase architecture for code.angularjs.org

    master

    The code.angularjs.org infrastructure uses Google Firebase to serve documentation. The setup relies on two main components:

    1. Routing: firebase.json defines rewrite rules that route all subdirectory requests to a specific Cloud Function located in functions/index.js. This function is responsible for serving documentation files stored in a Firebase Google Cloud Storage bucket.
    2. Automated Cleanup: The Cloud Function in functions/index.js includes logic to automatically delete outdated build zip files from the snapshot and snapshot-stable folders whenever new zip files are uploaded.

  4. Understand the core concepts of AngularJS

    master

    AngularJS is a JavaScript framework designed to simplify client-side web application development using an MV* (Model-View-Whatever) architecture. Key concepts include:

    • Two-way Data Binding: Automatically synchronizes data between the Model (JavaScript objects) and the View (HTML). Changes in the UI update the model, and changes in the model update the UI instantaneously via 'scopes'.
    • Directives: Allows you to extend HTML syntax by creating new HTML tags or attributes, making the UI declarative and reusable (DRY principle).
    • Dependency Injection (DI): A core mechanism where the framework provides necessary dependencies (like services or controllers) to components automatically. This promotes modularity and makes the application highly testable using mocks.
    • Declarative Wiring: Instead of orchestrating program flow manually, you use special HTML attributes to define 'what' components or controllers should be loaded, leaving the 'how' to AngularJS.

  5. Continuous integration and deployment for code.angularjs.org

    master

    Deployment for the code.angularjs.org site is fully automated via Continuous Integration (CI). The system automatically deploys code to:

    • Google Firebase Hosting
    • Google Firebase Functions
    • Google Cloud Storage buckets

    For the full deployment configuration, build steps, and orchestration details, refer to the .circleci/config.yml file.

  7. Serve docs.angularjs.org locally

    master

    To preview the documentation site locally using Firebase emulators, follow these steps to build the assets and start the local server:

    1. Navigate to the Firebase directory: cd scripts/docs.angularjs.org-firebase
    2. Build the deployment files: yarn grunt package
    3. Prepare the deployment directory and content partials: yarn grunt prepareDeploy
    4. Start the Firebase emulators: $(yarn bin)/firebase emulators:start (or ..\..\node_modules\.bin\firebase emulators:start on Windows)

    The site will be available at http://localhost:5000.

    cd scripts/docs.angularjs.org-firebase
yarn grunt package
yarn grunt prepareDeploy
$(yarn bin)/firebase emulators:start

  8. Run AngularJS unit tests

    master

    AngularJS uses Jasmine for testing and Karma for execution.

    Standard Execution

    Run all tests once in Chrome:

    yarn grunt test:unit

    To specify multiple browsers, use the --browsers flag. Important: Do not include spaces between browser names (e.g., Chrome,Firefox is valid; Chrome, Firefox is invalid).

    yarn grunt test:unit --browsers=Chrome,Firefox

    Cloud Testing (Browserstack/Saucelabs)

    If configured, you can run tests on cloud services using pre-defined launchers:

    # Browserstack
yarn grunt test:unit --browsers=BS_Chrome,BS_Firefox,BS_Safari

# Saucelabs
yarn grunt test:unit --browsers=SL_Chrome,SL_Firefox,SL_Safari

    Continuous Testing (Autotest)

    For productive development, run tests continuously. The server will watch for changes in source or test files and re-run automatically:

    1. Start the Karma server: yarn grunt autotest.
    2. Open the Karma URL (found in the console output, typically http://localhost:9876/) in your browser to capture more instances.
    yarn grunt test:unit

# Example with multiple browsers (no spaces!)
yarn grunt test:unit --browsers=Chrome,Firefox

# Continuous testing mode
yarn grunt autotest

  10. Triage issues and pull requests on GitHub

    master

    The AngularJS team uses a specific triage process to minimize user pain and prioritize work. When triaging, follow these steps:

    1. Identify and Assign: Pick an unassigned issue from the non-triaged list and assign it to yourself.
    2. Verify Clarity and Uniqueness: Ensure the description is understandable and not a duplicate. If it is unclear or a duplicate, close it following the 'Closing an Issue or PR' guidelines.
    3. Categorize Type:
      • For bugs: Label Type: Bug. Verify if it is reproducible on the master snapshot.
      • For non-bugs: Label Type: Feature, Type: Chore, or Type: Perf. Determine if it belongs in core or should be a third-party module.
    4. Apply Metadata Labels:
      • Browser: browser: * (if it only affects a specific browser).
      • Frequency: frequency: low, frequency: moderate, or frequency: high.
      • Severity: severity: security issue, severity: regression, severity: memory leak, severity: broken expected use, severity: confusing, or severity: inconvenience.
      • Component: component: *.
      • Origin: origin: google (for issues from Google).
    5. Identify Community Opportunities: Label PRs plz! for issues suitable for community contributions. You must then leave a comment explaining the problem/solution, assign it to yourself, and mentor contributors.
    6. Assign Milestone: Use Backlog by default, or a specific version milestone (e.g., 1.3.0-beta-2) for regressions and urgent bugs.
    7. Unassign: Remove yourself from the issue once triaged.

  11. Build and view AngularJS documentation locally

    master

    AngularJS documentation is generated from inline source code using ngdoc and Dgeni. To build the documentation from scratch, use grunt. Note that the documentation app relies on local build files, so you may need to run the main project build first.

    1. Build the main project: yarn grunt build (required if making changes to minErrors).
    2. Build the documentation: yarn grunt docs.
    yarn grunt build
yarn grunt docs

  12. Run a local development web server

    master

    Use the built-in Node.js-based web server to debug code, run end-to-end tests, or serve the documentation locally.

    1. Start the server using Grunt.
    2. Access the project directory at http://localhost:8000/.
    3. Access the locally served documentation at http://localhost:8000/build/docs/.
    yarn grunt webserver