19 posts tagged with "angular"

Overview:

I'm excited to announce the release of Angular Agent Kit - a collection of AI coding agent skills designed specifically for Angular developers. This toolkit extends the capabilities of AI coding assistants like GitHub Copilot, Claude Code, Cursor, and Gemini CLI with deep Angular expertise.

What is Angular Agent Kit?​

Angular Agent Kit is a collection of skills that follow the Agent Skills specification. These skills are packaged instructions and scripts that extend AI agent capabilities, enabling them to provide expert-level guidance on Angular development.

The Problem It Solves​

As Angular applications grow in complexity, maintaining performance becomes increasingly challenging. Developers often struggle with:

• Change detection optimization - Understanding when to use OnPush strategy
• Bundle size management - Identifying and eliminating bloat
• Template performance - Writing efficient templates that don't cause unnecessary re-renders
• RxJS patterns - Avoiding memory leaks and implementing efficient async operations

While AI coding assistants are powerful, they sometimes lack the specialized Angular knowledge needed to provide optimal recommendations. Angular Agent Kit bridges this gap.

Available Skills​

angular-best-practices​

The flagship skill contains 45+ rules across 8 categories, prioritized by their impact on application performance:

Installation​

Getting started is simple with a single command:

npx skills add sajeetharan/angular-agent-kit

Usage Examples​

Once installed, skills are automatically available. Simply ask your AI assistant:

Review my Angular component for performance issues

Help me optimize change detection in this component

Optimize this Angular template for better performance

The AI agent will automatically leverage the Angular best practices rules to provide expert-level recommendations.

Compatibility​

Angular Agent Kit works with all major AI coding tools:

• GitHub Copilot - Works seamlessly in VS Code
• Claude Code - Full support for Claude's coding assistant
• Cursor - Enhanced Angular development experience
• Gemini CLI - Google's AI coding assistant
• Any other Agent Skills-compatible tools

Skill Structure​

Each skill in the kit follows a consistent structure:

• SKILL.md - Instructions that trigger skill activation
• AGENTS.md - Compiled rules that agents read
• rules/ - Individual rule files for easy maintenance
• metadata.json - Version and metadata information

Why I Built This​

As someone who works extensively with Angular and AI development tools, I noticed a gap between generic AI coding assistance and Angular-specific expertise. The rules in this kit are distilled from years of Angular development experience, official Angular documentation, and community best practices.

Acknowledgments​

This project was inspired by:

• Vercel's React Best Practices
• The Agent Skills specification
• Angular team's official documentation

Contributing​

Contributions are welcome! If you have Angular best practices that should be included, or improvements to existing rules, please check out the CONTRIBUTING.md file for guidelines.

Get Started Today​

Ready to supercharge your Angular development with AI-powered best practices?

1. Install the skill: npx skills add sajeetharan/angular-agent-kit
2. Open your Angular project
3. Ask your AI assistant for Angular optimization help

Check out the GitHub repository for more details and to star the project if you find it useful!

Have questions or feedback? Feel free to open an issue on GitHub or reach out to me on Twitter!

Overview:

I'm thrilled to introduce Angular Visual Storybook - an interactive learning resource that transforms complex Angular concepts into easy-to-understand visual infographics. Whether you're a beginner starting your Angular journey or an experienced developer looking for quick reference guides, this comprehensive collection has something for everyone.

What is Angular Visual Storybook?​

Angular Visual Storybook is a static website that provides a comprehensive visual guide to Angular development through 26 beautifully designed infographics. It's built with pure HTML5, CSS3, and JavaScript - no frameworks required! The project is perfect for visual learners and developers who prefer a structured, comprehensive approach to learning Angular.

🔗 Live Demo: sajeetharan.github.io/angular-graphic

🌟 Features​

• 📚 26 Comprehensive Topics - From Angular Overview to AI Integration
• 🎨 Beautiful Design - Modern, responsive UI with smooth animations
• 🔒 Image Protection - Multiple layers of protection to prevent unauthorized downloading
• 📱 Mobile Friendly - Fully responsive design that works on all devices
• ♿ Accessible - WCAG-compliant with keyboard navigation support
• 🚀 Performance Optimized - Fast loading with intersection observers and lazy loading
• 🔍 Search Functionality - Quick search through topics in the sidebar
• 📊 Progress Tracking - Visual progress bar as you scroll through content

Topics Covered​

The storybook covers all major Angular topics from the official Angular documentation:

🛠️ Technologies Used​

What makes this project special is its simplicity:

• Pure HTML5, CSS3, and JavaScript - No frameworks required!
• CSS Grid & Flexbox for responsive layouts
• Intersection Observer API for scroll detection
• Modern ES6+ JavaScript features

Quick Start​

Want to run it locally? It's incredibly simple:

# Clone the repository
git clone https://github.com/sajeetharan/angular-graphic.git
cd angular-graphic

# Using Python
python -m http.server 8000

# Or using Node.js
npx http-server

# Then visit http://localhost:8000

🔒 Image Protection Features​

The website implements multiple layers of image protection:

1. Right-Click Prevention - Context menu disabled on images
2. Drag-and-Drop Blocking - Images cannot be dragged
3. Keyboard Shortcut Blocking - Common save shortcuts are intercepted
4. CSS Protection - User-select and drag properties disabled
5. Visual Feedback - Warning overlay when protection is triggered
6. Mobile Long-Press Protection - Touch events handled to prevent saving

Why I Built This​

Learning Angular can be overwhelming with its extensive documentation and numerous concepts. I wanted to create a resource that:

• Simplifies complex concepts through visual representation
• Provides quick reference for experienced developers
• Offers an engaging learning experience for beginners
• Works offline once loaded - perfect for on-the-go learning

🎨 Customization​

The project is highly customizable. You can easily modify colors by editing CSS variables:

:root {
  --primary-color: #dd0031; /* Angular red */
  --secondary-color: #c3002f; /* Darker red */
  --accent-color: #0066ff; /* Blue accent */
}

Contributing​

Contributions are welcome! If you have ideas for new infographics or improvements:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes
4. Push to the branch
5. Open a Pull Request

🙏 Acknowledgments​

• Content structure inspired by angular.dev
• Infographics created for educational purposes
• Built with ❤️ for the Angular community

Get Started Today​

Ready to learn Angular visually?

• 🌐 Visit the live site: sajeetharan.github.io/angular-graphic
• 📦 Clone the repo: github.com/sajeetharan/angular-graphic

Have feedback or suggestions? Feel free to open an issue on GitHub or reach out to me on Twitter!

Microsoft introduced App Service Static Web Apps in Preview at Build 2020 as"Azure static web apps", a service which allows web developers to build and deploy website to any environment from Github repository for free. Developers can deploy applications in minute while taking the advantage of scaling and cost savings offered by azure functions as backend. One of the frequent questions that i heard from the developers was the availability of Azure Devops support with Azure static web apps.

I have already published an article which demonstrates how to deploy to Azure Static Web Apps using GithubActions. Azure static web apps team announced the public preview of Azure Devops with Azure static web apps yesterday.

In this post you I will walk you through on how to deploy an angular application to Azure static web apps using Azure Devops.

PreRequisites:​

• An Azure account (you can use free trial, If you don't have one, you can create an account for free)
• Azure DevOps  (If you need help getting started, see Create one)

Step 1 : Create a Devops repository​

Navigate to Dev.Azure.com and create a new Devops Repository as below

Step 2 : Import your static web application to Azure Devops repository​

https://github.com/microsoft/static-web-apps-gallery-code-samplesNext step is to import the web application from any source control to your newly created Azure Devops repository. In this case i am importing the same "Meme generator" app which was made of Angular. Meme4Fun is an app to create custom programming memes from a picture and it also identifies features of people in the image which is available as part of code samples for Azure static web apps.

Step 3 : Create a static web app on Azure​

Next step is to create the static web application on azure, navigate to azure portal and create a new resource by searching for Static Web apps, and create it.

Note : Since I am going to leverage Azure Devops as the deployment method, select Other as the option.

Once the deployment is successful, navigate to the new Static Web Apps resource and select Manage deployment token.

Step 4: Create the Pipeline task in Azure Devops​

If you are using Azure Devops to deploy applications in the past, you will need to have the pipeline in plact to deploy to particular resource. In this case, lets create a build pipeline to deploy the angular application.

Next step is to select the template, since we are deploying an angular application, you can select the template as angular with nodejs

Also for static web apps it is important to include the following step in the yaml which has the app_location, api_location, and output_location , you need to pass those values if you have those details if not keep it empty.

and the final configure YAML will look similar to the below,

# Node.js with Angular
# Build a Node.js project that uses Angular.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript
trigger:
- master
pool:
  vmImage: ubuntu-latest
steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'
- script: |
    npm install -g @angular/cli
    npm install
    ng build --prod
  displayName: 'npm install and build'
- task: AzureStaticWebApp@0
  inputs:
      app_location: "/" 
      api_location: "api"
      output_location: "dist/meme4fun"
  env:
      azure_static_web_apps_api_token: $(deployment_token)

Next step is to provide the The **azure_static_web_apps_api_token** value is self managed and is manually configured. Select Variables in the pipeline and create a new variable named as "deployment_token"(matching the name in the workflow) below.

Make sure to check "Keep the value secret" and save the workflow and run.

With that step Azure Devops will execute the pipeline and deploy the application to azure static web apps.

Now you can access the application from the static static web app from the URL.

If you had any trouble in executing the above steps, you can watch the same tutorial published as a video here.

It's great to see that with few steps of configuration, i was able to deploy the application with Azure Devops. If you have enabled backend support with the azure functions, it can be deployed as well. Support with Azure Devops has been one of the most requested features by developers and great to see it in live now. It's your chance to explore various application deployments with different frameworks, hope this is useful. Cheers!

One of the highlight among the announcements made at Microsoft Build 2020 was announcement of the new Azure service in the keynote which is Azure App Static Web Apps. Azure Static Web Apps is a service that automatically builds and deploys full stack web apps to Azure from a GitHub repository. This service allow web developers to publish websites to a production environment by building apps from a GitHub repository for free. Developers can use modular and extensible patterns to deploy apps in minutes while taking advantage of the built-in scaling and cost-savings offered by serverless technologies.

It provides the killer features for developers such as:

• Free web hosting for static content like HTML, CSS, JavaScript, and images.
• Integrated API support provided by Azure Functions as backend APIS
• First-party GitHub integration where repository changes trigger builds and deployments with Github Actions
• Globally distributed static content, putting content closer to your users.
• Free SSL certificates, which are automatically renewed.
• Custom domains* to provide branded customizations to your app.
• Seamless security model with a reverse-proxy when calling APIs, which requires no CORS configuration.
• Authentication provider integrations with Azure Active Directory, Facebook, Google, GitHub, and Twitter.
• Customizable authorization role definition and assignments.
• Back-end routing rules enabling full control over the content and routes you serve.
• Generated staging versions powered by pull requests enabling preview versions of your site before publishing.

How i deployed Meme-Generator App:​

I was building this meme generator app for an angular session today with Azure cognitive service to detect persons in the image and also to generate a meme by adding a text as the user wanted. As soon as Azure static web apps was announced I wanted to check it out with this application on how easy it is to deploy. Experience was seamless and easy to deploy and generate a url in few seconds.

Let me explain, how i achieved this in quick time.

Step 1. Sign-in to the Azure Portal, Search for “Static Web Apps”, and click the Create button

Visit https://portal.azure.com, sign-in, and use the search box at the top to locate the Static Web Apps service (note that it’s currently in “preview”). click the Create button to get started.

In this step you’ll fill out the Static Web Apps form and sign-in to your Github account to select your repository.

• Select your Azure subscription.
• Create a Resource Group
• Name your app , in my case its meme4fun
• Select a region (as of now its not available in all regions)
• Sign-in to Github and select your org, repo, and branch. 

Once you’re done filling out the form click the Next: Build > button.

Step 2: Define Angular App location, API, and Build Output​

The next step is to define the path where my app is located in the repository, and i did not have any azure function integrated and i will keep it as empty, and the directory where my build artifacts (your bundles) are located(i.e dist/meme-4-fun). After entering that information click the Review + create button.

Step 3:  Click the Create and Look for the Magic !​

Once you are good with everything you can go ahead and click the create button and you will see the application successfully gets deployed and end point generated to access it public.

Once the deployment is done, if you go the resource and click on overview you will see a configuration as follows,

It has the urls of the Github Actions and as well as Github source code and also the url of the application deployed. If you’d like to see the build in action on Github, click the Workflow file above.

You can access the meme generator application and create your own memes from https://lively-forest-0fd67f010.azurestaticapps.net/

Here are some great links you can visit to learn more. 

• Static Web Apps docs: 
  https://aka.ms/swadocs  
• Static Web Apps Learn modules (Angular, React, Svelte, or Vue JavaScript app and API): 
  https://aka.ms/swaframeworks  
• Static web app with the Gatsby static site generator: 
  https://aka.ms/staticsitegen  
• Blog post: 
  https://aka.ms/swapreview  

The above app is also available in the Microsoft's sample static web app Gallery.

If you're a web developer you definitely need to check out this cool service for sure. Cheers!

One of the highlight among the announcements made at Microsoft Build 2020 was announcement of the new Azure service in the keynote: Azure App Static Web Apps. Azure Static Web Apps is a service that automatically builds and deploys full stack web apps to Azure from a GitHub repository. This service allow web developers to publish websites to a production environment by building apps from a GitHub repository for free. developers can use modular and extensible patterns to deploy apps in minutes while taking advantage of the built-in scaling and cost-savings offered by serverless technologies.

It provides the killer features for developers such as:

• Free web hosting for static content like HTML, CSS, JavaScript, and images.
• Integrated API support provided by Azure Functions as backend APIS
• First-party GitHub integration where repository changes trigger builds and deployments with Github Actions
• Globally distributed static content, putting content closer to your users.
• Free SSL certificates, which are automatically renewed.
• Custom domains* to provide branded customizations to your app.
• Seamless security model with a reverse-proxy when calling APIs, which requires no CORS configuration.
• Authentication provider integrations with Azure Active Directory, Facebook, Google, GitHub, and Twitter.
• Customizable authorization role definition and assignments.
• Back-end routing rules enabling full control over the content and routes you serve.
• Generated staging versions powered by pull requests enabling preview versions of your site before publishing.

How i deployed Meme-Generator App:​

I was building this meme generator app for an angular session today with Azure cognitive service to detect persons in the image and also to generate a meme by adding a text as the user wanted. As soon as Azure static web apps was announced I wanted to check it out with this application on how easy it is to deploy. Experience was seamless and easy to deploy and generate a url in few seconds.

Let me explain, how i achieved this in quick time.

Step 1. Sign-in to the Azure Portal, Search for “Static Web Apps”, and click the Create button

Visit https://portal.azure.com, sign-in, and use the search box at the top to locate the Static Web Apps service (note that it’s currently in “preview”). click the Create button to get started.

In this step you’ll fill out the Static Web Apps form and sign-in to your Github account to select your repository.

• Select your Azure subscription.
• Create a Resource Group
• Name your app , in my case its meme4fun
• Select a region (as of now its not available in all regions)
• Sign-in to Github and select your org, repo, and branch. 

Once you’re done filling out the form click the Next: Build > button.

Step 2: Define Angular App location, API, and Build Output​

The next step is to define the path where my app is located in the repository, and i did not have any azure function integrated and i will keep it as empty, and the directory where my build artifacts (your bundles) are located(i.e dist/meme-4-fun). After entering that information click the Review + create button.

Step 3:  Click the Create and Look for the Magic !​

Once you are good with everything you can go ahead and click the create button and you will see the application successfully gets deployed and end point generated to access it public.

Once the deployment is done, if you go the resource and click on overview you will see a configuration as follows,

It has the urls of the Github Actions and as well as Github source code and also the url of the application deployed. If you’d like to see the build in action on Github, click the Workflow file above.

You can access the meme generator application and create your own memes from https://lively-forest-0fd67f010.azurestaticapps.net/

Here are some great links you can visit to learn more. 

• Static Web Apps docs: 
  https://aka.ms/swadocs  
• Static Web Apps Learn modules (Angular, React, Svelte, or Vue JavaScript app and API): 
  https://aka.ms/swaframeworks  
• Static web app with the Gatsby static site generator: 
  https://aka.ms/staticsitegen  
• Blog post: 
  https://aka.ms/swapreview  

The above app is also available in the Microsoft's sample static web app Gallery.

If you're a web dev you need to check out this cool service for sure. Cheers!