CraftCamp for Students - Introduction to AngularJS

Aug 6, 20150 likes519 views

AngularJS is a client-side JavaScript MVC framework that extends HTML with new attributes and custom tags. It allows developers to create reusable components with modularity, dependency injection, two-way data binding, and testing. Key concepts include expressions, filters, directives, models, modules, controllers, services, and templates. Modules allow building reusable components like controllers, services, filters and directives. Controllers set up initial scope state and behavior while services extract reusable code and enable communication between controllers. Two-way data binding synchronizes models and views.

Gunther Laurijssens
Consultant
@laurigun

Agenda
●  What is AngularJS?
●  Why use AngularJS?
●  Concepts + demos
●  Tips

What is angular?
●  AngularJS IS NOT
- a Library
- a replacement for HTML, CSS or JS
●  AngularJS IS
- a clientside JavaScript MVC Framework
- Extention to HTML with new attributes,
custom tags, ..

CraftCamp for Students - Introduction to AngularJS

Why use angular?
●  Re-usable components
●  Modularity
●  Dependency Injection
●  Two-way Databinding
●  Testing

Concepts
●  Expressions
●  Filters
●  Directives
●  Models
●  Modules
●  Controllers
●  2-Way Databinding
●  Services

Getting started
1. Include Angular
2. Bootstrap Angular

Directives
•  Extend HTML to define custom tags, attributes
and classes
•  ng-prefix
•  Normalization
ngModel
Recommended
HTML5
compliant

Directives
•  As an attribute (A)
•  As a class (C)
•  As an element (E)
•  As a comment (M)

Scopes
•  Exactly ONE root Scope via ng-app
•  Child scopes (controllers, directives)
•  Scope inheritance à Mimic DOM structure
•  Determine access to models

Models
•  Encapsulate application data
•  Variable on Scope
•  ngModel directive

Expressions
•  JavaScript-like code snippets that are
usually placed in bindings
- {{ expression }}
•  Valid expressions
- {{ 1 + 1 }}
- {{ a + b }}
- {{ name }}

Filters
●  Formatting values
●  Separated by | (pipe)
●  {{ expression | filter }}
●  Built-in filters: uppercase, lowercase, limitTo, …

Templates
HTML + Directives + Filters
View
Compile

Modules
●  AngularJS has nothing like a main method
●  Container for custom components
●  Allows us to build re-usable components
- Controllers
- Services
- Filters
- Directives

Controllers
•  Set up the inital state of $scope object
•  Add behavior to the $scope object
•  Inheritance

Controllers
•  Creates a new child scope
•  Scope of view injected in Controllers constructor
function

Services
●  Extract re-usable code
●  Communicate between controllers
●  Lazily instantiated (Dependency Injection)
●  Singletons

Services
●  $rootScope
●  $scope
●  $http
●  $q
●  $log
•  $interval
•  $resource
•  $timeout
•  $window
•  $document

Modules
•  An application level module
•  A module for each Feature
•  A module for each reusable component
- Controllers
- Services
- Filters
- Directives

Controllers
•  Do not use controllers to:
- Manipulate DOM ( à use directives)
- Format input (à use forms)
- Share code or state across Controllers
(à use services)

Dependencies
•  What happens with Minification?
- Renames function parameters
- How do does compiler know which is which?

ngSrc
•  The easy way
•  How it should be written

Not covered
•  Promises
•  Localization
•  Form Validation
•  Views & Routes
•  Server communication
•  Testing
•  …

Resources
•  https://docs.angularjs.org/
•  https://egghead.io/
•  https://thinkster.io/
•  http://www.slideshare.net/craftworkz/
•  https://github.com/craftworkz/ucll-workshop-angularjs

AngularJS is a JavaScript framework for building web applications using MVC architecture. It separates an application into three main components: models, views, and controllers. Scopes provide the link between models and views by allowing views to watch models and propagate changes. AngularJS differs from jQuery in that it focuses on designing the architecture first before building the application and views. Key features include data binding, dependency injection, and directives like ng-repeat and ng-src to manipulate the DOM.

Angular basicschatYu Jin

Angularjs BasicsJayantha Sirisena

AngularJS is a JavaScript MVC framework that uses Dependency Injection. It encourages writing unit testable code without JQuery or Observables. The basic concepts include Models for data, Views for the user interface, Controllers for application logic, and Scopes that connect data and behavior. Data binding in Angular allows writing interactive apps without custom JavaScript. Expressions and filters are used to display data. Controllers contain UI logic and Services provide shared logic across controllers.

Introduction to Angular 2Dawid Myslak

AngularJSYogesh L

AngularJS is a framework for building client-side web applications. It uses HTML as the template language and extends HTML attributes with directives. AngularJS applications are made up of modules that contain controllers, services, and directives to add dynamic behavior. Data binding in Angular updates the view automatically when the model changes. Key features include directives, two-way data binding, MVC pattern, dependency injection and routing.

AngularJS BasicsNikita Shounewich

- Angular is an open-source web application framework originally developed in 2009 that uses HTML as its template language. It is commonly used to create single-page applications. - Angular uses MVC architecture and two-way data binding between models and views. It has built-in dependency injection which allows for testable and scalable code. - Key Angular concepts include directives, filters, controllers and scopes which allow manipulating DOM elements and binding data. Modules are used to package code into reusable components.

Step by Step - AngularJSInfragistics

On September 25th we hosted a webinar on “Step by Step AngularJS for beginners” for the Indian region and we’d like to share the presentation and recorded webinar with you now! In the webinar, we covered: • Introduction to AngularJS • Introduction to SPA • Controller and $scope object • Controller hierarchy • Service and factory methods • Routing • CRUD operations in AngularJS application And more!

Binary Studio Academy PRO. JS course. Lecture 2. backboneBinary Studio

This document discusses Backbone and underscore.js libraries. It provides an overview of the main collections, functions, and utility methods available in underscore.js including each, filter, map, reduce, and templates. It also summarizes key aspects of Backbone including its emphasis on event-driven development, implementation of REST, and usage of core components like Models, Collections, Views and Routers.

AngularJS - the folly of choiceOleg Podsechin

Toolkits provide libraries that require assembly, while frameworks call the developer. AngularJS was designed to remove DOM manipulation code, using declarative templates and two-way binding instead of imperative code. It features scopes, modules, dependency injection, routing, directives, services, events, filters and promises to build web apps. Testing is important with AngularJS's inversion of control and removal of global state.

Building Blocks of Angular 2 and ASP.NET CoreLevi Fuller

React vs-angular-mobileMichael Haberman

This document compares Angular and React frameworks for mobile development, discussing hybrid solutions using Ionic and native solutions using React Native. It provides an overview of Angular and React, describing Angular as an MVC framework with two-way binding and React as a component-based library with unidirectional data flow. It then discusses Ionic as an Angular-based hybrid framework that allows access to some native APIs and React Native, which compiles JavaScript to native code for better performance and full native API access. In the comparison section, it summarizes that Ionic shares more code with the web but has limited performance and native capabilities, while React Native requires more platform-specific code but has native performance and full feature support.

AngularJS with RequireJSJohannes Weber

Angular 2 + TypeScript = true. Let's Play!Sirar Salih

Angular 2 offers significant improvements over Angular 1 including better performance, more powerful templates, dependency injection with lazy loading, and support for server-side rendering and web workers. The document outlines the key differences in directives, data binding, dependency injection and other areas between Angular 1 and 2. It recommends upgrading to Angular 2 due to the benefits, though notes it requires rewriting Angular 1 apps to use Angular 2's component-based structure.

Angular patternsPremkumar M

This document provides an overview of AngularJS including its advantages, uses, required tools, architecture, key concepts like directives, filters, dependency injection and services. AngularJS is a JavaScript MVC framework created by Google that focuses on the HTML side of web apps. It enhances HTML with directives, templates and bindings and is well-suited for single page apps. Development requires a code editor, browser and optional tools like NodeJS, GitHub, NPM and Gulp. The document outlines Angular's modular structure and core components like controllers, modules and scopes.

The Art of AngularJS - DeRailed 2014Matt Raible

AngularJS is one of today's hottest JavaScript MVC Frameworks. In this session, we'll explore many concepts it brings to the world of client-side development: dependency injection, directives, filters, routing and two-way data binding. We'll also look at its recommended testing tools and build systems. Finally, you'll learn about my experience developing several real-world applications using AngularJS, HTML5 and Bootstrap.

Up and Running with ReactJSLoc Nguyen

This document provides an overview and agenda for a workshop on getting started with ReactJS. The workshop will cover React components, component state and properties, component references and events, and React Router. It will discuss how React originated at Facebook and Instagram and uses a declarative view library approach. The virtual DOM and how it diffs changes to efficiently update the DOM is also highlighted.

Intro to Backbone.js with RailsTim Tyrrell

Ruby on Rails is awesome…why should you care about Backbone.js? Tim will give an overview of why Rails developers should care about Javascript MVC frameworks and how you can easily integrate one into a Rails application. He’ll also will explain the structure of a Backbone.js application and how the paradigm jives with its Rails counterparts. You should be able to walk away from this presentation and add Backbone.js to your resume. Code here: https://github.com/timtyrrell/todo

Angular js anupamaAnupama Prabhudesai

AngularJS is a JavaScript MVC framework developed by Google for building dynamic web applications. It uses HTML as the template language and allows two-way data binding between models and views. Some key features of AngularJS include declarative templates, dependency injection, MVC pattern, routing, and reusable components. It aims to address limitations of HTML for building dynamic views by providing structure and organization to code through directives, modules, and other features. Training in AngularJS is available from the Victorious Digital institute.

Angular 2Nigam Goyal

Ember development in 2019 Dilip Kushwaha

This document discusses Ember development in 2019 and beyond. It outlines the benefits of Ember such as convention over configuration and its robust addon ecosystem. It also notes some limitations like dependency on jQuery. The document then covers Ember's release cycle and editions. It focuses on Ember Octane, the new component API, and features like native classes, decorators, and async functions. It explains how to create an Octane app and required tooling. Finally, it briefly discusses upcoming changes like Module Unification that will further improve the project structure.

Angular 4Saurabh Juneja

Angular is a framework for building single-page applications. It uses TypeScript, which is a superset of JavaScript, and includes features like modules, components, directives, and services. Modules contain components and the root module is AppModule. Components have an HTML template and class with logic to control the template. Services provide reusable functionality like data access. Directives modify views by providing instructions within component templates. Setting up Angular involves installing Node.js, TypeScript, typings, Angular CLI, and creating a new project with ng new. The main.ts file acts as the entry point and bootstraps the app module. The tsconfig.json file provides TypeScript configuration and compiles TS to JS.

Drupal & AngularJS - DrupalCamp Spain 2014Juampy NR

This document discusses decoupling Drupal from AngularJS by moving business logic from Drupal to the client using JavaScript. It provides reasons for decoupling, including that theming in Drupal can be tedious and tricky, it serves as an alternative to Edge Side Includes (ESI) delivered by reverse proxies, and it allows for easier Drupal core upgrades. Key aspects of AngularJS like directives, controllers, and two-way data binding are demonstrated. AngularJS is presented as a good option for decoupling due to its model-view-controller separation and built-in data binding, unlike jQuery and Backbone which lack these features.

Presentation on angular 5Ramesh Adhikari

Integrating AngularJS with Drupal 7andrewmriley

AngularJS is a framework for client-side dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's low impact nature ties in with Drupal's data handling and structure to allow you rapidly make interactive Javascript applications. Javascript developers will find that Angular's Controller/View structure adapts itself well to Drupal's Block and/or Panel System with minimal disruption to a standard Javascript development workflow - even if that developer has minimal or no Drupal knowledge. In this talk I'll cover setting up AngularJS in Drupal using the Angles module, how to setup your Angular project structure for a large implementation (it works for small ones too), interacting with Drupal via the Services module and gotchas to watch out for. This talk is targeted at technical users primarily but managers evaluating using AngularJS with Drupal will also benefit. Having some Javascript experience is recommended but not required.

Introduction to AngularJSShyjal Raazi

1) The document introduces AngularJS, a framework for building single-page applications. It discusses why frameworks are needed for SPAs and highlights features of AngularJS like two-way data binding, directives, controllers, and routing. 2) The agenda covers AngularJS concepts like templates, directives, data binding, scopes, controllers, modules, filters, services, and routing. It also explains how an Angular app starts and how views interact with controllers. 3) Examples are provided to demonstrate two-way data binding, directives, controllers, and routing in AngularJS. Links are included for further learning on AngularJS tutorials and documentation.

Angular js - the beginningA.K.M. Ahsrafuzzaman

AngularJS is a JavaScript framework that extends HTML and allows two-way data binding between the HTML and JavaScript. It helps separate JavaScript logic from HTML rendering. AngularJS makes HTML dynamic by allowing developers to extend HTML attributes and elements. Any changes to the model in JavaScript will update the view in HTML and vice versa. AngularJS also allows watching for changes to data and updating other parts of the model automatically. While it can access existing jQuery code, AngularJS has its own methods for manipulating the DOM and data binding that are preferred within the AngularJS framework. AngularJS is well suited for complex single page applications where there is significant client-side logic and DOM manipulation.

CraftCamp for Students - Introduction to JHipstercraftworkz

This document discusses JHipster, an open source tool for generating and developing modern web applications in Java. JHipster uses Spring Boot and AngularJS to generate a frontend and backend for a web app that is production-ready out of the box with features like HTTP caching, JavaScript minification, monitoring, and logging. It presents JHipster as a foundation for building fast, scalable web apps using trends like microservices and NoSQL databases. A demo JHipster app is provided and the basics of using JHipster are explained, with pointers to documentation and other resources to get started.

Craftworkz at InterConnect 2017 - Creating a Highly Scalable Chatbot in a Mic...craftworkz

Craftworkz specializes in building applications that embed artificial intelligence. These applications can learn, discover, see, hear and interpret like humans. For several clients, Craftworkz has built custom chatbots using their own AI framework built in Python. To build this solution, Craftworkz has designed a microservices architecture that is deployed on IBM Bluemix. This highly available architecture consists of several Node.js and Python runtimes, Redis by Compose and several IBM containers. Depending on the application load, we can scale up or scale down the individual components. IBM Bluemix gave us the flexibility to use different compute options and easily bind off-the-shelf services with custom code.

More Related Content

What's hot (20)

Step by Step - AngularJSInfragistics

Binary Studio Academy PRO. JS course. Lecture 2. backboneBinary Studio

AngularJS - the folly of choiceOleg Podsechin

Building Blocks of Angular 2 and ASP.NET CoreLevi Fuller

React vs-angular-mobileMichael Haberman

AngularJS with RequireJSJohannes Weber

Angular 2 + TypeScript = true. Let's Play!Sirar Salih

Angular patternsPremkumar M

The Art of AngularJS - DeRailed 2014Matt Raible

Up and Running with ReactJSLoc Nguyen

Intro to Backbone.js with RailsTim Tyrrell

Angular js anupamaAnupama Prabhudesai

Angular 2Nigam Goyal

Ember development in 2019 Dilip Kushwaha

Angular 4Saurabh Juneja

Drupal & AngularJS - DrupalCamp Spain 2014Juampy NR

Presentation on angular 5Ramesh Adhikari

Integrating AngularJS with Drupal 7andrewmriley

Introduction to AngularJSShyjal Raazi

Angular js - the beginningA.K.M. Ahsrafuzzaman

Step by Step - AngularJSInfragistics

Binary Studio Academy PRO. JS course. Lecture 2. backboneBinary Studio

AngularJS - the folly of choiceOleg Podsechin

Building Blocks of Angular 2 and ASP.NET CoreLevi Fuller

React vs-angular-mobileMichael Haberman

AngularJS with RequireJSJohannes Weber

Angular 2 + TypeScript = true. Let's Play!Sirar Salih

Angular patternsPremkumar M

The Art of AngularJS - DeRailed 2014Matt Raible

Up and Running with ReactJSLoc Nguyen

Intro to Backbone.js with RailsTim Tyrrell

Angular js anupamaAnupama Prabhudesai

Angular 2Nigam Goyal

Ember development in 2019 Dilip Kushwaha

Angular 4Saurabh Juneja

Drupal & AngularJS - DrupalCamp Spain 2014Juampy NR

Presentation on angular 5Ramesh Adhikari

Integrating AngularJS with Drupal 7andrewmriley

Introduction to AngularJSShyjal Raazi

Angular js - the beginningA.K.M. Ahsrafuzzaman

Viewers also liked (12)

CraftCamp for Students - Introduction to JHipstercraftworkz

Craftworkz at InterConnect 2017 - Creating a Highly Scalable Chatbot in a Mic...craftworkz

7. Системы компенсации и стимулирования 03Katie Danilova

Bluemix Girl's Night by Keshia - Building a custom HR applicationcraftworkz

Bluemix Girl's Night by Verena - Cosy carecraftworkz

CraftCamp for Students - Introduction to Meteor.jscraftworkz

This document summarizes a workshop on the Meteor platform for building web and mobile apps. Meteor allows developing both client and server code in JavaScript and sharing code between them. Apps are built using MongoDB, WebSockets for live updates, and Node.js on the server. Meteor supports mobile development for Android and iOS using Cordova. Isomorphic packages allow accessing native device APIs like GPS. The structure of a Meteor app includes models, client-side templates and logic, server-side code, and public/private assets. A demo chat application is shown to illustrate a basic Meteor app. Questions are taken at the end.

Introduction to IBM Bluemixcraftworkz

This document provides an agenda and overview of the introduction to Bluemix presentation. It includes sections on Cloud Foundry, IBM Bluemix, buildpacks, services, Cloud Foundry nuts and bolts, IBM Containers, Buildpacks, DevOps, Cloudant NoSQL database, the Cloud Foundry command line interface, Cloud Foundry manifests, VCAP environment variables, and demos of building a PHP application and using services like SendGrid in Bluemix.

Blockchain for Businesscraftworkz

This document discusses blockchain technology and its applications for businesses. It introduces blockchain as a mechanism for drawing fact-based conclusions in an auditable way. It then discusses how blockchain can be used to securely transfer ownership of assets and data through smart contracts. The document outlines several potential use cases for blockchain across different industries, including proof of ownership, supply chain management, e-commerce, know your customer processes, and IoT asset tracking. It concludes by inviting the reader to learn more about how Cronos Group can help organizations apply blockchain.

JHipster, modern web application development made easyRaphaël Brugier

The document discusses JHipster, an open source tool that generates complete and modern web applications using Spring Boot for the backend and AngularJS for the frontend. It provides an overview of JHipster's features like auto-wiring, best practices configuration, and options for NoSQL databases, Elasticsearch, caching, and deployment to Docker. The presentation includes a demo of using JHipster to quickly generate and deploy a sample web application.

Migrating your monolithic application for micro services with JHipsterLazaro Prates Junior

JHipster is a Yeoman generator used to create Spring Boot and AngularJS projects. It allows developers to migrate monolithic applications to microservices architectures. With over 17,000 downloads in the last 30 days, 233 contributors, and 4,346 stars on GitHub, JHipster is a popular tool for building microservices with Spring Boot and Angular. It can help split a monolithic application into independently deployable services.

Deploying JHipster MicroservicesJoe Kutner

- The document discusses deploying JHipster microservices. It begins by generating a JHipster microservices application and configuring options like the application name, database, and authentication. - The application is then generated, creating all necessary files and scaffolding for the microservices architecture. - Options selected include PostgreSQL for the production database, JWT authentication, and HazelCast for caching.

JHipsterYuen-Kuei Hsueh

CraftCamp for Students - Introduction to JHipstercraftworkz

Craftworkz at InterConnect 2017 - Creating a Highly Scalable Chatbot in a Mic...craftworkz

7. Системы компенсации и стимулирования 03Katie Danilova

Bluemix Girl's Night by Keshia - Building a custom HR applicationcraftworkz

Bluemix Girl's Night by Verena - Cosy carecraftworkz

CraftCamp for Students - Introduction to Meteor.jscraftworkz

Introduction to IBM Bluemixcraftworkz

Blockchain for Businesscraftworkz

JHipster, modern web application development made easyRaphaël Brugier

Migrating your monolithic application for micro services with JHipsterLazaro Prates Junior

Deploying JHipster MicroservicesJoe Kutner

JHipsterYuen-Kuei Hsueh

Similar to CraftCamp for Students - Introduction to AngularJS (20)

AngularJS WorkshopGianluca Cacace

ME vs WEB - AngularJS FundamentalsAviran Cohen

AngularJS in practiceEugene Fidelin

Coffee@DBG - Exploring Angular JSDeepu S Nath

This document provides an overview of AngularJS, including: - Core concepts like MVC pattern, data binding, dependency injection, modules, controllers, scopes, services, filters and directives - When to use AngularJS for CRUD and single-page applications versus when not to for games or non-SPA apps - Next steps like learning JavaScript fundamentals, reading documentation, doing tutorials, and checking out tools like Yeoman and Batarang - A sample AngularJS application is demonstrated

Angular workshop - Full Development GuideNitin Giri

AngularJS provides powerful tools for building single page applications, including data binding, scopes, controllers, directives, filters and forms validation. It follows an MVC pattern with two-way data binding between models and views. Key features include directives for creating custom HTML elements, filters for formatting data and built-in validation for forms. AngularJS aims to improve frontend development by reducing code and server interactions.

AngularJS is awesomeEusebiu Schipor

AngularJS is a client-side JavaScript framework that allows developers to create single page applications. It provides two-way data binding, MVC architecture, templates and custom directives to help build testable web apps that can scale. Some key features include data binding, controllers, expressions to dynamically display data, modules to organize code, and services to handle back-end communication. Overall, AngularJS streamlines web development by handling many common tasks like DOM manipulation, data binding and communication with backend services.

Angular js slidesAmr Abd El Latief

Dive into Angular, part 1: IntroductionOleksii Prohonnyi

This presentation has been prepared by Oleksii Prohonnyi for internal Angular.js training to improve skills of newbies in JS/Angular. Part 2 (Architecture): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-2-architecture Part 3 (Performance): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-3-performance Part 4 (Angular 2.0): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-4-angular-20 Part 5 (Experience): https://www.slideshare.net/oprohonnyi/dive-into-angular-part-5-experience

Angular Javascript Tutorial with commandssuser42b933

AngularJSHiten Pratap Singh

The document outlines an agenda for a presentation on AngularJS that covers: 1. An introduction to AngularJS and its core features like two-way data binding, templates, and MVC architecture. 2. Explanations and examples of key AngularJS concepts like directives, expressions, forms, services, modules, routing, and scopes. 3. Discussions of AngularJS advantages like fast development and scalability, and disadvantages like complexity. 4. References for further learning and a question/answer session.

AngularJS NexThoughts Technologies

Angular jsHritesh Saha

This document provides an overview of AngularJS, including what it is, how it uses MVC architecture, data binding, views, controllers, models, modules, routing, and more. Some key points are: - AngularJS is an open-source JavaScript framework that uses MVC pattern for building dynamic web apps - It uses data binding so changes to models and data are automatically reflected in views - Views use directives like ng-repeat and ng-if to interact with models and controllers - Controllers contain business logic and models contain application data - Modules are used to separate an app into components and routing manages multiple views

ANGULARJS introduction components services and directivesSanthoshB77

angularJs WorkshopRan Wahle

AngularJS is an open-source JavaScript framework for building dynamic web applications. It uses HTML as the template language and allows extending HTML vocabulary for the application. The key concepts covered in the document include modules and dependency injection, data binding using controllers and scopes, services, filters, form validation, directives, and routing. Various AngularJS features like modules, controllers, services, directives etc. are demonstrated via code examples. The document provides an introduction to core AngularJS concepts through explanations, code samples and a demo.

AngularjsYnon Perek

The document provides an overview and introduction to AngularJS. It discusses key Angular concepts like data binding, directives, filters, controllers and scopes. It also covers using Angular for client-side routing and communicating with servers to retrieve data. Example code snippets are provided to demonstrate concepts like controllers, directives and routing. Labs and exercises are included to apply the concepts by building sample Angular applications.

Intoduction to AngularjsGaurav Agrawal

AngularJS is an open source JavaScript framework for building dynamic web applications. It enhances HTML with custom directives and bindings to enrich client-side web applications with reusable components. Key features include two-way data binding, reusable components, support for MVC/MVVM design patterns, end-to-end testing, cross-browser compatibility, and services. AngularJS allows developers to organize applications into modules and controllers to keep code clean and reusable.

Everything You Need To Know About AngularJSSina Mirhejazi

AngularJS BasicsRavi Mone

AngularJS is a JavaScript framework for building single-page web applications. It augments HTML to provide MVC capabilities and allows developers to write dynamic web apps without having to manipulate the DOM directly. AngularJS uses scopes to bind models and views, and filters to format data for display. Directives extend HTML and allow developers to create reusable components. Modules are used to organize code and keep the global namespace clean.

AngularJS.part1Andrey Kolodnitsky

AngularJS is a JavaScript framework for building complex client-side web applications. It provides modules, controllers, directives, services and other core features out of the box. Modules allow separating an application into logical domains and define dependencies. Controllers contain business logic and retrieve data from services. Directives extend HTML attributes and elements. Services provide reusable behavior across the application. AngularJS uses dependency injection for testability and supports unit and end-to-end testing.

AngularJs Workshop SDP December 28th 2014Ran Wahle

This document provides an overview and agenda for a training on AngularJS. It introduces key concepts in AngularJS like modules, dependency injection, data binding with controllers and scopes, services, filters, directives, forms, and routing. Code examples are provided to demonstrate creating modules, controllers, services, binding data between the view and model, and using built-in and custom directives. The training will cover building AngularJS applications with a focus on best practices.

AngularJS WorkshopGianluca Cacace

ME vs WEB - AngularJS FundamentalsAviran Cohen

AngularJS in practiceEugene Fidelin

Coffee@DBG - Exploring Angular JSDeepu S Nath

Angular workshop - Full Development GuideNitin Giri

AngularJS is awesomeEusebiu Schipor

Angular js slidesAmr Abd El Latief

Dive into Angular, part 1: IntroductionOleksii Prohonnyi

Angular Javascript Tutorial with commandssuser42b933

AngularJSHiten Pratap Singh

AngularJS NexThoughts Technologies

Angular jsHritesh Saha

ANGULARJS introduction components services and directivesSanthoshB77

angularJs WorkshopRan Wahle

AngularjsYnon Perek

Intoduction to AngularjsGaurav Agrawal

Everything You Need To Know About AngularJSSina Mirhejazi

AngularJS BasicsRavi Mone

AngularJS.part1Andrey Kolodnitsky

AngularJs Workshop SDP December 28th 2014Ran Wahle

Recently uploaded (20)

Offshore IT Support: Balancing In-House and Offshore Help Desk Techniciansjohn823664

In today's always-on digital environment, businesses must deliver seamless IT support across time zones, devices, and departments. This SlideShare explores how companies can strategically combine in-house expertise with offshore talent to build a high-performing, cost-efficient help desk operation. From the benefits and challenges of offshore support to practical models for integrating global teams, this presentation offers insights, real-world examples, and key metrics for success. Whether you're scaling a startup or optimizing enterprise support, discover how to balance cost, quality, and responsiveness with a hybrid IT support strategy. Perfect for IT managers, operations leads, and business owners considering global help desk solutions.

AI Emotional Actors: “When Machines Learn to Feel and Perform"AkashKumar809858

Agentic AI - The New Era of IntelligenceMuzammil Shah

This presentation is specifically designed to introduce final-year university students to the foundational principles of Agentic Artificial Intelligence (AI). It aims to provide a clear understanding of how Agentic AI systems function, their key components, and the underlying technologies that empower them. By exploring real-world applications and emerging trends, the session will equip students with essential knowledge to engage with this rapidly evolving area of AI, preparing them for further study or professional work in the field.

6th Power Grid Model Meetup - 21 May 2025DanBrown980551

6th Power Grid Model Meetup Join the Power Grid Model community for an exciting day of sharing experiences, learning from each other, planning, and collaborating. This hybrid in-person/online event will include a full day agenda, with the opportunity to socialize afterwards for in-person attendees. If you have a hackathon proposal, tell us when you register! About Power Grid Model The global energy transition is placing new and unprecedented demands on Distribution System Operators (DSOs). Alongside upgrades to grid capacity, processes such as digitization, capacity optimization, and congestion management are becoming vital for delivering reliable services. Power Grid Model is an open source project from Linux Foundation Energy and provides a calculation engine that is increasingly essential for DSOs. It offers a standards-based foundation enabling real-time power systems analysis, simulations of electrical power grids, and sophisticated what-if analysis. In addition, it enables in-depth studies and analysis of the electrical power grid’s behavior and performance. This comprehensive model incorporates essential factors such as power generation capacity, electrical losses, voltage levels, power flows, and system stability. Power Grid Model is currently being applied in a wide variety of use cases, including grid planning, expansion, reliability, and congestion studies. It can also help in analyzing the impact of renewable energy integration, assessing the effects of disturbances or faults, and developing strategies for grid control and optimization.

Multistream in SIP and NoSIP @ OpenSIPS Summit 2025Lorenzo Miniero

Slides for my "Multistream support in the Janus SIP and NoSIP plugins" presentation at the OpenSIPS Summit 2025 event. They describe my efforts refactoring the Janus SIP and NoSIP plugins to allow for the gatewaying of an arbitrary number of audio/video streams per call (thus breaking the current 1-audio/1-video limitation), plus some additional considerations on what this could mean when dealing with application protocols negotiated via SIP as well.

Grannie’s Journey to Using Healthcare AI ExperiencesLauren Parr

ECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptxJasper Oosterveld

Microsoft Build 2025 takeaways in one presentationDigitalmara

Microsoft Build 2025 introduced significant updates. Everything revolves around AI. DigitalMara analyzed these announcements: • AI enhancements for Windows 11 By embedding AI capabilities directly into the OS, Microsoft is lowering the barrier for users to benefit from intelligent automation without requiring third-party tools. It's a practical step toward improving user experience, such as streamlining workflows and enhancing productivity. However, attention should be paid to data privacy, user control, and transparency of AI behavior. The implementation policy should be clear and ethical. • GitHub Copilot coding agent The introduction of coding agents is a meaningful step in everyday AI assistance. However, it still brings challenges. Some people compare agents with junior developers. They noted that while the agent can handle certain tasks, it often requires supervision and can introduce new issues. This innovation holds both potential and limitations. Balancing automation with human oversight is crucial to ensure quality and reliability. • Introduction of Natural Language Web NLWeb is a significant step toward a more natural and intuitive web experience. It can help users access content more easily and reduce reliance on traditional navigation. The open-source foundation provides developers with the flexibility to implement AI-driven interactions without rebuilding their existing platforms. NLWeb is a promising level of web interaction that complements, rather than replaces, well-designed UI. • Introduction of Model Context Protocol MCP provides a standardized method for connecting AI models with diverse tools and data sources. This approach simplifies the development of AI-driven applications, enhancing efficiency and scalability. Its open-source nature encourages broader adoption and collaboration within the developer community. Nevertheless, MCP can face challenges in compatibility across vendors and security in context sharing. Clear guidelines are crucial. • Windows Subsystem for Linux is open-sourced It's a positive step toward greater transparency and collaboration in the developer ecosystem. The community can now contribute to its evolution, helping identify issues and expand functionality faster. However, open-source software in a core system also introduces concerns around security, code quality management, and long-term maintenance. Microsoft’s continued involvement will be key to ensuring WSL remains stable and secure. • Azure AI Foundry platform hosts Grok 3 AI models Adding new models is a valuable expansion of AI development resources available at Azure. This provides developers with more flexibility in choosing language models that suit a range of application sizes and needs. Hosting on Azure makes access and integration easier when using Microsoft infrastructure.

The case for on-premises AIPrincipled Technologies

Exploring the advantages of on-premises Dell PowerEdge servers with AMD EPYC processors vs. the cloud for small to medium businesses’ AI workloads AI initiatives can bring tremendous value to your business, but you need to support your new AI workloads effectively. That means choosing the best possible infrastructure for your needs—and many companies are finding that the cloud isn’t right for them. According to a recent Rackspace survey of IT executives, 69 percent of companies have moved some of their applications on-premises from the cloud, with half of those citing security and compliance as the reason and 44 percent citing cost. On-premises solutions provide a number of advantages. With full control over your security infrastructure, you can be certain that all compliance requirements remain firmly in the hands of your IT team. Opting for on-premises also gives you the ability to design your infrastructure to the precise needs of that team and your new AI workloads. Depending on the workload, you may also see performance benefits, along with more predictable costs. As you start to build your next AI initiative, consider an on-premises solution utilizing AMD EPYC processor-powered Dell PowerEdge servers.

Cognitive Chasms - A Typology of GenAI Failure Failure ModesDr. Tathagat Varma

Create Your First AI Agent with UiPath Agent BuilderDianaGray10

Join us for an exciting virtual event where you'll learn how to create your first AI Agent using UiPath Agent Builder. This session will cover everything you need to know about what an agent is and how easy it is to create one using the powerful AI-driven UiPath platform. You'll also discover the steps to successfully publish your AI agent. This is a wonderful opportunity for beginners and enthusiasts to gain hands-on insights and kickstart their journey in AI-powered automation.

Co-Constructing Explanations for AI Systems using ProvenancePaul Groth

Explanation is not a one off - it's a process where people and systems work together to gain understanding. This idea of co-constructing explanations or explanation by exploration is powerful way to frame the problem of explanation. In this talk, I discuss our first experiments with this approach for explaining complex AI systems by using provenance. Importantly, I discuss the difficulty of evaluation and discuss some of our first approaches to evaluating these systems at scale. Finally, I touch on the importance of explanation to the comprehensive evaluation of AI systems.

LSNIF: Locally-Subdivided Neural Intersection FunctionTakahiro Harada

Neural representations have shown the potential to accelerate ray casting in a conventional ray-tracing-based rendering pipeline. We introduce a novel approach called Locally-Subdivided Neural Intersection Function (LSNIF) that replaces bottom-level BVHs used as traditional geometric representations with a neural network. Our method introduces a sparse hash grid encoding scheme incorporating geometry voxelization, a scene-agnostic training data collection, and a tailored loss function. It enables the network to output not only visibility but also hit-point information and material indices. LSNIF can be trained offline for a single object, allowing us to use LSNIF as a replacement for its corresponding BVH. With these designs, the network can handle hit-point queries from any arbitrary viewpoint, supporting all types of rays in the rendering pipeline. We demonstrate that LSNIF can render a variety of scenes, including real-world scenes designed for other path tracers, while achieving a memory footprint reduction of up to 106.2x compared to a compressed BVH. https://arxiv.org/abs/2504.21627

UiPath Community Berlin: Studio Tips & Tricks and UiPath InsightsUiPathCommunity

Join the UiPath Community Berlin (Virtual) meetup on May 27 to discover handy Studio Tips & Tricks and get introduced to UiPath Insights. Learn how to boost your development workflow, improve efficiency, and gain visibility into your automation performance. 📕 Agenda: - Welcome & Introductions - UiPath Studio Tips & Tricks for Efficient Development - Best Practices for Workflow Design - Introduction to UiPath Insights - Creating Dashboards & Tracking KPIs (Demo) - Q&A and Open Discussion Perfect for developers, analysts, and automation enthusiasts! This session streamed live on May 27, 18:00 CET. Check out all our upcoming UiPath Community sessions at: 👉 https://community.uipath.com/events/ Join our UiPath Community Berlin chapter: 👉 https://community.uipath.com/berlin/

Cyber security cyber security cyber security cyber security cyber security cy...pranavbodhak

Contributing to WordPress With & Without Code.pptxPatrick Lumumba

Contributing to WordPress: Making an Impact on the Test Team—With or Without Coding Skills WordPress survives on collaboration, and the Test Team plays a very important role in ensuring the CMS is stable, user-friendly, and accessible to everyone. This talk aims to deconstruct the myth that one has to be a developer to contribute to WordPress. In this session, I will share with the audience how to get involved with the WordPress Team, whether a coder or not. We’ll explore practical ways to contribute, from testing new features, and patches, to reporting bugs. By the end of this talk, the audience will have the tools and confidence to make a meaningful impact on WordPress—no matter the skill set.

Droidal: AI Agents Revolutionizing HealthcareDroidal LLC

Droidal’s AI Agents are transforming healthcare by bringing intelligence, speed, and efficiency to key areas such as Revenue Cycle Management (RCM), clinical operations, and patient engagement. Built specifically for the needs of U.S. hospitals and clinics, Droidal's solutions are designed to improve outcomes and reduce administrative burden. Through simple visuals and clear examples, the presentation explains how AI Agents can support medical coding, streamline claims processing, manage denials, ensure compliance, and enhance communication between providers and patients. By integrating seamlessly with existing systems, these agents act as digital coworkers that deliver faster reimbursements, reduce errors, and enable teams to focus more on patient care. Droidal's AI technology is more than just automation — it's a shift toward intelligent healthcare operations that are scalable, secure, and cost-effective. The presentation also offers insights into future developments in AI-driven healthcare, including how continuous learning and agent autonomy will redefine daily workflows. Whether you're a healthcare administrator, a tech leader, or a provider looking for smarter solutions, this presentation offers a compelling overview of how Droidal’s AI Agents can help your organization achieve operational excellence and better patient outcomes. A free demo trial is available for those interested in experiencing Droidal’s AI Agents firsthand. Our team will walk you through a live demo tailored to your specific workflows, helping you understand the immediate value and long-term impact of adopting AI in your healthcare environment. To request a free trial or learn more: https://droidal.com/

Maxx nft market place new generation nft marketing placeusersalmanrazdelhi

PREFACE OF MAXXNFT MaxxNFT: Powering the Future of Digital Ownership MaxxNFT is a cutting-edge Web3 platform designed to revolutionize how digital assets are owned, traded, and valued. Positioned at the forefront of the NFT movement, MaxxNFT views NFTs not just as collectibles, but as the next generation of internet equity—unique, verifiable digital assets that unlock new possibilities for creators, investors, and everyday users alike. Through strategic integrations with OKT Chain and OKX Web3, MaxxNFT enables seamless cross-chain NFT trading, improved liquidity, and enhanced user accessibility. These collaborations make it easier than ever to participate in the NFT ecosystem while expanding the platform’s global reach. With a focus on innovation, user rewards, and inclusive financial growth, MaxxNFT offers multiple income streams—from referral bonuses to liquidity incentives—creating a vibrant community-driven economy. Whether you ' re minting your first NFT or building a digital asset portfolio, MaxxNFT empowers you to participate in the future of decentralized value exchange. https://maxxnft.xyz/

Let’s Get Slack Certified! 🚀- Slack CommunitySanjeetMishra29

Supercharge Your AI Development with Local LLMsFrancesco Corti

In today's AI development landscape, developers face significant challenges when building applications that leverage powerful large language models (LLMs) through SaaS platforms like ChatGPT, Gemini, and others. While these services offer impressive capabilities, they come with substantial costs that can quickly escalate especially during the development lifecycle. Additionally, the inherent latency of web-based APIs creates frustrating bottlenecks during the critical testing and iteration phases of development, slowing down innovation and frustrating developers. This talk will introduce the transformative approach of integrating local LLMs directly into their development environments. By bringing these models closer to where the code lives, developers can dramatically accelerate development lifecycles while maintaining complete control over model selection and configuration. This methodology effectively reduces costs to zero by eliminating dependency on pay-per-use SaaS services, while opening new possibilities for comprehensive integration testing, rapid prototyping, and specialized use cases.

Offshore IT Support: Balancing In-House and Offshore Help Desk Techniciansjohn823664

AI Emotional Actors: “When Machines Learn to Feel and Perform"AkashKumar809858

Agentic AI - The New Era of IntelligenceMuzammil Shah

6th Power Grid Model Meetup - 21 May 2025DanBrown980551

Multistream in SIP and NoSIP @ OpenSIPS Summit 2025Lorenzo Miniero

Grannie’s Journey to Using Healthcare AI ExperiencesLauren Parr

ECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptxJasper Oosterveld

Microsoft Build 2025 takeaways in one presentationDigitalmara

The case for on-premises AIPrincipled Technologies

Cognitive Chasms - A Typology of GenAI Failure Failure ModesDr. Tathagat Varma

Create Your First AI Agent with UiPath Agent BuilderDianaGray10

Co-Constructing Explanations for AI Systems using ProvenancePaul Groth

LSNIF: Locally-Subdivided Neural Intersection FunctionTakahiro Harada

UiPath Community Berlin: Studio Tips & Tricks and UiPath InsightsUiPathCommunity

Cyber security cyber security cyber security cyber security cyber security cy...pranavbodhak

Contributing to WordPress With & Without Code.pptxPatrick Lumumba

Droidal: AI Agents Revolutionizing HealthcareDroidal LLC

Maxx nft market place new generation nft marketing placeusersalmanrazdelhi

Let’s Get Slack Certified! 🚀- Slack CommunitySanjeetMishra29

Supercharge Your AI Development with Local LLMsFrancesco Corti

CraftCamp for Students - Introduction to AngularJS

1. Introduction to AngularJS

2. Gunther Laurijssens Consultant @laurigun

3. Agenda ●  What is AngularJS? ●  Why use AngularJS? ●  Concepts + demos ●  Tips

4. What is angular? ●  AngularJS IS NOT - a Library - a replacement for HTML, CSS or JS ●  AngularJS IS - a clientside JavaScript MVC Framework - Extention to HTML with new attributes, custom tags, ..

6. Why use angular? ●  Re-usable components ●  Modularity ●  Dependency Injection ●  Two-way Databinding ●  Testing

7. Concepts ●  Expressions ●  Filters ●  Directives ●  Models ●  Modules ●  Controllers ●  2-Way Databinding ●  Services

8. Getting started 1. Include Angular 2. Bootstrap Angular

9. Directives •  Extend HTML to define custom tags, attributes and classes •  ng-prefix •  Normalization ngModel Recommended HTML5 compliant

10. Directives •  As an attribute (A) •  As a class (C) •  As an element (E) •  As a comment (M)

11. Scopes •  Exactly ONE root Scope via ng-app •  Child scopes (controllers, directives) •  Scope inheritance à Mimic DOM structure •  Determine access to models

12. Models •  Encapsulate application data •  Variable on Scope •  ngModel directive

13. Expressions •  JavaScript-like code snippets that are usually placed in bindings - {{ expression }} •  Valid expressions - {{ 1 + 1 }} - {{ a + b }} - {{ name }}

14. Filters ●  Formatting values ●  Separated by | (pipe) ●  {{ expression | filter }} ●  Built-in filters: uppercase, lowercase, limitTo, …

15. Templates HTML + Directives + Filters View Compile

16. Modules ●  AngularJS has nothing like a main method ●  Container for custom components ●  Allows us to build re-usable components - Controllers - Services - Filters - Directives

17. Controllers •  Set up the inital state of $scope object •  Add behavior to the $scope object •  Inheritance

18. Controllers •  Creates a new child scope •  Scope of view injected in Controllers constructor function

19. $Scope View Controller ViewModel Model

20. 2-way databinding

21. Services ●  Extract re-usable code ●  Communicate between controllers ●  Lazily instantiated (Dependency Injection) ●  Singletons

22. Services ●  $rootScope ●  $scope ●  $http ●  $q ●  $log •  $interval •  $resource •  $timeout •  $window •  $document

23. Services - Factory

24. Services - Service

25. Tips

26. Modules •  An application level module •  A module for each Feature •  A module for each reusable component - Controllers - Services - Filters - Directives

27. Controllers •  Do not use controllers to: - Manipulate DOM ( à use directives) - Format input (à use forms) - Share code or state across Controllers (à use services)

28. Dependencies •  What happens with Minification? - Renames function parameters - How do does compiler know which is which?

29. ngSrc •  The easy way •  How it should be written

30. Not covered •  Promises •  Localization •  Form Validation •  Views & Routes •  Server communication •  Testing •  …

31. Resources •  https://docs.angularjs.org/ •  https://egghead.io/ •  https://thinkster.io/ •  http://www.slideshare.net/craftworkz/ •  https://github.com/craftworkz/ucll-workshop-angularjs

32. Thanks for listening! Questions?